Esperaba me puedan ayudar estoy rehaciendo una web y la idea es hacer animaciones mientras
se desplaza la página hacia abajo. Las animaciones funcionan barbaro a medida voy bajando.
El problema tengo es que al ponerle a los elementos animados opacity:0 para que no se vean hasta que apararezca la animacion lo que hace es dejar ese elemento en opacity 0 por lo que hace la animación y luego desaparece.
la web es: http://www.ehoscreativo.com/demo/index.html
como veran el textoresenia aparece y luego desaparece.
Les dejo la funcion javascript
<script type="text/javascript">
jQuery(function($) {
$('nav li').waypoint(function() {
$(this).toggleClass( 'bounceInDown animated' );
},
{
offset: '100%',
triggerOnce: true
});
$('#titulo img').waypoint(function() {
$(this).toggleClass( 'tada animated' );
},
{
offset: '10%',
triggerOnce: true
});
$('#textoresenia').waypoint(function() {
$(this).toggleClass( 'zoomIn animated' );
},
{
offset: '50%',
triggerOnce: true
});
$('#lagaleria').waypoint(function() {
$(this).toggleClass( 'slideInLeft animated' );
},
{
offset: '60%',
triggerOnce: true
});
$('#lagaleria li').waypoint(function() {
$(this).toggleClass( 'bounceInRight animated' );
},
{
offset: '60%',
triggerOnce: true
});
$('.imgservicios').waypoint(function() {
$(this).toggleClass( 'rubberBand animated' );
},
{
offset: '60%',
triggerOnce: true
});
});
</script>
Espero me puedan dar una mano
Saludos
