Оживлять изображение, когда scroll загрузится

Я работаю в Angular.js с 2 книжными магазинами, сначала книжный магазин углового - smoothscroll и книжный магазин animated.css.

Как я могу перемешивать эти два?

Я хочу, чтобы, загрузив scroll, оживилось изображение. Оживление уже определено: это классы css, и только я должен помещать их в изображение, которое оживлялось.

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

Вы, что они предлагают?

2
задан 30.12.2016, 16:47
0 ответов

я оставляю тебе простой пример, протестируй это с 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>
1
ответ дан 03.12.2019, 17:56

В которое я понимаю под твоими комментариями поиски что-то как wow.js:

http://mynameismatthieu.com/WOW/

Этот инструмент сочетает animate.css + этот рукописный шрифт, чтобы способствовать тому, чтобы появились контенты относительно viewport, оживленный.

С одиноким он состоит в том, чтобы помещать классы в твои контенты и у них будет оживление относительно viewport.

0
ответ дан 03.12.2019, 17:56

Если то, что ты пробуешь сделать, состоит, в том, чтобы сделав scroll, оживили немного, итак, что я думаю, что ты сделаешь, это потому, что он изменил класс. Следовательно ты мог бы делать это так:

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

0
ответ дан 03.12.2019, 17:56

Ответы наверху гениальны, здесь я оставляю тебе инструмент в стиль Bootstrap, который обладает оживлением в escrollear: Uikit

Это будет облегчать тебе работу и будет давать ему более профессиональный стиль.

0
ответ дан 03.12.2019, 17:56