Блог RU-CENTER
На некоторых сайтах вас встречают красивые всплывающие меню и кнопки, которые меняют вид при наведении мышки, клике или прокрутке страницы. Такие эффекты называются анимацией — они влияют на общее впечатление от ресурса и легкость пользования сайтом.
Чем плавнее переходы и необычнее анимация, тем больший вау-эффект произведет на посетителя ваш сайт. Добиться плавности и других свойств анимации помогает CSS — в статье расскажем, что это за язык и как с его помощью сделать простую анимацию элементов сайта.
Что такое CSS
В начале двухтысячных за анимацию отвечала технология Flash. Она была требовательной к ресурсам компьютера — сайты с «флешем» грузились очень долго.
На смену Flash пришла анимация на JavaScript, или JS, — этот язык помог сделать сайты интерактивными, не требуя больших ресурсов.
Сегодня анимацию веб-ресурсов делают в основном на языке CSS (Cascading Style Sheets, или каскадные таблицы стилей) — этот язык отвечает за стиль веб-страницы. Для сложных анимаций советуют использовать JS, но часто CSS может обойтись без помощи JavaScript.
HTML создает структуру страницы, а CSS — ее внешний вид. Чтобы CSS-стили заработали, нужно совместить их с HTML-документом, в котором прописана ваша веб-страница.
Что означают каскады в CSS
Разберемся, что за каскады имеют в виду, когда говорят про каскадные таблицы стилей.
Мы организуем стили в CSS каскадом — один за одним. Если прописать несколько однотипных стилей последовательно, учитываться будет только последний. Например:
Результат будет такой же, если оставить только черный цвет:
Как добавить стили в CSS-файл
Чтобы не прописывать стили в тексте HTML-документа, нужен новый файл с расширением CSS и названием на латинице. В нем прописываем свойства объекта по принципу:
селектор { свойство: значение; }
Селектор — тег HTML, целый класс объектов или ID одного объекта.
Свойство — параметр, который мы задаем. Например, цвет.
Значение — нужный вариант параметра. Например, красный.
Рассмотрим пример с сайта Geekbrains:
Здесь у всех объектов с селектором 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"
Отличия CSS-анимации от JS
JS-анимацию используют не реже, чем CSS, — выбор зависит от ваших целей. Разработчики из Google советуют обращаться к CSS для простых решений типа переключения состояния элементов в интерфейсе. JS-анимация помогает, когда нужны сложные эффекты: отскоки, замедления или перемотка назад.
CSS-анимация — простейший способ привести элементы на экране в движение.
Чтобы воссоздать на JS аналог CSS-анимации, потребуется либо громоздкий код, либо дополнительная библиотека типа jQuery. В ней развернутые действия прописаны как одна команда. Это упрощает работу с библиотекой, но не делает ее такой же простой, как работа с CSS.
Конструкторы и готовые библиотеки CSS-анимации
Для тех, кто не разбирается в настройках CSS, есть онлайн-конструкторы. В них вы можете задать параметры анимации — направление, длительность, количество повторов — скопировать готовый код и вставить его в CSS-файл.
СSS Animations Generator
CSS Animations Generator помогает настроить анимацию и форму объектов, фон, цвет и параметры текста.
Justinaguilar
Justinaguilar — пример библиотеки готовых CSS-анимаций, которые нужно только скачать и вставить на сайт. Останется лишь применить эффект к нужному объекту на странице.
Также на странице собраны пошаговые инструкции, как добавить интересный вариант анимации, и прописано каждое действие, чтобы она заработала на вашем сайте.
Minimamente
Ресурс Minimamente предлагает 64 варианта готовой анимации. Здесь нет пошаговой инструкции, как добавить нужные CSS-действия в код страницы.
Как настроить CSS-анимацию
Как мы уже говорили, для CSS-анимации на странице нужно два элемента:
— объект, который нужно анимировать. Его прописываем в HTML-файле;
— параметры объекта и анимации. Их прописываем в CSS-файле.
Помните: чтобы анимация работала, ссылка на CSS должна быть прописана в HTML-документе. Как это сделать — рассказывали выше в разделе «Как добавить CSS-файл в HTML-документ».
При загрузке страницы
Анимация, которую мы видим при загрузке сайта, называется «прелоадер». Прелоадер помогает посетителю дождаться загрузки страницы. Если сайт грузится долго, а на экране ничего не происходит, посетитель может уйти. Разберем пример такой анимации, представленный на сайте itchief.
Для начала автор создает в HTML три контейнера для анимации после тега <body>: .preloader, .preloader_row и .preloader_item:
Далее нужно настроить параметры для каждого контейнера в CSS-файле: координаты, анимацию, порядок кадров keyframes.
Посмотреть и поэкспериментировать с кодом и итоговым результатом можно здесь.
Анимация фона
С помощью CSS можно анимировать фон страницы. Например, как описано на ресурсе Atuin:
Создаем в HTML-документе контейнер для фона. Текст поверх фона можно написать любой:
В CSS-файле прописываем параметры шрифта, ссылку на картинку и анимацию. В примере также есть рамка вокруг фонового изображения — чтобы ее убрать, удалите строку border.
Посмотреть полный код и готовый результат можно здесь.
При наведении курсора
Чтобы запустить анимацию при наведении курсора на объект, нужна команда hover.
В примере:
1. Создаем в HTML кнопку с текстом «Пример ховера», которая должна поменять свое состояние при наведении курсора. Для этого нужна команда:
<button>Пример ховера</button>
2. В CSS-файле задаем параметры кнопки: границы, цвет, размер шрифта:
3. После параметров кнопки добавляем нужный эффект hover, где прописываем, как должна измениться кнопка при наведении курсора:
Попробуйте настроить эффект сами.
Исчезновение и появление
Разберемся на примере прямоугольника, как настроить плавное появление или исчезновение объекта:
1. Пишем в HTML команду для создания прямоугольника:
<div id="rectangle"></div>
2. В CSS-файле задаем параметры прямоугольника — размеры, цвет и анимацию:
В строке animation выставлена длина анимации в 1 секунду и бесконечное повторение — infinite. Вместо infinite можно цифрами задать нужное число повторов. Например, 25.
3. После параметров прямоугольника добавляем параметры анимации. Прописываем, что на старте анимации он полностью залит цветом, а в конце — бесцветный:
4. Чтобы прямоугольник не исчезал, а появлялся, нужно просто поменять местами параметры прозрачности в последнем шаге. Для этого в первом параметре opacity пишем 0, а во втором — 1:
Попробуйте поменять параметры прозрачности самостоятельно.
Появление текста
Чтобы создать эффект появления текста, создаем класс с текстом в HTML-документе:
1. В HTML пишем <p class="text-typing">Пример появления текста</p>
2. Далее в CSS-файле настроим этот класс. Нужно прописать ширину блока, цвет, размер и шрифт текста. Также добавляем параметры анимации (5 секунд, выполнить за 50 шагов).
Командами white-space:nowrap и overflow:hidden прячем текст до срабатывания анимации:
3. Добавляем @keyframes для запуска анимации:
Попробуйте поменять значения параметров и посмотреть, как они влияют на итоговый результат.
Cмена картинок
Первым делом добавляем в HTML класс, в котором прописываем адреса нужных картинок:
В CSS прописываем параметры анимации: изменения по кадрам keyframes, длительность, количество повторов и эффекты. Пример кода — на ресурсе Zornet.
Попробовать разные настройки анимации и посмотреть результат можно здесь.
Движение
Анимация движения особенная — при движении объект должен изменяться внешне. Например, вытягиваться вверх при прыжке.
В этом примере автор добавил прыгающему квадрату вытягивание вверх, замедление в верхней точке прыжка, отскок и небольшое искажение при приземлении.
Посмотреть код в действии и изменить параметры можно здесь.
При скролле
Анимацию при скролле проще построить в связке CSS и JS. Самый простой способ:
- Выбрать нужную анимацию из готовых пресетов и скачать архив со всеми инструментами для ее настройки.
- Добавить animate.css из архива в таблицу стилей сайта.
- Задать класс элементу, который нужно анимировать. Название класса = название анимации из первого шага.
- Чтобы анимация срабатывала во время скролла, добавляем wow.js из архива в JS-папку сайта.
Пошагово с подробными примерами процесс описан на ресурсе Smartlanding.
Вывод
Основной принцип создания CSS-анимации — создать объект или контейнер в HTML и присвоить ему CSS-стили. Стили описывают внешний вид объекта, запускают анимацию и придают эффекты.
Чтобы стили заработали, нужно прописать их в отдельном CSS-файле, который привязывается к HTML-документу с помощью строчки кода. Это базовая механика работы с CSS. Чтобы реализовать сложные решения, где можно контролировать анимацию в процессе воспроизведения, потребуется связка CSS и JS.
Даже простая анимация объектов или текста придаст вашему сайту эффектности, а красивый прелоадер поможет удержать посетителей, если сайт долго загружается.