yandex
Полезные статьи - Roman Tuzov Анимации - Roman Tuzov

Крутые анимации

Котик-программист

котик сделан из SVG картинок, анимирован с помощью библиотеки GSAP.JS, логика работы описана в TypeScript.

Посмотреть на CodePen

Лавовая лампа

Лавовая лампа сделана на HTML и SCSS. Форму лампы автор задает с помощью CSS свойства clip-path. «Лаву» анимирует, используя CSS keyframes.

Посмотреть на CodePen

Красивое меню

Красивое tabbar меню сделано из SVG картинок, которые анимированы с помощью библиотеки GSAP, включающую в себя MorphSVGPlugin

Посмотреть на CodePen

Liquid Loader

Loader автор анимирует CSS свойство transform, которому задает различные параметры и добивается эффекта жидкости у элементов загрузчика.

Посмотреть на CodePen

Рейтинг

Рейтинг сделан без использования JS. Звезды — это стилизованные с помощью css радио кнопки.

Посмотреть на CodePen

Невозможный чекбокс

Чекбокс, который защищает медведь. Реализован с помощью React, анимирован библиотекой GSAP.JS

Посмотреть на CodePen

Анимированная луна

Смена стадий луны реализована с помощью CSS анимации. Каждая отдельная звезда описана автором в свойстве box-shadow элемента .stars

Посмотреть на CodePen

Travel-карты

При наведении на красивые travel карточки, активируется CSS свойство transform, которое создает эффект вращения.

Посмотреть на CodePen

Переключатели

Огромное количество разных переключателей на HTML, анимированные с помощью CSS, среди которых встречаются довольно оригинальные и интересные.

Посмотреть на CodePen

Газета на GRID

Демонстрация разметки, сделанной с использованием CSS Grid.

Посмотреть на CodePen

Жадное css НЛО

Бесконечно анимированное похищение животных НЛО. Разметка сделана с использованием препроцессора Pug. Стили и анимации описаны в SCSS.

Посмотреть на CodePen

Анимированный blob

Анимирован в JS. Параметры анимации можно настраивать с помощью инпутов, созданных в html

Посмотреть на CodePen