Анимация фона при прокрутке страницы
Анимируем SVG фигуры при прокрутке страницы.
Фигуры будут видоизменяться в зависимости от области просмотра. Для анимации мы воспользовались библиотекой anime.js, а для обработки прокрутки скрипт scrollMonitor.js.
Помимо преобразования самих фигур будет, меняться в том числе и цвет, что несомненно скажется на разнообразии визуальных элементов страницы.
Так же при наведении курсора мыши по элементам страницы вы сможете увидеть небольшой параллакс-эффект.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://tympanus.net/codrops/2017/05/23/on-scroll-morphing-background-shapes/
Перевел: Станислав Протасевич
Урок создан: 25 Мая 2017
Просмотров: 22601
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
