Animación al hacer scroll con Scrollorama.js: 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 javascript (jquery)
Codigo CSS3
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
luego jugamos con los valores de (duracion, delay, propiedad, estadoInicial, estadoFinal)
por ejemplo la cajita1 no esta usando delay(es opcional)
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):
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.
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.
Comentaris
Publica un comentari a l'entrada