Анимацию на сайте можно сделать тремя способами:
- CSS-анимация;
- SVG-анимация;
- JavaScript-анимация.
Среди перечисленых способов CSS-анимация - самая легкая в освоении, но менее функциональная, в то же время JavaScript-анимация - самая сложная и самая гибкая в настройке. Далее рассмотрим возможности каждого из способов.
CSS-анимации
Этот способ позволяет вращать, растягивать, уменьшать и увеличивать объект, перемещать его или выполнять другие действия. CSS-анимации создают с помощью группы свойств animation. Они задают длительность анимации, количество повторений, зацикленность, стороны движения и другие характеристики.
SVG-анимация
Scalable Vector Graphics (дословно «масштабируемая векторная графика») - это двухмерная векторная графика. SVG анимация на сайте может быть достигнута двумя методами:
- анимировать нужное SVG изображение, используя знания в CSS или JavaScript.
- воспользоваться специальными программами, создающими SVG анимацию (в этом случае нужно будет лишь импортировать анимацию на сайт).
У SVG анимации есть свой собственный тег в HTML — это <svg>. Внутри него помещаются свойства и атрибуты самой анимации. Если простым языком: помещают то, что должно произойти на странице с тем или иным элементом.
Если необходимо анимировать более сложные объекты, то тогда нужно взять на вооружение инструменты для работы с векторной графикой, чтобы иметь возможность экспортировать нужное изображение в SVG и добавить его к себе на сайт. В качестве такого инструмента подойдут:
- Adobe Illustrator;
- Sketch.
JavaScript-анимация
Это более сложный подход, в тоже время гораздо более функциональный. Сайты с JavaScript-анимацией загружаются долго, могут работать медленно, но вызывают «вау-эффект». Для создания самых сложных анимаций используют специальные библиотеки, которые упрощают написание кода к анимациям, такие как: Three.js, TweenMax, GSAP.
JavaScript-анимация используется, когда другие способы не подходят. Например, с помощью JS можно создать популярный параллакс-эффект — когда при прокрутке окна браузера элементы фона на переднем и заднем плане двигаются с разной скоростью. Это даёт ощущение трёхмерного пространства (
пример).
При использовании JavaScript-анимации разработчик обладает полным контролем над стилями элемента на каждом этапе анимации. Это означает, что анимацию можно замедлять, приостанавливать, останавливать, обращать, как угодно манипулировать элементами.