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

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

Слайдер с эффектом размытия при смене изображений

Технологии: CSS анимация, трансформации, SVG фильтры, JS
Автор: Дамиан Мути (@damianmuti)

Слайдер с эффектом размытия при смене изображений Посмотреть живой пример


Анимация с человеческими фигурами и шаром

Эффекты при наведении и клике
Технологии: JS: webgl, ragdoll.
Автор: Джерард Феррандес (@ge1doot)

Анимация с человеческими фигурами и шаром Посмотреть живой пример


Анимация «Червоточина»

Технологии: canvas, three.js.
Автор: Луи Хоубрег (@Mamboleoo)

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


Подвижная Лента Мебиуса

Удерживая курсор, можно поворачивать анимацию
Технологии: canvas, three.js.
Автор: clindsey (@clindsey)

Подвижная Лента Мебиуса Посмотреть живой пример


Конструктор жука в движении

В настройках справа можно менять параметры анимации
Технологии: JS.
Автор: findoff (@findoff)

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


Анимация на CSS «Ночная прогулка»

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

Анимация на CSS Ночная прогулка Посмотреть живой пример


Движение фона у текста

Технологии: CSS анимация фонового изображения.
Автор: Зайн (@zayncollege)

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


Анимация кнопки «Отправить»

Технологии: CSS анимация и трансформации.
Автор: burnaDLX (@burnaDLX)

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


Эффект при наведении в зависимости от направления движения курсора

Технологии: CSS трансформации и clip-path.
Автор: Элмер Балбин (@elmzarnsi)

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


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

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

2 Комментарии
  1. Александр

    Последний пример классный! Я где-то похожее на одном сайте видел но с JS, на классах.

    1. SelenIT

      Справедливости ради, была реализация и на CSS, причем у нас в Рунете:). Только вместо clip-path — поворот на 45 градусов. Но использование в примере действительно эффектное!

Добавить комментарий для SelenIT Отменить ответ

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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