Animate an image when the scroll goes down

2

I'm working on Angular.js with 2 libraries, first the angular-smoothscroll and the animated.css.

How can I mix these two?

I want the image to be animated when I scroll down. The animations are already defined: they are css classes, and I only have to put them in the animated image.

<a href="" smooth-scroll target="eleccion" offset="10">
    <img src="../images/votaaqui.png" alt="" class="boton center-block">
</a>
<section id="eleccion" class="pag_home elec">

    <div class="elec_cel center-block">
        <a href="" ng-click="GoToEnero()"><img class="center-block img-responsive mes_vs ANIMACION1" src="../images/enerista_md.png"></a>
        <img class="vac center-block img-responsive" src="../images/estas_vacaciones.png" alt="">
        <a href="" ng-click="GoToFebrero()"><img class="center-block img-responsive mes_vs ANIMACION2" src="../images/febrerista_md.png" alt=""></a>

    </div> </section>

What do you suggest?

    
asked by Hernan Humaña 29.12.2016 в 22:43
source

4 answers

1

I leave you a simple example, try it with the scroll

$(document).ready(function() {
$('#animacion').hide(0);
		$(window).scroll(function(){
				var windowHeight = $(window).scrollTop();
				var cont2 = $("#div2").offset();

				cont2 = cont2.top;
				if(windowHeight >= cont2 ){
					
					$('#animacion').fadeIn(4500);
				}else{
					$('#animacion').fadeOut(3500);
				}
		});
});
	#div1, #div2{
		text-align: justify;
	}

	#animacion {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* Standard syntax */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <h1>Bj penn </h1>
    Aunque esta lejos de su mejor momento, el legendario BJ Penn se cree con la capacidad de conseguir el título de la división pluma.
Después de disfrutar de 18 meses en el retiro, finalmente BJ Penn hará su anticipado regreso este próximo 15 de enero cuando se enfrente a Yaír Rodriguez en el evento de Phoenix, Arizona.
    
	</div>


 <div id="animacion"><h2> animando</h2></div>		


	<div id="div2">
	  <h1>UFC</h1>
Aunque esta lejos de su mejor momento, el legendario BJ Penn se cree con la capacidad de conseguir el título de la división pluma.
Después de disfrutar de 18 meses en el retiro, finalmente BJ Penn hará su anticipado regreso este próximo 15 de enero cuando se enfrente a Yaír Rodriguez en el evento de Phoenix, Arizona.

Sorpresivamente la ambición de Penn continua intacta, ya que se siente muy confiado de poder conseguir un tercer cinturón en la división pluma. Esto es lo que comentó durante su entrevista en el podcast de ESPN:


BJ Penn: “Hay más oportunidad para mi que consiga un tercer cinturón del UFC en las 145 libras, mucha más que si subo a las 185 libras. Ya me siento muy confiado de que nadie será capaz de conseguir el cinturón de las 155 libras y las 170 libras. Quiero conseguir otro título mundial. Tres títulos en tres distintas divisiones, sin dudas las 145 libras es mi mejor opción.”
“Planeo hacer lucir fácil mi victoria del 15 de enero, soy el jodido hombre, esta no es una pelea difícil para nada. Él (Yaír) es un tipo muy bueno, pero siento que estoy entrenando con gente muy buena. Tengo a un gran equipo a mi al rededor, no siento que nada este fuera de mi liga.”
El combate entre Penn y Rodriguez encabezará el evento UFC Fight Night 103 en la ciudad de Phoenix, Arizona

	</div>
    
answered by 30.12.2016 в 01:41
0

To what I understand from your comments you are looking for something like wow.js :

link

This tool combines animate.css + this script to make the content appear with respect to the animated viewport.

With this alone is to put the classes in your content and will have the animation regarding the viewport.

    
answered by 29.12.2016 в 23:25
0

If what you are trying to do is that when doing scroll something is encouraged then what I think you will do is change the class. So you could do it like this:

link

    
answered by 29.12.2016 в 23:51
0

The answers above are great, here I leave you a tool Bootstrap style that has animations when scrolling: Uikit

This will make your job easier and it will give you a more professional style.

    
answered by 30.12.2016 в 18:54