Еженедельная подборка красивых эффектов на CSS/SVG/JS #73

Подборка свежих эффектов, интересных идей и полезных наработок.

Трехмерный городок

Кликом и удерживанием курсора можно «крутить» пейзаж.
Эффектнее смотрится в полностраничном режиме.
Технологии: canvas, JS.
Автор: Дэйв ДеСандро (@desandro)

Трехмерный городок Посмотреть живой пример


Перетасовка карт на Vue

Кнопкой Shuffle колода перетасовывается. Кнопками Slow — Medium — Fast можно управлять скоростью.
Технологии: CSS, Vue.js.
Автор: Hassan Dj (@itslit)

Перетасовка карт на Vue Посмотреть живой пример


Анимация страницы отписки от рассылки

Нажмите на кнопки для просмотра анимации.
Технологии: SVG, CSS-трансформации, GSAP.
Автор: agathaco (@agathaco)

Анимация страницы отписки от рассылки Посмотреть живой пример


Генератор домиков

Новый набор генерируется по клику в любом месте холста.
Технологии: SVG, CSS, JS.
Автор: smlsvnssn (@smlsvnssn)

Генератор домиков Посмотреть живой пример


Изменение размера шрифта через CSS-переменные

Ползунком вверху меняется размер шрифта.
Технологии: CSS-гриды, CSS-переменные, JS.
Автор: Дронка Рауль (@rauldronca)

Изменение размера шрифта через CSS-переменные Посмотреть живой пример


Перекати-поле на странице пустого результата поиска

Лица генерируются заново по клику в любом месте.
Технологии: CSS-анимация, CSS-трансформации, JS.
Автор: Айдан Брин (@aido179-1471800764)

Перекати-поле как символ пустого результата поиска Посмотреть живой пример


SVG-маски теперь поддерживаются в React, демонстрация

Технологии: CSS, React, GSAP, Draggable.js.
Автор: Крис Гэннон (@chrisgannon)

SVG-маски теперь поддерживаются в React, демонстрация Посмотреть живой пример


Генератор паролей на Vue

Элементами управления можно менять состав и длину пароля.
Технологии: CSS, Vue.js.
Автор: Нур Соуд (@nourabusoud)

Генератор паролей на Vue Посмотреть живой пример


«Раскладывающееся» модальное окно

Окно открывается по кнопке Open слева вверху.
Технологии: CSS, SVG, GSAP.
Автор: Блейк Боуэн (@osublake)

Раскладывающееся модальное окно Посмотреть живой пример


Прогресс-бар вдоль периметра страницы

При прокрутке страницы желтая полоска идет по часовой стрелке, начиная с верхнего левого угла.
Технологии: CSS, jQuery.js.
Автор: Томас Ваэт (@thomasvaeth)

Прогресс-бар вдоль периметра страницы Посмотреть живой пример


Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях.

P.S. Это тоже может быть интересно:

1

Комментарии

  1. Слава Федосенко

    Светлана, отличная подборка! Только что случайно на неё наткнулся, очень круто.
    Я разрабатываю анимации без кода на webflow, вот мой проект: http://webflow-samples.webflow.io/
    Буду следить за вашими еженедельными подборками, отличная работа!

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Ваш E-mail не будет опубликован

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.