0

I'm hoping someone can help. I'm trying to get some animation on scroll working with a jQuery script I found. I think I've managed to get it to read $ and jQuery as Wordpress runs in NoConflict mode, but so far I am unable to get the script to do anything.

Here is the JS:

   jQuery(document).ready(function($) {
$(function() {

  var $window           = $(window),
      win_height_padded = $window.height() * 1.1,
      isTouch           = Modernizr.touch;

  if (isTouch) { $('.revealOnScroll').addClass('.animated'); }

  $window.on('scroll', revealOnScroll);

  function revealOnScroll() {
    var scrolled = $window.scrollTop(),
        win_height_padded = $window.height() * 1.1;

    // Showed...
    $(".revealOnScroll:not(.animated)").each(function () {
      var $this     = $(this),
          offsetTop = $this.offset().top;

      if (scrolled + win_height_padded > offsetTop) {
        if ($this.data('timeout')) {
          window.setTimeout(function(){
            $this.addClass('.animated ' + $this.data('animation'));
          }, parseInt($this.data('timeout'),10));
        } else {
          $this.addClass('.animated ' + $this.data('animation'));
        }
      }
    });
    // Hidden...
   $(".revealOnScroll.animated").each(function (index) {
      var $this     = $(this),
          offsetTop = $this.offset().top;
      if (scrolled + win_height_padded < offsetTop) {
        $(this).removeClass('.animated .fadeInUp .flipInX .lightSpeedIn')
      }
    });
  }

  revealOnScroll();
});

        });

I'm not great with jQuery, but any pointer would be great. I'm pretty sure the problem lies within the script and no classes are added or removed.

  • what is written in the console ? – mmm Mar 26 '16 at 11:21
0

You have initialized the script twice. Here is the updated script:

jQuery(document).ready(function($) {
var $window           = $(window),
win_height_padded = $window.height() * 1.1,
isTouch           = Modernizr.touch;

if (isTouch) { $('.revealOnScroll').addClass('.animated'); }

$window.on('scroll', revealOnScroll);

function revealOnScroll() {
    var scrolled = $window.scrollTop(),
    win_height_padded = $window.height() * 1.1;

    // Showed...
    $(".revealOnScroll:not(.animated)").each(function () {
        var $this     = $(this),
        offsetTop = $this.offset().top;

        if (scrolled + win_height_padded > offsetTop) {
            if ($this.data('timeout')) {
                window.setTimeout(function(){
                    $this.addClass('.animated ' + $this.data('animation'));
                }, parseInt($this.data('timeout'),10));
            } else {
                $this.addClass('.animated ' + $this.data('animation'));
            }
        }
    });
   // Hidden...
   $(".revealOnScroll.animated").each(function (index) {
       var $this     = $(this),
       offsetTop = $this.offset().top;
       if (scrolled + win_height_padded < offsetTop) {
           $(this).removeClass('.animated .fadeInUp .flipInX .lightSpeedIn')
       }
   });
}

revealOnScroll();
});

UPDATE: This script is not working because you have used jQuery script inside Javascript which won't work. You need to use either javascript or jQuery.

revealOnScroll() is a javascript function while .each used inside this function is a jQuery function. Please be clear whether you want to use jQuery or javascript.

UPDATE 1:

Add this script after jquery.js which you have missed.

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>

Hope this helps!

  • Thanks Mehul Gohil, Ive just tried adding this and it doesnt seem to make a difference. Here is the link dev.silverfx.co.uk if you dont mind taking a look for me. Thank you – blackhill24 Mar 26 '16 at 12:24
  • @Jonnygogo: I have added an update to my answer at the end. Please check. Thanks – Mehul Gohil Mar 26 '16 at 13:23
  • I copied the code straight from here, codepen.io/benske/pen/yJoqz I didnt think i had made any changes and it works fine here? – blackhill24 Mar 26 '16 at 14:35
  • @Jonnygogo: Check UPDATE 1 in the answer – Mehul Gohil Mar 26 '16 at 14:48
  • Perfect @Mehul Gohil, i was convinced this was included already but clearly my mistake, thanks very much for you help! – blackhill24 Mar 26 '16 at 16:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.