Анимация

Применение Animate.css на платформе Tilda Publishing
Сегодня, landing page без анимации продаётся плохо, заказчик скорее выберет фрилансера у которого в портфолио большая часть работ созданы с использованием анимации, но информационная подача товара желает лучшего, чем того, у которого текст и описание на 5+, но визуальная составляющая страниц скудная и совсем без анимации.
На правах автора статьи, хочу отметить, что не поддерживаю использование анимации ради анимации. Считаю, что анимация должна быть не сложной, использоваться для привлечения внимания к отдельным информационным блокам и создания более "воздушного" дизайна страниц, визуальной разгрузки при переходах между экранами и визуализации действий пользователя.
Подключение Animate.css и ViewportChecker.js

Чтобы начать использовать анимацию элементов на странице, необходимо подключить Animate.css и ViewportChecker.js. Для этого мы размещаем в самом верху страницы HTML блок (именно так, если Вы разместите код в HEAD, то ViewportChecker.js не будет работать) и вписываем в него следующие строки
<link rel=”stylesheet” type=”text/css” media=”screen” href=”https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jQuery-viewport-checker/1.8.7/jquery.viewportchecker.min.js"></script>
Если Вы используете личный хостинг, то можете скачать данные файлы на свой хостинг и изменить путь к ним в приведенном коде.

Этим кодом мы подключаем внешние файлы Animate.css (в котором содержатся стили с анимацией, подробнее здесь) и ViewportChecker.js (он позволяет запускать анимацию только в тот момент, когда нужный элемент (или немного заранее) отображается на экране, подробнее здесь). Оба файла уже минифицированы (т.е. сжаты путём удаления переносов и пробелов в коде).

Также Вам необходимо в HEAD страницы (или в Пользовательские стили всего сайта, если анимация будет использована более чем на одной странице) добавить css селекторы

<style type=text/css>
    .hidden {opacity: 0;}
    .visible {opacity: 1;}
</style>
они используются для скрытия элементов на странице до того момента, как их вызовет скрипт ViewportChecker.js

Настройка

Чтобы сразу было понятно с чем мы будем работать, привожу пример кода, который нужно вставить в HTML блок в конце страницы
<script> 
$(document).ready(function() {
    $("h1[class='t102__title t-title'], div[class='t102__descr t-descr t-descr_md']").addClass("hidden").viewportChecker({
        classToAddForFullView: 'full-visible animated fadeIn titleanimate'
       })
    $("div[class='t264__wrapper t-text t-text_xs']").addClass("hidden").viewportChecker({
        classToAddForFullView: 'full-visible animated flipInX codeanimate'
       })
});
</script>
Давайте разберём данный код. Тэги <script></script> оборачивают код и дают понять браузеру что данный код является JavaScript кодом. $(document).ready(function() даёт понять браузеру, что нужно запускать скрипт только после полной загрузки всех элементов DOM (т.е. структуры страницы).

Теперь самое интересное - $("h1[class='t102__title t-title'], div[class='t102__descr t-descr t-descr_md']") , в этой строке мы указываем скрипту на элемент страницы к которому мы будем применять анимацию, чтобы найти class, id или другой его атрибут, нам нужно нажать на элемент правой клавишей и выбрать в контекстном меню строку "Посмотреть код", например у элемента будет код
<h1 class="t102__title t-title" field="title"><div style="font-family:'Georgia';color:#333333;" data-customstyle="yes">Анимация</div></h1>
значит элемент имеет тег H1 и два css класса t102__title и t-title , начинаем строить конструкцию.
Первое что мы должны написать, это $("") , теперь между двойных кавычек мы указываем тэг H1 и открываем квадратные скобки, получается такой код $("h1[]") , теперь скрипт понимает что нужно будет применять анимацию к элементам с тэгом H1, но так как у нас может быть ни один элемент H1, поэтому нам нужно дополнительно указать класс или атрибут соответствующий элементу. Для этого в квадратных скобках пишем class='t102__title t-title' , т.е. классы нашего элемента через пробел, не забываем оборачивать апострофами.

Если Вам необходимо применить данную анимацию к нескольким элементам, то Вы можете перечислить их через запятую, как в моём коде

Подробнее об использование селекторов jQuery для нахождения элементов, читайте здесь
Смотрим код дальше, addClass("hidden") добавляет css класс hidden к элементу.

classToAddForFullView добавляет классы только когда элемент полностью на экране, подробнее о функциях ViewportChecker.js Вы можете прочитать здесь'full-visible animated fadeIn titleanimate' - это список css классов которые будут добавлены элементу при его полном появлении в области экрана.

О них подробнее - full-visible и animated это обязательные классы, далее идёт не менее обязательный fadeIn, это собственно и есть класс определяющий какую анимацию применить к элементу, Вы можете заменить этот класс любым из представленных здесь. И последним идёт необязательный класс, который Вы можете создать сами (можете подключить его в разделе Пользовательские стили или в HEAD страницы) и дать ему своё название, у меня в этом классе прописаны такие свойства -

.titleanimate {
-webkit-animation-duration: 1.5s !important;
-o-animation-duration: 1.5s !important;
-moz-animation-duration: 1.5s !important;
animation-duration: 1.5s !important;
-webkit-animation-delay: 1s !important;
-o-animation-delay: 1s !important;
-moz-animation-delay: 1s !important;
animation-delay: 1s !important;
}


т.е. в нём я прописываю продолжительность (duration) анимации и задержку (delay) перед началом воспроизведения анимации в секундах. Этими стилями я регулирую скорость анимации, их может быть несколько, потому как часто скорость анимации и её задержка у каждого элемента может быть разная.
Заключение

Если у Вас остались вопросы по этому скрипту и его применению, напишите в комментарии, постараюсь помочь. Всем спасибо.
comments powered by HyperComments
Made on
Tilda