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

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

Небольшая подборка эффектов (с исходным кодом) 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 для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.