Efectos CSS 3 al scroll 15.4.12
Efectos CSS 3 al scroll
Origen img: WikipediaVía twitter me llega el enlace a la realización de Hakim El Hattab (aka @hakimel) de diversos efectos aplicados a las listas (ul) en el momento de hacer scroll sobre ellas, en la forma como sus items, /li/, se muestran o se ocultan.
Pese a que utiliza algo de js, sólo es para invertir el sentido del efecto (aplicar una clase u otra) si el item aparece o desaparece en la parte inferior o en la superior de la caja del /ul/.
Echa un vistazo y 'escrolea" las listas. Yo me quedo con la 'Fan' y 'Zipper'. Y quizás añadiría algo más de delay a alguna otra.
¿Miramos un poco su Css?
El html es una símple lista /ul/ con sus items /li/. A los /li/ según aparecen o desaparecen en la parte visible de la caja de /ul/ aplica una u otra clase. Sólo es en esta asignación dinámica de la clase donde hace uso de javascript:
<ul class="fan">
<li class="past">Five</li>
<li class="past">Six</li>
<li class="past">Seven</li>
<li class="">Eight</li>
<li class="">Nine</li>
<li class="">Ten</li>
<li class="future">Eleven</li>
<li class="future">Twelve</li>
<li class="future">Thirteen</li>
</ul>
Y para lograr el efecto deseado al "scrolear" hace uso de la propiedad transition y transform de Css. Tal que así:
/** Fan styles **/
.fan li {
transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
transform-origin: 0% 0%;
}
.fan li.past {
transform: rotate( -60deg );
}
.fan li.future {
transform: rotate( 70deg );
}
Y eso es todo. Bueno, ese Css con el añadido de todos y cada uno de los cuatro prefijos privativos.
Bonus curiositi:
Fíjate en el efecto cebra de los li´s. Para lograrlo de una forma sencilla y sin liar el Css simplemente declara un color de fondo para todos los /li/ y para diferenciar los impares en vez de un valor numérico para los pseudoelementos utiliza el valor de texto impar li::nth-child(Odd) que equivale a li::nth-child(2n+1). Su complementario, elementos pares, es li::nth-child(Even), equivale a la expresión li::nth-child(2n+1)
Créditos y Enlaces al original
Resultado final: scroll-effects en la página del autor.
@hakimel en twitter.
Los archivos en github
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
esta genial tu blog, enemigo de foros del web ;-) , lo voy a dejar en marcadores. :)
ResponderEliminarquise decir "mi enemigo de foros del web", lo digo para que no se mal entienda xD
EliminarPues bien poquito necesita para etiquetar :-)
EliminarMe alegra que le pueda ser de utilidad algo de estas cosillas.
Un saludo