SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    multiple "scrollpoints" ?

    So i have some keyframe css animation that i want to start at different scollpoints. I have a js script but i don't know how to add more then one point.

    Code HTML4Strict:
    <div class="icon-wrapper"></div>
     
    <div class="icon-wrapper2"></div>

    Code JavaScript:
    function isElementInViewport(elem) {
        var $elem = $(elem);
     
        // Get the scroll position of the page.
        var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
        var viewportTop = $(scrollElem).scrollTop();
        var viewportBottom = viewportTop + $(window).height();
     
        // Get the position of the element on the page.
        var elemTop = Math.round( $elem.offset().top );
        var elemBottom = elemTop + $elem.height();
     
        return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
    }
     
    // Check if it's time to start the animation.
    function checkAnimation() {
        var $elem = $('.icon-wrapper');
     
        // If the animation has already been started
        if ($elem.hasClass('start')) return;
     
        if (isElementInViewport($elem)) {
            // Start the animation
            $elem.addClass('start');
        }
    }
     
    // Capture scroll events
    $(window).scroll(function(){
        checkAnimation();
    });

    at the moment the first animation works, it starts at the right scollpoint. But how do I add the second one?

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You can simply use something like the below.

    Code JavaScript:
    function checkAnimation() {
        $('.icon-wrapper, .icon-wrapper2').each(function() {
            if (!$(this).hasClass('start') && isElementInViewport(this)) {
                $(this).addClass('start');
            }
        });
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •