От автора: для клиентского проекта нам поручили не что иное, как сделать прогресс бар, причем радиальный. Раньше мы использовали целые Canvas графические библиотеки (156k / 44k gzip), но это казалось излишним. Я посмотрел проект Lottie от Airbnb, в котором экспортируется анимация After Effects, как JSON. Это классно для сложной анимации, но зависимости для одной этой микро-анимации оказались слишком объемными (248k ...

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

От автора: в предыдущей статье мы представили новую библиотеку, с помощью которой делается анимация элементов сайта вдоль SVG-пути — PathSlider. Кроме того, мы реализовали использование этой библиотеки и разработали простой слайдер. В этом руководстве мы рассмотрим еще два примера, иллюстрирующих возможности нашей библиотеки и SVG-пути. Например, мы разработаем еще один слайдер с использованием замкнутого SVG-пути, как в предыдущем руководстве, но ...

От автора: одним из элементов, которые привлекают меня в SVG больше всего, является элемент path. Если вы следите за моими руководствами, вы, вероятно, заметили это И мы можем делать так много всего с SVG-путями, что я никогда не устаю экспериментировать с ними, всегда пытаясь использовать их для создания привлекательного и оригинального опыта интерфейса сайтов или приложений. На этот раз я ...

Подборка свежих эффектов, интересных идей и полезных наработок. SVG-рисунок при прокрутке Необычный слайдер в стиле ползунка Многоугольники Удерживая курсором, фигуры можно перемещать. Обратите внимание, что их цвет меняется в зависимости от положения относительно друг друга (красный, зеленый, синий).Технологии: canvas, JS, Pixi.js.Автор: Блейк Боуэн (@osublake) Посмотреть живой пример Анимация «Старцы» по мотивам Лавкрафта Разворот книги на CSS Поворот карточек на CSS Эффект ...

Подборка свежих эффектов, интересных идей и полезных наработок. Трехмерный городок Кликом и удерживанием курсора можно «крутить» пейзаж.Эффектнее смотрится в полностраничном режиме.Технологии: canvas, JS.Автор: Дэйв ДеСандро (@desandro) Посмотреть живой пример Перетасовка карт на Vue Кнопкой Shuffle колода перетасовывается. Кнопками Slow — Medium — Fast можно управлять скоростью.Технологии: CSS, Vue.js.Автор: Hassan Dj (@itslit) Посмотреть живой пример Анимация страницы отписки от рассылки Генератор домиков ...

Подборка свежих эффектов, интересных идей и полезных наработок. CSS-иллюстрация «Спортсменка» По клику на кнопки «Run» и «Walk» девушка переходит на бег или ходьбу.Нижние кнопки управления меняют среду и образ девушки, а ползунком можно управлять скоростью движения.Эффектнее смотрится в полностраничном режиме.Технологии: CSS, CSS-переменные, CSS-анимация, CSS-трансформации.Автор: White Pallet (@WhitePallet) Посмотреть живой пример Имитация экрана Автор демонстрирует, как CSS-функция matrix3d() может применяться с целью ...

Подборка свежих эффектов, интересных идей и полезных наработок. «Волк Шредингера» Кликом справа или слева вы изменяете ширину синего блока.Технологии: 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 ...