Затухание затвора на элемент

Question

бит удара в темноте этот!

Я искал везде, чтобы попытаться найти что-то, чтобы воспроизвести эффект нагрузки на этом хорошем сайте http://www.alectia.com/

Этого сайт не работает, если JS отключен - так не ищу точную копию :-)

Есть много эффектов затухания (анимация css и т. Д.) И некоторые приятные onload в CoDrops - но все они влияют на все элементы одновременно - кто-нибудь знает библиотеку/способ анимации элементов последовательно, чтобы они загрузить в качестве сайта выше?

Заранее спасибо .ben.

Answer 1

Некоторые ссылки, которые вам нужны Transformations AND CSS CHEAT SHEET. Оба отлично подходят для работы, если вы хотите уклониться от подхода JS. ОДНАКО. JS и css annimations хорошо сочетаются, если вы хотите, чтобы это координировалось. Так что вы немного скомпрометированы. В принципе, у вас есть свои анкеты css в вашем файле css и вызывают его при загрузке страницы или когда вы хотите ее оживить. В ссылке шпаргалки они демонстрируют это, но здесь это в любом случае

$(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 не работает так велик (помните поддержку браузера может стать любым укомплектовываетом nighmare) является загляните в анимацию 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.. 
)} 
}; 

в основном получают все дивы на странице и сделать их анимировать.