Эффект срабатывающий при скролле страницы
Делаем анимацию при прокрутке страницы
В общем задача - докрчиваем до определенного места на странице и хотим, чтобы там произошло какое либо действие
Что нам для этого потребуется:
- скрипт который будет запускать это действие на странице
- какая нибудь библиотека с уже готовыми анимационными эффектами, либо будем использовать свои стили, не принципиально, в примере применим готовую библиотеку 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