Efectos CSS 3 al scroll

Efectos CSS 3 al scroll

Por Kseso ✎ 3

Imagen ilustrativa artículo efectos scrollOrigen 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

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 Don Kseso Kseso

Comentarios: 3

  1. esta genial tu blog, enemigo de foros del web ;-) , lo voy a dejar en marcadores. :)

    ResponderEliminar
    Respuestas
    1. quise decir "mi enemigo de foros del web", lo digo para que no se mal entienda xD

      Eliminar
    2. Pues bien poquito necesita para etiquetar :-)

      Me alegra que le pueda ser de utilidad algo de estas cosillas.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap