Question

这个黑暗中有点刺伤！

我一直在寻找各处试图找到一些东西来复制这个好网站上的负载效果 http://www.alectia.com/

如果关闭JS，此站点将失败 - 因此我不寻找精确的副本： - ）

有大量的淡入效果（动画css等）和CoDrops中的一些很好的onload - 但它们同时影响所有元素 - 有没有人知道一个库/方式来顺序动画项目，所以他们加载为上面的网站？

提前致谢 .ben。

Answer 1

您需要的一些链接Transformations 和CSS CHEAT SHEET。如果你想避开JS方法，两者都很适合。然而。如果你想要协调它，JS和css的动画很好地结合在一起。所以你有点妥协。基本上，您在css文件中有css annimations并在页面加载时或在想要为其设置动画时调用它。在备忘单链接中，他们展示了它，但无论如何

$(window).scroll(function() {
    $('#animatedElement').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+400) {
            $(this).addClass("slideUp");
        }
    });
});
//This handles annimations over scrolling
$('#animatedElement').click(function() {
    $(this).addClass("slideUp");
});//This handles annimations on click
And finally 
$(document).ready(function(){
$(this).addClass("slideUp");
});//page load. :)

如果css没有那么好（记住浏览器支持可以成为任何男人的话），你还可以研究一下，看看JS动画。这是一个链接。 JQuery annimations

对于你的实际问题。让所有元素同时具有动画效果

function AnimateEverything(){
var AllElements = document.getElementsByTagName('div');
for(var i =0; i < AllElements.length; i++){
$(AllElements[i].addClass('cssAnimationClass');//I would suggest this one.
//or..
$(AllElements[i].annimate(//annimation of choice..
)}
};

基本上获取页面中的所有div并使它们具有动画效果。

淡化每个元素的延迟效果

1 个答案: