Итак, я пытался следовать этому руководству 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>
Большой материал спасибо много. Но есть ли способ достичь того же, что и мой код выше? Основная причина в том, что с моим примером элементы внутри одного и того же div будут анимировать один за другим, не добавляя дополнительный атрибут индивидуально. Надеюсь, это имеет смысл. Спасибо;) – Tiago
вы можете использовать задержку для анимации css анимации один за другим в моем коде. –