Анимация

Применение 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 src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-viewport-checker/1.8.7/jquery.viewportchecker.min.js"></script>
Если Вы используете личный хостинг, то можете скачать данные файлы на свой хостинг и изменить путь к ним в приведенном коде.

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

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

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

Настройка

Чтобы сразу было понятно с чем мы будем работать, привожу пример кода, который нужно вставить в HTML блок в конце страницы
<script> 
$(document).ready(function() {
    $("*[class^='t102__title t-title'], *[class^='t102__descr t-descr t-descr_md']").addClass("hidden").viewportChecker({
        classToAddForFullView: 'full-visible animated fadeIn titleanimate'
       });
    $("*[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 (т.е. структуры страницы).

Теперь самое интересное - $("*[class^='t102__title t-title'], *[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 , начинаем строить конструкцию.
Первое что мы должны написать, это $("") , теперь между двойных кавычек мы указываем * (это значит что мы выбираем все элементы страницы) и открываем квадратные скобки, получается такой код $("*[]"), но так как нам нужен конкретный элемент, то мы будем определять его по классу css. Для этого в квадратных скобках пишем 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 { 
animation-duration: 1.5s !important; 
animation-delay: 1s !important; 
animation-iteration-count: infinite !important;
}
т.е. в нём я прописываю продолжительность (duration) анимации и задержку (delay) перед началом воспроизведения анимации в секундах. Этими стилями я регулирую скорость анимации, их может быть несколько, потому как часто скорость анимации и её задержка у каждого элемента может быть разная. Количество повторений (iteration-count) я не использовал в конкретном примере, но часто оно необходимо для зацикленной или неоднократно повторяющейся анимации.
Обновление 1. Эффект приближения ("ken burns")

Пользователь Аляксандр Пуставітаў ( https://vk.com/pustavitau ) попросил совета, как реализовать эффект "ken burns" к изображениям (как пример, заглавное изображение этой страницы), всё оказалось совсем не сложно, но с нюансом - в настройках сайта Вам нужно отключить режим Lazy Load (подробнее в этой статье http://help-ru.tilda.ws/lazy-load ), так как из-за него не работает свойство transition-duration.

Для подключения эффекта к элементу (в данном случае к изображению, но вообще можно к любому), Вам нужно добавить такой HTML блок на страницу
<style>
    .zoomImgHead {
        transform: scale(1.3) !important; 
        transform-origin: 50% 10% !important; 
        transition-duration: 15s !important;
        transition-delay: 2s !important;
    }
</style>
<script>
$(document).ready(function() {
    $("*[id='coverCarry9705932']").addClass("zoomImgHead");
});
</script>
В блоке <style> мы создаём класс, со свойствами нашего эффекта, в блоке <script> создаём функцию jQuery которая применит этот класс к нашему элементу. Теперь подробнее о возможных свойствах transform и transition для настройки эффекта -

transform - задаёт тип трансформации. Подробнее здесь.

transform-origin - устанавливает координаты точки, относительно которой будет происходить трансформация элемента. Подробнее здесь.

transition-duration - задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. Может применяться не только для трансформаций, но и к любым другим свойствам, например height или width. Подробнее здесь.

transition-delay - устанавливает время ожидания перед запуском эффекта перехода. Подробнее здесь.

В принципе, это всё что нужно знать для создания эффекта "ken burns", но раз уж начали рассматривать свойства transform и transition, то давайте напишу о всех возможных -

transform-style - определяет, как дочерние элементы будут отображаться в 3D-пространстве. Подробнее здесь.

transition-property - устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода. Подробнее здесь.

transition-timing-function - устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода. Подробнее здесь.


Если вы хотите чтобы эффект запускался только когда пользователь до него дойдёт, то используйте такой код -
<style>
    .zoomImgHead {
        transform: scale(1.3) !important; 
        transform-origin: 50% 10% !important; 
        transition-duration: 15s !important;
        transition-delay: 2s !important;
    }
</style>
<script>
$(document).ready(function() {
    $("*[id='coverCarry9705932']").addClass("hidden").viewportChecker({
        classToAdd: 'visible zoomImgHead'});
    });
</script>
только не забудьте изменить элемент и класс на Ваши.
Обновление 2. Задаём фон любому элементу

Здесь всё делается также просто, но снова есть один нюанс. Но для начала посмотрите на код, который позволяет изменить фон
$(document).ready(function() {
    $("div[id='tildacopy']").css("background","url(https://static.tildacdn.com/tild3031-3762-4734-b231-303963653233/geometric_pattern.png) repeat");
});
вот и весь код ))) Как Вы уже поняли, Вам достаточно поменять Ваш элемент и изменить URL путь до Вашей картинки. Если Вы просто хотите поменять цвет фона (может даже сделать его полупрозрачным), то удалите всё что написано во вторых кавычках (т.е. там где url() repeat, вот это всё нужно удалить) и впишите в эти кавычки цвет в формате HTML, RGB или RGBA, подробнее читайте здесь.

Также Вы наверное заметили значение repeat (оно полезно если Вы указываете паттерн как изображение для фона) в свойстве background , оно может также иметь значение repeat-x, repeat-y, space и round, нужно оно для того, чтобы Ваше изображение для фона повторялось во все стороны или только по вертикали/горизонтали. Подробнее об этом значение читайте здесь.

А теперь обещанный нюанс, дело в том, что Tilda не имеет библиотеки изображений пользователей, и если Ваше изображение храниться у Вас на компьютере, то просто указать его как изображение для фона, Вы не сможете. Но и для этого случая есть хитрость, всего то нужно добавить на страницу блок с изображением (IM01), указать в нём картинку с Вашего компьютера, сохранить этот блок и тут же в конструкторе страницы нажмите правой клавишей на это изображение и выберите пункт "Просмотреть код" (это для браузера Google Chrome, но в Firefox принцип такой же). После этого откроется структура Вашей страницы и будет выделена строка с Вашим элементом, просто найдите в этой строке адрес который начинается с https://static.tildacdn.com и скопируйте его полностью в значение URL свойства background.

Всё, теперь отключите (НЕ УДАЛЯЙТЕ, т.к. я думаю что Tilda не хранит изображения из удалённых блоков) блок с изображением (IM01) который Вы добавили.
Заключение

Если у Вас остались вопросы по статье и её применению, напишите в комментарии, постараюсь помочь. Всем спасибо. Поделитесь статьёй в социалках, может кому то ещё она поможет.
P.S.

И вот ещё тут кнопки (от Яндекса) для поддержки меня :)
Если статья Вам помогла конечно, также если что пишите в комментарии, если нашли какую то анимацию в интернете, попробуем вместе повторить её на Tilda.
comments powered by HyperComments
Made on
Tilda