Добрый вечер уважаемые читатели, подписчики и все кто нас помнит!) Прошло полгода, как мы сделали большой перерыв и теперь с новыми силами готовы радовать Вас очередными выпусками уроков по веб программированию. Честно сказать, сам не ожидал, что так все затянется, но вот так вот получилось. Начнем прежде всего с того, что под Новый Год, я поздравляя Вас, сказал о наших планах на будущее, поэтому потихоньку будет их выполнять. А сегодня хочу порадовать Вас своим юбилейным 100-ым уроком!) Желаю удачи!
И так, сегодня у нас первый урок после длительнного отсутствия и первый урок в Новом 2017 году. Тему решил выбрать очень интересную прежде всего для тех, кто постоянно разрабатывает посадочные страницы или по другому как их называют, - Landing Page. Наверно, многие замечали, что на сайтах некоторые элементы при сколлинге страницы, начинают вести себя по-разному, то сверху надпись вниз опуститься, то влево уйдет, так вот, как сделать анимацию при прокрутке страницы мы с Вами в данном уроке и разберем!
Прежде всего хочу познакомить Вас с одной WOW библиотекой, которую Вы можете посмотреть, а затем скачать на GitHub.
Она позволяет, именно при прокрутке страницы в нужный момент совершать анимацию. То есть, простыми словами, когда Вы опускаетесь по сайту вниз, нужный эффект в данный момент и срабатывает, а не сразу, как загрузится страница. После того, как Вы скачаете данную библиотеку, можете переходить и скачивать сам CSS файл анимации, который при указании, соответствующего класса элементу, может выполнять указанную анимацию. Чтобы быстрее ознакомиться с данным материалом, предлагаю Вам посмотреть небольшой урок, кто не хочет можете дальше продолжить изучать в текстовом виде на сайте.
И так, чтобы наш скрипт с Вами заработал, нам нужно его инициализировать, то есть запустить. Для этого мы должны прописать следующее:
$(document).ready(function(){
var wow = new WOW();
wow.init();
});
Думаю, комментарии тут будут излишними, ведь все достаточно просто. Мы просто записали в переменную новую функцию, а затем ее запустили.
Для начала любому элементу нужно указать обязательный класс wow, а затем уже по ссылке самой анимации, выбрать нужный Вам эффект, к примеру fadeInDown.
<h1 class="wow fadeInDown">RootHelp.ru - скрипты для сайта</h1>
На этом в принципе все, вот такой вот получился материал, если кому данная тема интересна, могу рассказать и познакомить Вас с другим плагином, который имеет очень богатый функционал и не так прост в понимании. Спасибо всем кто читает и смотрит нас!) Пишите, оставляйте комментарии, если чего то не поняли!