Alfredo Ramos

Marquesina simple en CSS

3 min lectura

Marquesina simple en CSS.

Estado de desarrollo Última versión estable Calidad de código Licencia

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):

1
2
bundle update
bundle exec rake build:all

Vista previa

Elemento único

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

1
2
3
<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.
1
2
3
4
5
6
7
<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.

1
2
3
<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.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<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.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

Aenean feugiat mi nibh, nec congue sapien efficitur et.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="marquee marquee-speed-fx2">
	<p class="marquee-content">Aenean feugiat mi nibh, nec congue sapien efficitur et.</p>
</div>
<div class="marquee marquee-speed-fx3">
	<p class="marquee-content">Aenean feugiat mi nibh, nec congue sapien efficitur et.</p>
</div>
<div class="marquee marquee-speed-fx4">
	<p class="marquee-content">Aenean feugiat mi nibh, nec congue sapien efficitur et.</p>
</div>
<div class="marquee marquee-speed-fx5">
	<p class="marquee-content">Aenean feugiat mi nibh, nec congue sapien efficitur et.</p>
</div>

Requisitos

Éstos requisitos únicamente son necesarios para desarrollo:

  • Ruby 2.4.0 o superior
  • Bundler

Soporte

Comentarios