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 :
<!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">
...
Continua leyendo desde la fuenteRelated posts:
- Muro parecido a Facebook en PHP, MySQL y JQuery Saludos, es la primera vez que publíco algo, espero que...
- Animación de nubes con CSS3 En este tutorial haremos una animación sencilla de nubes con...
- Menú desplegable con HTML5 y CSS3 En este tutorial haremos un menu desplegable con HTML5 y...
- Animar barra de progreso en HTML5 y CSS3 En este tutorial veremos como hacer una barra de progreso...
- Manejar combos multi-niveles con Javascript a partir de un objeto JSON Buenas!, quería aportar hoy algo que hice hace algunos meses...
Related posts brought to you by Yet Another Related Posts Plugin.
Leave a Reply