滚动时触发动画答案

【问题标题】：Trigger animation when scrolling滚动时触发动画
【发布时间】：2020-01-31 01:12:43
【问题描述】：

有没有机会让我在本教程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>

【问题讨论】：

你能发布一些你试图让它工作的代码吗？
和教程中的完全一样。然后我尝试删除所有 imgs 并保留文本块，但它没有用。谢谢;)

标签： javascript html css animation css-transitions

【解决方案1】：

这看起来有点过于复杂了。试试这个，我用这个做了一些了不起的事情。他提供了样式表和滚动动画的基本 JS。

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

【讨论】：

完全没有问题。在我发现它后的几个月里，它加速了我所有的动画开发。如果您发现这对您的项目来说是成功的，请将我的答案标记为已回答！干杯
当然我会这样做没问题;)
其实我只是设法让它工作，但这并不是我想要的，因为我想要动画的每个元素都必须有不同的 ID。因此，例如，如果我想要两个从右到左滑动的元素都需要不同的 ID，否则它将无法工作。在我的示例中，您只需要一个 ID 来处理我需要的任意数量的元素。但不幸的是，它不适用于没有图像的元素 :( 但无论如何，非常感谢您尝试帮助我。
您能否发布一些代码示例，我仍然可以帮助您准确地完成您想要的工作。尝试对 2 个元素使用类而不是 ID 当您尝试在页面上调用两次 ID 时，JS 有点奇怪。或者在 JS 中，直接从该站点调用同一函数 2 ID 示例中的 2 个 ID $(window).scroll(function() { $('#animatedElement1, #animatedElement2').each (function(){ var imagePos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); if (imagePos
是的，该解决方案工作正常，但由于这是我正在创建的自定义主题，我需要让用户轻松自定义它。所以假设用户有 20 个具有相同动画的不同元素，因此用户必须在 JS 中调用它们 20 次，例如 animatedElement1、animatedElement2、animatedElement3 ... animatedElement20。在上面的示例中，用户甚至不需要更改 JS 中的任何内容。我的示例的唯一问题是它仅适用于包含图像的元素。无论如何，非常感谢。

【解决方案2】：

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

我设法让演示在 fiddle 中运行

需要注意的几点：

您可能需要使用如小提琴中所示的修改版本。 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');
        }
    });
});

【讨论】：