Подборка эффектов на html, css, js. Сделаем интерфейс интереснее.

Подборка эффектов на html, css, js. Сделаем интерфейс интереснее.
10.03.2017 Александр

Небольшая подборка эффектов (с исходным кодом) html, css, js для оформления веб-сайтов. Наслаждайтесь, копируйте, используйте!

Анимированные частицы на чистом css (без js).

Мы привыкли, что если используем эффект частиц, то обычно прибегаем к помощи canvas и js. Автор представил альтернативной вариант на чистом CSS. Конечно, код после перекомпиляции из SCCS особой лаконичностью не порадует. Возможно, данное решение может пригодиться, если где-то принципиально нужно отказаться от джава скрипта. Да-да, на дворе 2017 год. Но всё же. Из художественной части. Мне лично понравился вариант снега наоборот. Выглядит своеобразно.

Если с мобильного устройства не видите демо, то нажмите в самом низу страницы “Просмотреть полную версию сайта”. Технология AMP не позволяет выводить тяжёлый код в облегчённый вариант мобильной версии.

1

Стрельба из лука.

Если на вашем сайте посетителю приходится ждать (например, ответа на тикет) или же клиент попал на страницу 404, то самое время дать посетителю отдохнуть и получить приятные эмоции от нахождения на вашем ресурсе. Принцип управления как в энгри бёрдс. Наслаждайтесь! =)

1

Прелодэры на CSS

Если сайт использует прелодэры, то чаще всего выглядят они очень банально. Вот вам альтернатива, которая способна освежить значок загрузки страницы. Анимация весьма агрессивная и полагаю, что не особо понравится людям страдающим эпилепсией.

1

Реклама книги/журнала.

При наведении курсора обложка приоткрывается и можно увидеть первый разворот. Пожалуй, подойдёт для чего-то глянцевого. JS не используется.

1

Частицы с эффектом Боке.

Выглядит очень эффектно. Хорошо подойдёт для заднего фона. Используются css+js. Перед использованием советую замедлить скорость движения частиц, по моему мнению, это придаст эффекту большую реалистичность (scss с 48 по 58 стоку).

1

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

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.