Waypoints and Animations in HTML with JQuery and CSS

Navigation
1

Good morning, I am trying to implement animations to elements when they are shown on the screen, but I can not do it, I think the problem is in the JQuery code that I am using, since when trying to add a class to the object it does not, but if I execute anything else for example a alert shows it, the code is as follows: 

jQuery(document).ready(function ($) {
$('.darAnim').waypoint(
    function(direction)
    {
      alert($(this).attr('id'));
      $(this).toggleClass('main');
      },
      {offset: '70%',triggerOnce: true
    });
});

This is the complete code 

<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>
    
asked by jose marquez 04.04.2018 в 23:39
source

2 answers

1

I use the waypoints library in combination with the library animate.css in the element that you want to make the animation put the class css animated and fadeInUp (There are many more you can look in the page of animate.css) Good luck. 

$('.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>
    
answered by 05.04.2018 / 00:40
source
1

It is failing because by including the waypoint library you are pasting the github URL with the view and not the javascript file. I recommend in those cases to use CDNs, this is the waypoint: https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js and because you are passing within the function of .ready(function($)) the sign $ then over write the jQuery.
The other thing is that the $(this) is taking as inside the function and not the element darAnim , then you should add it to a variable and then call it.

It should be: 

$(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>
    
answered by 05.04.2018 в 00:13
Manipulate text shown by input file multiple [closed] Driver in ANgularJS