Поочередная загрузка элементов

Делаем различными способами эффект поочередного появления элементов.

jQuery (show + :eq + next)

Постепенное появление элементов .block, изначально у этого класса в CSS должно быть прописано display:none

$(document).ready(function() { 
  $(".block:eq(0)").show("fast", function () {
    $(this).next().show("slow", arguments.callee);
  });
});

Другой вариант, изначально у класса .block в CSS должно быть прописано display:none

$(function() {
      $('.block').each(function(i) {
    $(this).delay((i++) * 250).fadeTo(500, 1); })
});

Поочередная загрузка для элементов лэндинга

#ef N — ID родителя
.row — класс на который распространяется эффект
eq(0), eq(1), eq(2)… — порядковый элемент .row

$(document).ready(function(){

$('#ef1 .row, #ef2 .row, #ef3 .row, #ef4 .row').css({visibility:"hidden"});

 var h = $(window).height();
 $(window).scroll(function(){

 if ( ($(this).scrollTop()+h) >= $("#ef1").offset().top) {
 $("#ef1 .row").css({visibility:"visible"});
 $("#ef1 .row").addClass('animated fadeInUp');
 } 

 if ( ($(this).scrollTop()+h) >= $("#ef2").offset().top) {
 $("#ef2 .row").css({visibility:"visible"});
 $("#ef2 .row").addClass('animated fadeInLeft');
 } 

 if ( ($(this).scrollTop()+h) >= $("#ef3").offset().top) {
 $("#ef3 .row").css({visibility:"visible"});
 $("#ef3 .row").eq(0).addClass('animated fadeInRight');
 $("#ef3 .row").eq(1).addClass('animated fadeInLeft');
 $("#ef3 .row").eq(2).addClass('animated fadeInDown');
 } 

 if ( ($(this).scrollTop()+h) >= $("#ef4").offset().top) {
 $("#ef4 .row").css({visibility:"visible"});
 $("#ef4 .row").addClass('animated fadeInUp');
 } 


 if ( $(this).scrollTop() == 0 ) {
 $("#ef1 .row, #ef2 .row, #ef3 .row, #ef4 .row").each(function(){
 if ( $(this).hasClass('last') ) {
 $(this).removeClass().addClass("row last");
 } else {
 $(this).removeClass().addClass("row");
 }
 $(this).css({visibility:"hidden"});

 });
 }


 });
});

Пример работы скрипта

показать

убрать

меню

Animate

Делаем появление элементов при прокрутке

jQuery(document).ready(function($) {
	
    width = $(window).width();
    if (width <= 480) {
	var $offset = 100;
    } else {
	var $offset = 200;
    }

	// features
	jQuery("#features .item").addClass('hidden').viewportChecker({
		classToAdd: 'animate__animated animate__fadeIn',
		offset: $offset
	});
});

И добавляем элементам стили (в зависимости от количества и от ряда):

.hidden {opacity: 0;}

#features .item:nth-child(1) {animation-delay: .25s;}
#features .item:nth-child(2) {animation-delay: .5s;}
#features .item:nth-child(3) {animation-delay: .25s;}
#features .item:nth-child(4) {animation-delay: .5s;}
#features .item:nth-child(5) {animation-delay: .25s;}
#features .item:nth-child(6) {animation-delay: .5s;}

Поделиться в соц. сетях: