Marquesina simple en CSS • Alfredo Ramos

Marquesina simple en CSS.

Genera un efecto de animación de desplazamiento horizontal de elementos, como texto o imágenes. Intenta imitar el comportamiento que realizaba la obsoleta etiqueta <marquee>, usando únicamente CSS.

Características

Desplaza uno o varios elementos
Es posible cambiar el sentido de la animación
Es posible cambiar la velocidad de la animación
Facilmente personalizable usando SCSS

Modo de uso

Agregue la siguiente hoja de estilo dentro de <head>:

<link
	rel="stylesheet"
	src="https://gistcdn.githack.com/AlfredoRamos/241ebc49763fd6d8d805878e29b9c804/raw/f09b2f37fd72e5a467751cd38c91ce37a3a29e10/marquee.min.css"
	integrity="sha384-ECRKWCMB2qBwzuBeswCnbFX/P6kUKtMxQXk9PkbsLPQGAtgAyIoH8LRchuTJws+c"
	crossorigin="anonymous"
/>

Si desea personalizarlo, puede modificar y generar los archivos CSS con los siguientes comandos (ver Requisitos):

bundle update
bundle exec rake build:all

Vista previa

Elemento único

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="marquee">
	<p class="marquee-content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</p>
</div>

Elementos múltiples

Cras volutpat ante a risus eleifend fringilla in maximus nulla.
Duis pretium, dolor vitae placerat scelerisque, sem magna posuere nisi, ac tempus lacus eros in ex.
Morbi luctus condimentum tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus.

<div class="marquee">
	<ul class="marquee-content">
		<li>Cras volutpat ante a risus eleifend fringilla in maximus nulla.</li>
		<li>
			Duis pretium, dolor vitae placerat scelerisque, sem magna posuere
			nisi, ac tempus lacus eros in ex.
		</li>
		<li>
			Morbi luctus condimentum tincidunt. Interdum et malesuada fames ac
			ante ipsum primis in faucibus.
		</li>
	</ul>
</div>

Sentido contrario

Vestibulum hendrerit dapibus placerat. Etiam bibendum mollis ipsum ac pellentesque.

<div class="marquee marquee-reverse">
	<p class="marquee-content">
		Vestibulum hendrerit dapibus placerat. Etiam bibendum mollis ipsum ac
		pellentesque.
	</p>
</div>

Velocidad

Lento

Velocidades disponibles para animación lenta van desde sx2 hasta sx5.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

<div class="marquee marquee-speed-sx2">
	<p class="marquee-content">
		Aenean feugiat mi nibh, nec congue sapien efficitur et.
	</p>
</div>
<div class="marquee marquee-speed-sx3">
	<p class="marquee-content">
		Aenean feugiat mi nibh, nec congue sapien efficitur et.
	</p>
</div>
<div class="marquee marquee-speed-sx4">
	<p class="marquee-content">
		Aenean feugiat mi nibh, nec congue sapien efficitur et.
	</p>
</div>
<div class="marquee marquee-speed-sx5">
	<p class="marquee-content">
		Aenean feugiat mi nibh, nec congue sapien efficitur et.
	</p>
</div>

Rápido

Velocidades disponibles para animación rápida van desde fx2 hasta fx5.