2

Estoy trabajando en Angular.js con 2 librerías, primero la de angular-smoothscroll y la de animated.css.

¿Cómo puedo mezclar estas dos?

Quiero que al bajar el scroll se anime una imagen. Las animaciones ya están definidas: son clases css, y sólo las tengo que poner en la imagen que se animara.

<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>

¿Ustedes qué sugieren?

4
  • ¿A que te refieres con, cuando haga scroll? ¿Que se anime por ejemplo cuando hagas scroll en la página 100px? Commented el 29 dic. 2016 a las 22:03
  • especifica que animacion quieres Commented el 29 dic. 2016 a las 22:11
  • cualquiera de daneden.github.io/animate.css Commented el 29 dic. 2016 a las 22:13
  • que se anime cuando baje a la seccion numero x salgo de ahi animacion, entro ahi animacion.... Commented el 29 dic. 2016 a las 22:13

4 respuestas 4

1

te dejo un ejemplo sencillo, pruébalo con el 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>

0

A lo que entiendo por tus comentarios buscas algo como wow.js:

http://mynameismatthieu.com/WOW/

Esta herramienta combina animate.css + este script para hacer que aparezcan los contenidos respecto al viewport animados.

Con este solo es poner las clases en tus contenidos e irán teniendo la animación respecto al viewport.

0

Si lo que intentas hacer es que al hacer scroll se anime algo pues lo que creo que harás es que cambie la clase. Por lo tanto podrías hacerlo así:

http://codepen.io/AlberPedraza/pen/GggwmM

0

Las respuestas de arriba son geniales, acá te dejo una herramienta al estilo Bootstrap que posee animaciones al escrollear: Uikit

Esto te va a facilitar el trabajo y le va a dar un estilo mas profesional.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.