CSS/JS/SVG с подвыподвертом

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

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

«Волк Шредингера»

Кликом справа или слева вы изменяете ширину синего блока.
Технологии: CSS, CSS-анимация, CSS-трансформации, transition, mo.js (Motion Graphics for the Web).
Автор: Jean (@jeankvd)

Волк Шредингера Посмотреть живой пример


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

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

Схема-дерево на CSS и JS

Технологии: CSS, CSS-переменные, Bliss.js.
Автор: Ли Вера (@leaverou)

Схема-дерево на CSS и JS Посмотреть живой пример


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

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

Постер к фильму «Соло: Звездные войны»

Внизу можно выбирать персонажа для фона и менять текст.
Технологии: CSS, React.
Автор: Морис Мелчерс (@mephysto)

Постер к фильму Соло: Звездные войны Посмотреть живой пример


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

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

Трансформация лошади в дракона

Технологии: CSS, JS.
Автор: Эли Фитч (@elifitch)

Трансформация лошади в дракона Посмотреть живой пример


дайджест

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

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

Эффект с подчеркиванием при наведении на ссылку

Технологии: CSS-анимация.
Автор: Мехмет Бурак Эрман (@mburakerman)

Эффект с подчеркиванием при наведении на ссылку Посмотреть живой пример


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

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

Праздничная анимация

Технологии: CSS, CSS-гриды, particles.js.
Автор: Триша Салас (@trishasalas)

Праздничная анимация Посмотреть живой пример


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

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

Эффект 3D-печати

Технологии: CSS, Three.js, GreenSock.js.
Автор: Shaw (@shshaw)

Эффект 3D-печати Посмотреть живой пример


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

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

Анимация «Дуэль»

Технологии: CSS, SVG, JS.
Автор: Энгер Бьюза (@enger)

Дуэль Посмотреть живой пример


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

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

Бегущая зебра

Анимация меняется по клику в любом ее месте.
Технологии: CSS, three.js.
Автор: DPDK (@dpdknl)

Бегущая зебра Посмотреть живой пример


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

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

Трансформация «Жажда скорости»

Технологии: CSS, SVG, GSAP.
Автор: Крейг Роблевски (@PointC)

Трансформация Жажда скорости Посмотреть живой пример


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

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

Анимация с убегающим холодильником

Технологии: CSS, CSS-трансформации, CSS-анимация.
Автор: Адам Кун (@cobra_winfrey)

Анимация с убегающим холодильником Посмотреть живой пример


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

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

Имитация чернильных клякс

«Кляксы» можно добавлять кликом по холсту. Обратите внимание, что старые бледнеют при добавлении новых, «впитываясь» в «бумагу», что добавляет реалистичности.
Технологии: canvas, JS.
Автор: Том Миллер (@creativeocean)

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


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

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

Робот-самурай

Технологии: CSS, GSAP.js, Greensock.js.
Автор: Джекоб (@jx2bandito)

Робот-самурай Посмотреть живой пример


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

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

Имитация крема на CSS

Проводя курсором по середине квадрата, вы стираете «крем» и видите текст.
Технологии: CSS-трансформации, CSS-фильтры.
Автор: Юсуке Накая (@YusukeNakaya)

Имитация крема на CSS Посмотреть живой пример


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

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

Раскладка на CSS-гридах с использованием CSS-перспективы

Имитация обложек музыкальных альбомов.
Технологии: CSS-гриды, CSS-трансформации, JS.
Автор: Энди Барефут (@andybarefoot)

Интересная раскладка на CSS-гридах с использованием CSS-перспективы Посмотреть живой пример