Подборка свежих эффектов, интересных идей и полезных наработок. «Волк Шредингера» Кликом справа или слева вы изменяете ширину синего блока.Технологии: CSS, CSS-анимация, CSS-трансформации, transition, mo.js (Motion Graphics for the Web).Автор: Jean (@jeankvd) Посмотреть живой пример Одинокое дерево Плавный скролл и «прилипающее» меню «Конструктор» гамбургера Ссылками в левой части добавляете ингридиенты, потом кнопкой «Order» вы «Заказываете» гамбургер.Технологии: SVG, CSS, Vue.js, Anime.js.Автор: Тиффани Чхонг ...

Подборка свежих эффектов, интересных идей и полезных наработок. Схема-дерево на CSS и JS Цветные волны Имитация написания маркером Красивый эффект ввода текста Воспроизведение работ японского художника Икко Танака на CSS Миллионы сердечек Пейзаж с уточкой и деревом Очередная анимация с фигурами от Жерара Феррандеса Иконки соцсетей в ящике Красивый эффект «змейка» при переходе между формами ввода и кнопкой Эффект при наведении ...

Подборка свежих эффектов, интересных идей и полезных наработок. Постер к фильму «Соло: Звездные войны» Кнопка включения-выключения в стиле Sci-Fi Имитация трехмерного интерфейса Красивый рисунок из линий Анимация часов из блоков Трехмерная анимация соцсетей Трансформация куба на CSS Вверху слева можно убрать галочку, чтобы тени были более четкими.Технологии: CSS-анимация, CSS-трансформации.Автор: Дэвид Харшид (@davidkpiano) Посмотреть живой пример Анимация портрета Цветной маятник-змейка на CSS ...

От автора: помните, как в детстве вы вырезали картинки из журналов? Вы клеили их на бумагу и создавали коллажи? Этот пост посвящен вырезанию изображений в вебе с помощью свойства clip-path CSS. Мы узнаем, как проводить вырезку, а также как с помощью вырезанных частей создавать интересные эффекты, комбинируя части с оригинальным изображением. В качестве примера я буду использовать следующее изображение. Цветок ...

Подборка свежих эффектов, интересных идей и полезных наработок. Трансформация лошади в дракона Анимация со щупальцами Солнце из-под воды Интерактивный фон Визитки на CSS-гридах Анимация работает по наведению и клику на одну из стопок. Интересный скролл.Может неправильно работать в IE.Технологии: CSS-гриды, JS.Автор: Джон Кантнер (@jkantner) Посмотреть живой пример Трехмерная надпись из блоков Скейтборд Таблица фигур Лиссажу Анимация «Павлиний хвост» на CSS CSS-иллюстрация ...

Подборка свежих эффектов, интересных идей и полезных наработок. Бегущая зебра Портреты Анимация «Винтовая линия (Helix)» Трансформация логотипа Красивая анимация с линиями Анимация волны из частиц Анимация с курицей SVG-анимация леттеринг-логотипа Список дел с CSS-анимацией Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях. P.S. Это тоже может быть интересно:

Подборка свежих эффектов, интересных идей и полезных наработок. Анимация «Дуэль» Неоновая вывеска Анимация с авокадо Нужно «схватить» курсором косточку и потянуть в сторону. Предупреждение: анимация сопровождается звуком!Технологии: canvas, CSS, JS.Автор: Себастьян ДеРосси (@derossi_s) Посмотреть живой пример Портрет из текстовой мозаики Создание рисунка из частиц «Нарисуйте» какие-нибудь линии «ручкой», удерживая курсор. После этого нажмите «Create Particles» для генерации частиц.Технологии: canvas, WebGL, particles.js.Автор: ...

Подборка свежих эффектов, интересных идей и полезных наработок. Эффект 3D-печати Нарядный переключатель Ракета в космосе Красивая анимация логотипа Креативное резюме с SVG-анимацией при прокрутке Эффектнее всего выглядит в полностраничном режиме (справа вверху кнопка «Change View» — «Full Page»).Технологии: SVG, CSS-трансформации, CSS-анимация, GreenSock.js.Автор: Ева (@SoyEva) Посмотреть живой пример Праздничный календарь на гридах Рисунок девушки Линии образуют рисунок при загрузке страницы. Чтобы посмотреть ...

Подборка свежих эффектов, интересных идей и полезных наработок. Праздничная анимация Парад солдатиков с параллакс-эффектом Конструктор машины Шестиугольный прогресс-бар Глючный прогресс-бар Автор высмеивает бессмысленные прогресс-бары: когда индикатор вроде и есть, а толку от него ноль.Технологии: CSS-анимация.Автор: Крис Смит (@chris22smith) Посмотреть живой пример Трансформации иконок соцсетей Анимация с кофемашиной Градиентный фон при наведении Оптическая иллюзия Когда уголки квадратов окрашиваются, возникает иллюзия искажения прямых ...

Подборка свежих эффектов, интересных идей и полезных наработок. Эффект с подчеркиванием при наведении на ссылку Оптическая иллюзия с цветными кругами Посмотрите на два круга: кажется, что это голубой и зелёный. На самом деле они одного и того же цвета циан.Технологии: SVG.Автор: Эллиот Гено (@pyrografix) Посмотреть живой пример Трансформации героев фильма «Звездные войны: Последний джедай» из многоугольников Навигация по героям — над портретами, ...