1

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>

2
  • Qué versión de Waypoint y jQuery estás usando?
    – Kleith
    el 4 abr. 2018 a las 22:28
  • Qué es lo que querés que haga tu función? Ya sé que es lo que está fallando.
    – Kleith
    el 4 abr. 2018 a las 22:36

2 respuestas 2

1

Yo utilizo la librería waypoints en combinación con la librería animate.css en el elemento que quieras realizar la animación pon la clase css animated y fadeInUp (Hay muchas más puedes buscar en la pagina de animate.css) Suerte.

$('.animated').waypoint(function () {
    $(this).addClass('animated-active');
}, {offset: '100%',
    triggerOnce: true});
.circle{
height:100px;
width:100px;
background-color:blue;
border-radius:50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>

<div class="circle animated fadeInUp"></div>
<div class="circle animated fadeInLeft"></div>

2
  • Lo intente probar pero me salio un error que dice: el 4 abr. 2018 a las 22:51
  • Uncaught TypeError: $(...).waypoint is not a function at HTMLDocument.<anonymous> el 4 abr. 2018 a las 22:52
1

Está fallando porque al incluir la librería de waypoint estás pegando la URL de github con la vista y no al archivo javascript. Te recomiendo en esos casos usar CDNs, este es el de waypoint: https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js y porque estás pasando dentro de la función de .ready(function($)) el signo $ entonces sobre escribe el jQuery.
Lo otro es que el $(this) está tomando como dentro de la función y no del elemento darAnim, entonces deberías agregarlo a una variable y luego llamarlo.

Debería quedar:

$(document).ready(function() {
  var darAnim = $('.darAnim');
  darAnim.waypoint(
    function(direction) {
      alert(darAnim.attr('id'));
      darAnim.toggleClass('main');
    }, {
      offset: '70%',
      triggerOnce: true
    });
});
.darAnim{
  /*opacity:0;*/
}
.main {
  font-size: 120%;
  color: red;
}
<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 type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js'></script>

10
  • 1. SI esta incluida la librería el 4 abr. 2018 a las 22:15
  • 2. No entiendo lo que quieres decir el 4 abr. 2018 a las 22:16
  • @josemarquez podés usar la variable jQuery o $, eso no debería traer problemas, lo que no entiendo es porqué hiciste lo siguiente jQuery(document).ready(function($) {, ese $ dentro del function es probable que sea el causante del error.
    – Kleith
    el 4 abr. 2018 a las 22:18
  • Entonces lo quito? el 4 abr. 2018 a las 22:18
  • 1
    Acabo de compartir el codigo completo, el script del waypoint no se si funcione insertandola así, yo la tengo descargada el 4 abr. 2018 a las 22:28

Tu Respuesta

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

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