Эффект срабатывающий при скролле страницы

Делаем анимацию при прокрутке страницы

В общем задача - докрчиваем до определенного места на странице и хотим, чтобы там произошло какое либо действие

Что нам для этого потребуется:

• скрипт который будет запускать это действие на странице
• какая нибудь библиотека с уже готовыми анимационными эффектами, либо будем использовать свои стили, не принципиально, в примере применим готовую библиотеку animate.css
• jquery 1.11 и старше для работы скрипта

Подключаем скрипт и бибилиотеку animate.css:

Ссылка скачать архив с скриптом и animate.css

Теперь как выглядит структура наших объектов которые будут появляться:

	

	
		
 тут помещаем контент на который будет срабатывать скрипт 
		
 тут помещаем контент на который будет срабатывать скрипт 
		...
		
 тут помещаем контент на который будет срабатывать скрипт 
		
	

Соответственно видим, что скрипт срабатывает у нас на класс .post, но об этом чуть ниже в примере будет

Сейчас создаем пару классов, с которыми будет работать наш скрипт, к примеру пока не докрутили до нужного объекта он у нас будет скрыт и у него будет один класс, после того как докрутили скрипт будет присваивать ему второй класс, который к примеру покажет нам этот блок либо просто наложит какой то другой стиль, либо будем использовать эффект из библиотеки

	.hidden{
	opacity:0;
	}
	.visible{
	opacity:1;
	}

Подключаем сам скрипт, напоминаю работает на jquery

	jQuery(document).ready(function() {
	jQuery('.post').addClass("hidden").viewportChecker({
	classToAdd: 'visible animated fadeIn',
	offset: 100
	});
	});

Пояснение как работает скрипт - для блока с классом .post , как только долистаем но него на странице, присваиваем классы - visible(мы его задали самостоятельно, чтобы блок появился) animated fadeIn(эти два класса от библиотеки animate.css)

http://daneden.github.io/animate.css/ - вот тут можно взять саму библиотеку animate.css + посмотреть как будут работать отдельные эффекты

На этом всё, вроде бы всё тут просто. Захочется сделать не для класса .post - просто описываем новый класс в скрипте и пользуемся.

Ссылка скачать архив с скриптом и animate.css