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

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

Карта мира

Генерация карты мира с возможностью экспорта в SVG/HTML/IMAGE.

Карта мира

Посмотреть живой пример


Калькулятор

Адаптивный калькулятор на JS. Автор: Дэн МакГенри (@denmch)

Калькулятор

Посмотреть живой пример


Радужный коллайдер

Хаотично движущиеся разноцветные частицы на JS. При встрече отталкиваются друг от друга. Автор: Матей Копот (@MateiCopot)

Радужный коллайдер

Посмотреть живой пример


Кнопка

Ховер-эффект в виде рассчения кнопки на CSS. Автор: 42EG4M1 (@42EG4M1)

Кнопка

Посмотреть живой пример


Кто проживает на дне океана?

Спанч Боба запечатлели при помощи CSS. Автор: Рейчел Булл (@rachel_web)

Кто проживает на дне океана?

Посмотреть живой пример


Частицы

Анимация в виде пульсирующих точек, мгновенно образовывающих связи между друг другом, на JS. Автор: Матей Копот (@MateiCopot)

Частицы

Посмотреть живой пример


Часы

Часы, выполненные на SVG. Отображают текущее время. Автор: Icebob (@Icebobcsi)

Часы

Посмотреть живой пример


Loader…

Неоновый loader в canvas. Автор: Алекс Пермяков(@alexpierre)

Loader...

Посмотреть живой пример


Гексогональная волна

Canvas с интерактивной масшатбируемой радужной гексогональной волной. Автор: Матей Копот (@MateiCopot)

Гексогональная волна

Посмотреть живой пример


Немного гипноза

Интерактиная анимация черно-белых овалов, передвигающихся друг относительно друга в canvas. Автор: IRIS QU (@irisqu)

Симулятор жидкости

Посмотреть живой пример


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

2 Комментарии

  1. Сергей

    Как всегда отлично, но «Карта мира» просто поразила — это лучшее не за неделю, а пожалуй за год!

  2. Максим Усачев

    Согласен с вами, действительно круто! Но благодарить надо нашего коллегу Николая Шабалина, который делает такие прекрасные подборки каждую неделю:)

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

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

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

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