Marquesina de artículos con CSS3 (sin javascript)
Supuse el caso de necesitar para una web una especie de slideshow con las introducciones a los artículos destacados. La siguiente es la forma que lo encaré.
Escribí el HTML de una página de prueba, a la que le incluí la introducción a tres artículos del blog (uno sobre Scribus, otro sobre Inkscape y el tercero sobre Gimp):
<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
<meta charset=utf-8" />
<style>
</style>
</head>
<body>
<section class="rotativa">
<div class="intro-noticia">
<h1>Creación, desde cero, de un díptico con Scribus (parte I) </h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Scribus_logo.svg/600px-Scribus_logo.svg.png">
<p>Con esta entrada comienzo una serie con la que espero poder explicar cómo hacer, desde cero, un díptico tamaño A5 utilizando <i>Scribus</i> como base.<br>
El trabajo final estará pensado para tres destinos: web, impresora de escritorio e impreso comercial (en sistema <a href="http://es.wikipedia.org/wiki/%C3%93fset">offset</a>).<br>
En el proceso también utilizaré <i>Inkscape</i>, <i>GIMP</i> y <i>Krita</i>...</p>
<p><a href="https://javiersam.blogspot.com/2015/04/creacion-desde-cero-de-un-diptico-con_28.html">[ Leer + ]</a></p>
</div>
<div class="intro-noticia">
<h1>100 consejos y trucos útiles para trabajar con Inkscape (de Mark Crutch para Full Circle Magazine)</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Inkscape.logo.svg/390px-Inkscape.logo.svg.png">
<p>El mes pasado la <a href="http://fullcirclemagazine.org/">revista <i>"Full Circle"</i></a> marcó un hito. Llegó a las <a href="http://www.javiersam.blogspot.com.uy/2015/08/full-circle-100-agosto-2015.html">100 ediciones</a>. Cifra muy difíícil de alcanzar para cualquier publicación seriada, y, máás aún, con las características y temática de ésta en particular.<br>
Así que, nuevamente, mis felicitaciones a <b><i>Ronnie Tucker</i></b> y al equipo de gente que colabora con él.<br>
En esa edición aniversario, con artículos especiales y más páginas que lo habitual, me resultó más que interesante el artículo de <a href="http://www.peppertop.com/blog/"><i><b>Mark Crutch</b></i></a>, quién todos los meses escribe muy buenos y detallados artículos sobre <i>Inkscape</i>.<br>
Tan es así que decidí traducirlo al español y publicarlo, porque vale la pena: creo que hasta los usuarios avanzados de Inkscape van a encontrar algunos trucos novedosos.<br>
Aquí va...</p>
<p><a href="https://javiersam.blogspot.com/2015/09/100-consejos-y-trucos-utiles-para.html">[ Leer + ]</a></p>
</div>
<div class="intro-noticia">
<h1>BIMP, un plugin de GIMP para la manipulación de imágenes por lotes</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Wilber-gimp.png">
<p>En <a href="https://www.atareao.es/">el atareao</a> me enteré de la existencia de <a href="https://www.atareao.es/software/fotografia/bimp-o-como-redimensionar-cientos-de-imagenes-con-gimp-en-ubuntu/">BIMP</a>, un complemento de GIMP para editar imágenes por lotes, o sea, aplicar modificaciones (ya sea de dimensiones, recortado, girado, corrección de color, etc) a muchas imágenes simultáneamente...</p>
<p><a href="https://javiersam.blogspot.com/2015/11/bimp-un-plugin-de-gimp-para-la.html">[ Leer + ]</a></p>
</div>
</section>
</body>
</html>
El código precedente, se ve así en un navegador:
Entre las etiquetas de apertura y cierre <style> (línea 8) coloqué el siguiente código CSS para controlar la apariencia de la página:
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
h1 {
font-family: Georgia, 'Times New Roman', Times, serif;
color: white;
padding: 0.4em;
background-color: steelblue;
}
.rotativa {
margin: 20px auto;
width: 400px;
position: relative;
}
.intro-noticia {
border: 1px solid steelblue;
}
.intro-noticia img {
width:40%;
float:right;
}
.intro-noticia p {
padding: 0.4em;
}
.intro-noticia p:last-child {
text-align: right;
font-weight: bold;
}Con esa configuración de estilo ahora la página se ve así:
Luego, es el turno de empezar la “magia”. Para eso, hay que agregar las siguientes declaraciones de estilo:
.intro-noticia {
position: absolute;
opacity: 0;
animation: animacion 21s infinite;
}
@keyframes animacion {
25% {
opacity: 1;
z-index: 1;
}
50% {
opacity: 0;
z-index: 0;
}
}
.intro-noticia:nth-child(1) {
}
.intro-noticia:nth-child(2) {
animation-delay: 7s;
}
.intro-noticia:nth-child(3) {
animation-delay: 14s;
}
Entre las líneas 48 y 52, a la clase intro-noticia (que es la que lleva aplicada cada noticia que se muestra en la página html) se le define la opacidad en valor 0 (transparente) y se le aplica una animación de nombre animacion que dura 21 segundos y que se ejecuta en un bucle infinito.
Entre las líneas 54 y 65 se definen los “cuadros clave” de la animación: en el 25% la opacidad pasa a valor 1 (totalmente visible) y en el 50% vuelve a 0 (transparente). Además, en el 25 % se mueve la caja que tiene aplicada la clase intro-noticia a arriba de todo en el orden de apilamiento (z-index: 1;) y en el 50 % se la envía al fondo (z-index: 0;). Esto es para que los vínculos (etiquetas a) queden accesibles, porque sino quedan tapadas por la caja de más arriba (aunque esta sea transparente) y no se pueden pinchar.
Finalmente, entre las líneas 67 y 78 se establece un retraso en la ejecución de la animación de cada intro-noticia, para que no se superpongan y se muestren una tras otra.
Por cada noticia que haya en la página, hay que agregar una .intro-noticia:nth-child (X), donde «X» debe ser sustituido por el número de noticia.
El resultado de todo este código lo muestro en acción en el siguiente video:
Gracias!!
Funciona al 100!!!
Me alegra que te haya sido útil.