Question

我正在使用Skrollr.js。当我从上到下滚动时，我有这个动画：

 <div
    class="flight-icon-d __d"
    data-anchor-target=".section.__flight"
    data-top-top="top: 126px; transform: translateX(-50%) rotate(-135deg) scale(0.35);"
    data--50-top="transform: translateX(-50%) rotate(0deg) scale(0.35);"
    data--150-top="top: 425px; transform: translateX(-50%) rotate(0deg) scale(1);"
    data--550-top="top: 745px; transform: translateX(-50%) rotate(0deg) scale(1);"
    data--780-top="top: 980px; transform: translateX(-50%) rotate(0deg) scale(0.35);"></div>

所以当我向上滚动时，我的动画会向后移动。如何在向上滚动时更改动画？

Answer 1

你可以在js下使用animate.css。

JS

 /* Check Which Section Visible on screen*/
    $(document).ready(function() {
        var $animation_elements = $('.animate-box');
        var $window = $(window);    
        function check_if_in_view() {
            var window_height = $window.height();
            var window_top_position = $window.scrollTop();
            var window_bottom_position = (window_top_position + window_height);

            $.each($animation_elements, function() {
                var $element = $(this);
                var element_height = $element.outerHeight();
                var element_top_position = $element.offset().top;
                var element_bottom_position = (element_top_position + element_height);

                //check to see if this current container is within viewport
                if ((element_bottom_position > window_top_position) &&
                    (element_top_position < window_bottom_position)) {
                    $element.addClass('in-view');                
                    var cls = ".in-view .animated";
                    $(cls).each(function() {
                        var animationName = $(this).attr("animate");                    
                        if (animationName !== undefined) {
                            /* Chrome & Safari */
                            $(this).css('-webkit-animation-duration', $(this).attr("duration"));
                            /*Mozila*/
                            $(this).css('-moz-animation-duration', $(this).attr("duration"));
                            /*Opera*/
                            $(this).css('-o-animation-duration', $(this).attr("duration"));
                            /* Chrome & Safari */
                            $(this).css('-webkit-animation-delay', $(this).attr("delay"));
                            /*Mozila*/
                            $(this).css('-moz-animation-delay', $(this).attr("delay"));
                            /*Opera*/
                            $(this).css('-o-animation-delay', $(this).attr("delay"));
                            var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
                            $(this).addClass(animationName).one(animationEnd, function() {
                                $(this).removeClass('animated ' + animationName)
                            });
                        }
                    });
                } else {
                    $element.removeClass('in-view');
                }
            });
        }
        $window.on('scroll resize', check_if_in_view);
        $window.trigger('scroll');
    });

HTML CODE：

<section id="section2" class="bg bg-2 animate-box">                 
                <div class="box animated" animate="fadeIn" duration="2s" delay="1s" > ... </div>
</section>

DEMO网址

http://plugins.auratechmind.net/scrolltoanimate

向上滚动时，Skrollr.js启动另一个动画

1 个答案: