Sobre parallax y animaciones, unas cuantas dudas de novato

[Rafael]

Hum. Acá está el demo de ese tutorial:

http://miguelmanchego.com/samples/20...nimaciones.htm

Si ves el código fuente de la página notarás que necesitas simplemente 3 recursos:

Código HTML:

<link href="animate.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="waypoints.min.js"></script>
 

El animate y el waypoints están alojados en tu sitio y el Jquery jalado desde googleapis.

Y el código necesario para que funcione en lo que tu gustas. Son dos partes, el JavaScript que le indica al waypoints y los estilos a utilizar:

Código HTML:

<script type="text/javascript">
    jQuery(function($) { 
        $('h2').waypoint(function() {
            $(this).toggleClass( 'bounceIn animated' );
        },
        {
            offset: '70%',
            triggerOnce: true
        });
        
        $('li').waypoint(function() {
            $(this).toggleClass( 'fadeInLeft animated' );
        },
        {
            offset: '70%',
            triggerOnce: true
        });        
        
        $('img').waypoint(function() {
            $(this).toggleClass( 'rotateIn animated' );
        },
        {
            offset: '70%',
            triggerOnce: true
        });        
    });
    </script>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
        .container {
            width: 320px;
            margin: auto;
            font-size: 14px;
            color:#333;            
        }
        .container p, .container li{
            line-height: 24px;
        }
        .container li {
            padding-bottom: 10px;
            opacity: 0;
        }
        .container h2 {
            margin-top: 25px;
            opacity: 0;
        }
        h1 { font-size: 34px; }
        h2 { font-size: 28px; }
        img { opacity:0; }
    </style>
 

Eso está resumido en estas instrucciones:

Código HTML:

jQuery(function($) {
$('.elemento_deseo_animar').waypoint(function() {
$(this).toggleClass( 'bounceIn animated' );
},
{
offset: '70%',
triggerOnce: true
});
 
});
 

Pero aparte de eso debes dejar otros archivos como las licencias de animate y waypoints en tu sitio.