滚动时触发动画

Question

是否有可能使我在本教程http://www.netmagazine.com/tutorials/getting-animations-trigger-right-time中看到的这些动画适用于没有图像的元素（例如，一行文本块）？一切正常，但是一旦删除图像，效果就会停止。不知道我是否说清楚了。谢谢！

< script >
if (Modernizr.csstransitions) {
    function preloadImages(imgs, callback) {
        var cache = [],
            imgsTotal = imgs.length,
            imgsLoaded = 0;

        $(imgs).each(function (i, img) {
            var cacheImage = document.createElement('img');
            cacheImage.onload = function () {
                if (++imgsLoaded == imgsTotal) callback();
            };
            cacheImage.src = $(img).attr('src');
            cache.push(cacheImage);
        });
    };
    $.fn.trans = function () {
        var t = arguments[0],
            d = arguments[1] || '';
        if (t) {
            $.each(this, function (i, e) {
                $(['-webkit-', '-moz-', '-o-', '-ms-', '']).each(function (i, p) {
                    $(e).css(p + 'transition' + d, t);
                });
            });
        }
    };

    document.write('<link rel="stylesheet" href="animations.css" />');

    $(function () {
        //preload images contained within elements that need to animate
        preloadImages($('.services img, .featured img'), function () {
            $('.services, .featured').appear({
                once: true,
                forEachVisible: function (i, e) {
                    $(e).data('delay', i);
                },
                appear: function () {
                    var delay = 150,
                        stagger = 800,
                        sequential_delay = stagger * parseInt($(this).data('delay')) || 0;

                    $(this).children().each(function (i, e) {
                        $(e).trans(i * delay + sequential_delay + 'ms', '-delay');
                    });
                    $(this).removeClass('animationBegin');
                }
            });
        });
    });
} < /script>

Answer 1

似乎文章和working demo并不完全同步。

我设法使演示在fiddle中运行

注意事项：

• 您may需要使用小提琴中出现的修改版本。 Located here
• jQuery Appear具有必须依赖于$(window).load的某些逻辑，因此初始化逻辑必须在就绪处理程序或触发器load之外运行。
• [演示的加载动画是在所有待处理的图像完成预加载时触发的

使用直接从原始演示中复制的代码并初始化就绪块外的所有内容，使其在没有图像的情况下正常工作基本上是摆脱预加载回调的问题：

Demo Fiddle

代码：

$(function () {
    $('.services, .featured').appear({
        once: true,
        forEachVisible: function (i, e) {
            console.log('adding delay: ' + i);
            $(e).data('delay', i);
        },
        appear: function () {
            var delay = 150,
                stagger = 800,
                sequential_delay = stagger * parseInt($(this).data('delay'), 10) || 0;

            $(this).children().each(function (i, e) {
                $(e).trans(i * delay + sequential_delay + 'ms', '-delay');
            });
            $(this).removeClass('animationBegin');
        }
    });
});

Answer 2

这似乎使事情变得过于复杂。试试这个，我已经做了一些很棒的事情。他提供了样式表和用于滚动动画的基本JS。

http://www.justinaguilar.com/animations/scrolling.html

Answer 3

您的window.load初始化有一些问题，我想您应该联系这些人Located here，他们肯定会为您提供帮助的]