work@lienusowl.ru

Полное портфолио: zsws.ru

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

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

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

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

Подключаем скрипт и бибилиотеку 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