Scrollorama, es un plugin para jQuery que nos permite realizar múltiples efectos que se disparan al momento de hacer scroll en nuestra página, permitiendo hacer desplazamiento en cualquier posición, rotaciones, variar opacidad, zoom, parallax, etc.
Hacer ejemplos de cada uno haría que el tutorial sea muy largo y aburrido de leer ya que con un solo ejemplo se entiende el uso completo del plugin, así que el ejemplo imitará el movimiento de los rombos de mejorando.la/conferencia.
Usar Scrollorama es ridículamente fácil! solo debemos incluir en una variable la clase de los objetos que queramos animar y luego podemos variar valores como el delay, duración, propiedad a usar, inicio y fin del efecto.
Pongamos manos a obra para que todo quede más claro:
Codigo HTML5
Código :
<!DOCTYPE HTML> <html lang="es"> <head> <meta charset="utf-8"/> <title>Scrolloama</title> <link rel="stylesheet" href="estilos.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jquery.scrollorama.js"></script> </head> <body> <section class="contenedor"> <section class="magia"> <div class="cajita1"> <p>opacidad</p> </div> <div class="cajita2"> <p>desplazamiento</p> </div> <div class="cajita3"> <p>opacidad y desplazamiento</p> </div> <div class="cajita4"> <p>opacidad y desplazamiento + delay</p> </div> <div class="cajita5"> <p>opacidad y desplazamiento + delay</p> </div> </section> </section> </body> </html>
Código javascript (jquery)
Código :
<script> $(document).on("ready", gogogo); function gogogo(){ var scrollorama = $.scrollorama({ blocks:'.magia' }); scrollorama.animate('.cajita1',{ duration: 300, property:'opacity', start:0,end:1}); scrollorama.animate('.cajita2',{ duration: 300, property:'right', start:-150}); scrollorama.animate('.cajita3',{ duration: 300, property:'opacity', start:0,end:1}); scrollorama.animate('.cajita3',{ duration: 300, property:'right', start:-150}); scrollorama.animate('.cajita4',{ delay:500, duration: 300, property:'opacity', start:0,end:1}); scrollorama.animate('.cajita4',{ delay:500, duration: 300, property:'right', start:-150}); scrollorama.animate('.cajita5',{ delay:900, duration: 300, property:'opacity', start:0,end:1}); scrollorama.animate('.cajita5',{ delay:900, duration: 300, property:'right', start:-150}); } </script>
Codigo CSS3
Código :
body{ background:#cecece; font-family:Verdana; } .contenedor{ background:gray; border:5px solid #efefef; margin:0 auto; height:2000px; width:800px; } .magia div{ background:maroon; border:10px solid rgba(255,255,255,.5); border-radius:30px; margin:70px 0 0 50px; height:200px; -webkit-transform:rotate(45deg); width:200px; } .magia div p{ color:white; -webkit-transform:rotate(-45deg); }
Ahora entendamos el código:
La parte de CSS3 no tiene nada de especial, sólo definimos la forma de las cajas y colores para que se vea bien, pero no aporta nada de funcionalidad al efecto, a excepción de dar un alto al .contenedor lo suficiente para que exista un scroll.
En la parte de HTML5 sí tenemos cosas importantes como la importación de la librería jquery y el plugin respectivamente y luego en el cuerpo del documento un section con la clase "contenedor" y dentro de este otro section con la clase "magia" (haciendo insection) y este section class="magia" es el encargado de que las cosas pasen. Luego tenemos 5 "cajitas" que son las que vamos a manipular.
El código javascript resaltado es el encargado de dar vida a nuestro efecto en este definimos en una variable la clase "magia" que englobara a los elementos manipulados por esa razon el nombre de dicha clase
Código :
var scrollorama = $.scrollorama({ blocks:'.magia' });
luego jugamos con los valores de (duracion, delay, propiedad, estadoInicial, estadoFinal)
por ejemplo la cajita1 no esta usando delay(es opcional)
Código :
scrollorama.animate('.cajita1',{ duration: 300, property:'opacity', start:0,end:1});
- el efecto tiene una duracion de 300px en vertical
- anima la propiedad opacity
- tiene un valor inicial de 0 y un valor final de 1 (la opacidad se mide de 0 a 1)
Mientras que las demás cajas van teniendo un delay para animarse en el momento adecuando causando una sorpresa muy bonita, también se ve que no solo se anima 1 sola propiedad, sino que usan 2 (pueden tener mas):
Código :
scrollorama.animate('.cajita4',{ delay:500, duration: 300, property:'opacity', start:0,end:1}); scrollorama.animate('.cajita4',{ delay:500, duration: 300, property:'right', start:-150});
Ahí se esta animando la opacidad y el desplazamiento respecto a la derecha y la animación sólo tiene un retraso de 500px.
Una cosa mas a destacar es que la animación de "right" no tiene un "end:", ¿que significa esto? pues que tomará como posición final a la posición que tenía por defecto la caja en el documento la cual podíamos manipular con css de igual manera se tomaria el "start:" de no especificarlo.
Los archivos finales con un par de agregados que en el tutorial no venian al caso estan en leonidasesteban.com
si llegaste a esta parte solo queda decirte que todas las preguntas, troleos, tomates, etc lo pueden hacer en @LeonidasEsteban o en este mismo hilo.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Kinduff el 03 de Febrero de 2012
Por egonzalez el 03 de Febrero de 2012
Por Odin el 03 de Febrero de 2012
Por LeonidasEsteban el 03 de Febrero de 2012
Por Mariux el 03 de Febrero de 2012
lysergtk :
estaba difícil el título!!
ge-nial tuto!!!!
Por LeonidasEsteban el 03 de Febrero de 2012
Mariux :
lysergtk :
estaba difícil el título!!
ge-nial tuto!!!!
Muuuuuchas gracias
es que el tuto se presta a tantas cosas que era confuso y me concentre en narrarlo.
Por alessandro15 el 04 de Febrero de 2012
Por dual3nigma el 04 de Febrero de 2012
Por #Null el 04 de Febrero de 2012
http://www.nikebetterworld.com/about
(lo mejor: las zapatillas flotantes)
Lástima que no funciona en ios, sería impresionante su funcionamiento en iPad.
Por WebMasterDiego el 04 de Febrero de 2012
Por pablo1416 el 04 de Febrero de 2012
Por Rafael el 05 de Febrero de 2012
Saludos
Por LeonidasEsteban el 06 de Febrero de 2012
Por Lord_war el 06 de Febrero de 2012
Por Sisco el 07 de Febrero de 2012
Por edderleonardo el 07 de Febrero de 2012
Por gcm el 08 de Febrero de 2012
inicons.com/
Otros dos ejemplos, para que se inspiren
Por LeonidasEsteban el 08 de Febrero de 2012
gcm :
inicons.com/
Otros dos ejemplos, para que se inspiren
wow, el sitio es tremendamente lag pero super cool
Por xpzion7 el 09 de Febrero de 2012
Por jordano_p el 10 de Febrero de 2012
El plugins se llama: jQuery Scroll Path, este plugins sirve para marcar una ruta que será recorrida por los elementos seleccionados al hacer scroll en el documento.
El plug-in también permite girar la página completa, con el uso de transformaciones CSS. Esto puede hacerse a lo largo de una ruta, o alrededor de la posición actual, utilizando los métodos jQuery moveTo, lineTo y arc.
Pueden ver una demo de su funcionamiento aquí
Para descargar los archivos fuentes aquí
Por clindy el 01 de Marzo de 2012
Por Rafeo el 16 de Agosto de 2012
Por Dan Ton el 19 de Junio de 2013
Podría alguien ayudarme en serio necesito este Script
Por Edu el 26 de Septiembre de 2013
Podrias hacer un tutorial así de bien explicado con Superscrollorama? (Hay muchos cambios a la hora de realizar los mismos efectos)
Muchas gracias por anticipado! Un saludo!
Por andy el 04 de Diciembre de 2013
Por Esneyder Amin el 21 de Enero de 2014
Por wimarbueno el 26 de Febrero de 2014
Saludos
Por LeonidasEsteban el 26 de Febrero de 2014
wimarbueno-blog :
Saludos
http://leonidasesteban.com/ejemplos/scrollorama/
Por Moises el 28 de Mayo de 2015