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

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

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

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

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


Одинокое дерево

Технологии: canvas, JS.
Автор: Жерар Феррандес (@ge1doot)

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


Плавный скролл и «прилипающее» меню

Технологии: CSS-трансформации, JS, jQuery.js.
Автор: Правейн Бишт (@prvnbist)

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


«Конструктор» гамбургера

Ссылками в левой части добавляете ингридиенты, потом кнопкой «Order» вы «Заказываете» гамбургер.
Технологии: SVG, CSS, Vue.js, Anime.js.
Автор: Тиффани Чхонг (@tiffachoo)

Конструктор гамбургера Посмотреть живой пример


CSS-портрет со сменой прически

Навигацией слева можно менять волосы.
Технологии: CSS-анимация, CSS-трансформации.
Автор: white pallet (@WhitePallet)

CSS-портрет со сменой прически Посмотреть живой пример


Бесконечный туннель

Наведением курсора можно менять направление обзора.
Технологии: GLSL, JS.
Автор: Лиам Эган (@shubniggurath)

Бесконечный туннель Посмотреть живой пример


Блокноты Moleskine

Анимация при наведении.
Технологии: CSS.
Автор: Оливия (@oliviale)

Блокноты Moleskine Посмотреть живой пример


Бесконечность

Технологии: CSS, GLSL, Three.js.
Автор: Лиам Эган (@shubniggurath)

Бесконечность Посмотреть живой пример


Текст и рамка

Текст внизу можно менять. Длина рамки будет тоже соответственно уменьшаться или увеличиваться.
Технологии: CSS-гриды.
Автор: Дэвид Дарнс (@daviddarnes)

Текст и рамка< Посмотреть живой пример


Интересный дизайн фото и текста

Можно наводить курсором на текст и фото.
Технологии: SVG, SVG-фильтры.
Автор: Lisi (@lisilinhart)

Любопытный дизайн фото и текста Посмотреть живой пример


Бегущий человечек на CSS

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

Бегущий человечек на CSS Посмотреть живой пример


Текст из молнии

Внизу есть поле для ввода. Туда можно ввести свой текст.
Технологии: canvas, JS.
Автор: Во Хай Данг (@haidang)

Текст из молнии Посмотреть живой пример


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

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

2

Комментарии

  1. Алексей

    Причёску девушке менять — обалденно! :))

  2. Светлана Павлова

    Светлана Павлова (Автор записи)

    Согласна :) В поле JS я заметила ссылку на расширенную версию. В ней девушка вообще в полный рост, и менять можно целый образ, а не только прическу. Не знаю, правда, почему на CodePen урезанный вариант.

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

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

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

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