Интересный эффект появления кнопки при скролле на Тильде
Нам потребуется zero block тильды. Для примера, возьмем страницу из шаблонов и переконвертируем в зеро.
Затем выделим элемент и откроем панель настроек.
Идем в раздел пошаговая анимация тильды, и выбираем анимацию при скролле.
Настраиваем необходимые параметры, чтобы закрепить блок при скролле в тильде есть параметр FIX, по умолчанию там NONE, нужно заменить на FIXED. Тогда наша кнопка будет ездить за пользователем. Далее нажимаем сохранить и возвращаемся в редактор, нажимаем ПУБЛИКОВАТЬ.
На выходе получаем необычную анимацию кнопки, которая еще и повышает конверсию, ведь она сопровождает пользователя по всему сайту.
CSS-анимации: что это и как научиться их настраивать
На некоторых сайтах вас встречают красивые всплывающие меню и кнопки, которые меняют вид при наведении мышки, клике или прокрутке страницы. Такие эффекты называются анимацией — они влияют на общее впечатление от ресурса и легкость пользования сайтом.
Чем плавнее переходы и необычнее анимация, тем больший вау-эффект произведет на посетителя ваш сайт. Добиться плавности и других свойств анимации помогает CSS — в статье расскажем, что это за язык и как с его помощью сделать простую анимацию элементов сайта.
Что такое CSS
В начале двухтысячных за анимацию отвечала технология Flash. Она была требовательной к ресурсам компьютера — сайты с «флешем» грузились очень долго.
На смену Flash пришла анимация на JavaScript, или JS, — этот язык помог сделать сайты интерактивными, не требуя больших ресурсов.
Сегодня анимацию веб-ресурсов делают в основном на языке CSS (Cascading Style Sheets, или каскадные таблицы стилей) — этот язык отвечает за стиль веб-страницы. Для сложных анимаций советуют использовать JS, но часто CSS может обойтись без помощи JavaScript.
HTML создает структуру страницы, а CSS — ее внешний вид. Чтобы CSS-стили заработали, нужно совместить их с HTML-документом, в котором прописана ваша веб-страница.
Что означают каскады в CSS
Разберемся, что за каскады имеют в виду, когда говорят про каскадные таблицы стилей.
Мы организуем стили в CSS каскадом — один за одним. Если прописать несколько однотипных стилей последовательно, учитываться будет только последний. Например:
В этом примере мы присвоили элементу Title размер шрифта 18 и два цвета — синий и черный. Но в итоге текст будет черного цвета, потому что этот параметр идет последним. Сколько бы цветов мы ни поставили перед ним, учитываться будет только последний
Результат будет такой же, если оставить только черный цвет:
Удаление лишнего синего цвета не повлияет на итог: объект получится черного цвета
Как добавить стили в CSS-файл
Чтобы не прописывать стили в тексте HTML-документа, нужен новый файл с расширением CSS и названием на латинице. В нем прописываем свойства объекта по принципу:
Селектор — тег HTML, целый класс объектов или ID одного объекта.
Свойство — параметр, который мы задаем. Например, цвет.
Значение — нужный вариант параметра. Например, красный.
Рассмотрим пример с сайта Geekbrains:
background-color: # 999 ;
Здесь у всех объектов с селектором my-class будет серый фон. #999 — это значение цвета. Также его можно указать словом — например, blue.
Как добавить CSS-файл в HTML-документ
Мы прописываем стили в отдельном документе с расширением .css и добавляем ссылку на этот файл в наш HTML. Для этого нужны:
— CSS-файл со стилем. Он может лежать на жестком диске в одной папке с HTML или быть в интернете — тогда доступ к файлу придется давать через его URL-адрес;
— тег <link>, через который мы связываем HTML с нужным CSS-файлом;
— атрибут rel=»stylesheet». Он показывает браузеру, что добавляемый файл — это таблица стилей, она же stylesheet;
— ссылка на файл через команду href. Если CSS-файл лежит в одной папке с HTML, то мы просто прописываем его название. Например, нам нужно добавить файл style.css — тогда ссылка будет выглядеть как: href=»style.css»
— если CSS-файл лежит в интернете, то мы прописываем его прямой адрес. Например: href=»https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/CSS/bootstrap.min.CSS»
Так будет выглядеть ссылка на файл со стилями, если он в одной папке с HTML (строка 2) или выложен в сеть и имеет свой URL (строка 4)
Отличия CSS-анимации от JS
JS-анимацию используют не реже, чем CSS, — выбор зависит от ваших целей. Разработчики из Google советуют обращаться к CSS для простых решений типа переключения состояния элементов в интерфейсе. JS-анимация помогает, когда нужны сложные эффекты: отскоки, замедления или перемотка назад.
Пример сложной управляемой анимации, построенной на JS. Доступен на codepen.io
CSS-анимация — простейший способ привести элементы на экране в движение.
Чтобы воссоздать на JS аналог CSS-анимации, потребуется либо громоздкий код, либо дополнительная библиотека типа jQuery. В ней развернутые действия прописаны как одна команда. Это упрощает работу с библиотекой, но не делает ее такой же простой, как работа с CSS.
Конструкторы и готовые библиотеки CSS-анимации
Для тех, кто не разбирается в настройках CSS, есть онлайн-конструкторы. В них вы можете задать параметры анимации — направление, длительность, количество повторов — скопировать готовый код и вставить его в CSS-файл.
СSS Animations Generator
CSS Animations Generator помогает настроить анимацию и форму объектов, фон, цвет и параметры текста.
На сайте также можно выбрать, какие эффекты объекта вам нужны: появление, исчезновение или изменение фона
Justinaguilar
Justinaguilar — пример библиотеки готовых CSS-анимаций, которые нужно только скачать и вставить на сайт. Останется лишь применить эффект к нужному объекту на странице.
По клику на название анимации красный квадрат покажет, как она выглядит
Также на странице собраны пошаговые инструкции, как добавить интересный вариант анимации, и прописано каждое действие, чтобы она заработала на вашем сайте.
На странице указано, куда скопировать строчки кода, чтобы готовая CSS-анимация заработала с нужным объектом
Minimamente
Ресурс Minimamente предлагает 64 варианта готовой анимации. Здесь нет пошаговой инструкции, как добавить нужные CSS-действия в код страницы.
На странице Minimamente сразу можно посмотреть, какой эффект произведет выбранная анимация
Как настроить CSS-анимацию
Как мы уже говорили, для CSS-анимации на странице нужно два элемента:
— объект, который нужно анимировать. Его прописываем в HTML-файле;
— параметры объекта и анимации. Их прописываем в CSS-файле.
Помните: чтобы анимация работала, ссылка на CSS должна быть прописана в HTML-документе. Как это сделать — рассказывали выше в разделе «Как добавить CSS-файл в HTML-документ».
При загрузке страницы
Анимация, которую мы видим при загрузке сайта, называется «прелоадер». Прелоадер помогает посетителю дождаться загрузки страницы. Если сайт грузится долго, а на экране ничего не происходит, посетитель может уйти. Разберем пример такой анимации, представленный на сайте itchief.
Для начала автор создает в HTML три контейнера для анимации после тега <body>: .preloader, .preloader_row и .preloader_item:
Далее нужно настроить параметры для каждого контейнера в CSS-файле: координаты, анимацию, порядок кадров keyframes.
Посмотреть и поэкспериментировать с кодом и итоговым результатом можно здесь.
Анимация фона
С помощью CSS можно анимировать фон страницы. Например, как описано на ресурсе Atuin:
Создаем в HTML-документе контейнер для фона. Текст поверх фона можно написать любой:
Анимация графического фона на CSS
В CSS-файле прописываем параметры шрифта, ссылку на картинку и анимацию. В примере также есть рамка вокруг фонового изображения — чтобы ее убрать, удалите строку border.
Посмотреть полный код и готовый результат можно здесь.
При наведении курсора
Чтобы запустить анимацию при наведении курсора на объект, нужна команда hover.
1. Создаем в HTML кнопку с текстом «Пример ховера», которая должна поменять свое состояние при наведении курсора. Для этого нужна команда:
2. В CSS-файле задаем параметры кнопки: границы, цвет, размер шрифта:
transition: all 400ms ease;
3. После параметров кнопки добавляем нужный эффект hover, где прописываем, как должна измениться кнопка при наведении курсора:
box-shadow: inset 0 0 0 3px #00000;
Сейчас при наведении курсора кнопка должна менять цвет
Исчезновение и появление
Разберемся на примере прямоугольника, как настроить плавное появление или исчезновение объекта:
1. Пишем в HTML команду для создания прямоугольника:
2. В CSS-файле задаем параметры прямоугольника — размеры, цвет и анимацию:
animation: myAnim 1s ease 0s infinite normal forwards;
В строке animation выставлена длина анимации в 1 секунду и бесконечное повторение — infinite. Вместо infinite можно цифрами задать нужное число повторов. Например, 25.
3. После параметров прямоугольника добавляем параметры анимации. Прописываем, что на старте анимации он полностью залит цветом, а в конце — бесцветный:
4. Чтобы прямоугольник не исчезал, а появлялся, нужно просто поменять местами параметры прозрачности в последнем шаге. Для этого в первом параметре opacity пишем 0, а во втором — 1: