Buen día, estoy intentando implementar animaciones a elementos cuando se muestren en pantalla, pero no logro hacerlo, creo que el problema esta en el codigo JQuery que me encuentro usando, ya que al intentar añadir una clase al objeto no lo hace, pero si ejecuto cualquier otra cosa por ejemplo un alert
lo muestra, el codigo es el siguiente:
jQuery(document).ready(function ($) {
$('.darAnim').waypoint(
function(direction)
{
alert($(this).attr('id'));
$(this).toggleClass('main');
},
{offset: '70%',triggerOnce: true
});
});
Este es el código completo
<style>.darAnim{/*opacity:0;*/}.main {font-size: 120%;color: red;</style>
<h1 id="n1" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<h1 id="n2" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<h1 id="n3" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<h1 id="n4" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<h1 id="n5" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<h1 id="n6" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<h1 id="n7" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<h1 id="n8" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<h1 id="n9" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<h1 id="nn1" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<h1 id="nn2" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<h1 id="nn3" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<h1 id="nn4" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<h1 id="nn5" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<h1 id="nn6" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<h1 id="nn7" class="darAnim" style="margin-bottom: 300px;">Example</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript' src='https://github.com/imakewebthings/waypoints/blob/master/lib/jquery.waypoints.js'></script>
<script>
$(document).ready(function() {
$('.darAnim').waypoint(
function(direction) {
$(this).toggleClass('main');
}, {
offset: '70%',
triggerOnce: true
});
});
</script>