Современные анимационные фоны

Сегодня рассмотрим интересные решения по созданию различных анимационных фонов для ваших страниц. Сразу скажу, что не стоит сильно увлекаться и использовать данные технологии только при необходимости, т.к. все-таки создается дополнительная нагрузка на компьютер пользователя.

Итак, давайте приступим к рассмотрению.

Осенний листопад

Вот такой интересный анимационный эффект падающих листьев. Можно поэкспериментировать с настройками и задать частоту и скорость падения листьев. Рекомендую к изучению.

See the Pen qrmZoN by Denis (@soladiem) on CodePen.28329

Квадратно-кубический фон

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

See the Pen Square-cubic by Denis (@soladiem) on CodePen.28329

Шторм из частиц

По черному фону кружатся частицы по заданному алгоритму. По аналогии можно сделать на фоне эффект падающего или кружащегося снега.

See the Pen Particle Storm by Denis (@soladiem) on CodePen.28329

Танцующие пятна

Полупрозрачные пятна различных размеров, танцующие вверх и вниз. Довольно красиво смотрится данный фон.

See the Pen Bokeh Pattern by Denis (@soladiem) on CodePen.28329

Фон из кругляшков

Вот еще интересный фоновый эффект, состоящий из кругляшков. Как увлекательно и эпатажно смотрится на фоне небоскребов.

See the Pen Circular background by Denis (@soladiem) on CodePen.28329

Звездное небо

Простой и элегантный фон в виде звездного неба. Поэкспериментируйте с настройками, если вам необходимо добавить больше звезд или увеличить частоту падающих звезд.

See the Pen Starry sky by Denis (@soladiem) on CodePen.28329

Плавающие треугольники

Не знаю. кому может пригодиться данный фоновый эффект, но все-таки размещу. Никогда не знаешь, что может пригодиться в жизни ;-)

See the Pen Floating Triangles by Denis (@soladiem) on CodePen.28329

Фон из слов

Фон из заранее определенных слов. Напоминает облако тегов. Возможно, в каком-то из проектов и такое пригодится вам. Забираем.

See the Pen Background of words by Denis (@soladiem) on CodePen.28329

Геометрия фона

Вот такое вот интересное искажение фона. Попробуйте по изменять настройки как вам нужно.

See the Pen Geometry by Denis (@soladiem) on CodePen.28329

Дождь по стеклу

Прекрасный эффект капелек дождя, бегущих по стеклу. Существует множество вариантов отображения для данного эффекта. Рассмотрим все 5 примеров ниже.

Пример 1.

See the Pen Rain on the glass. Demo 1 by Denis (@soladiem) on CodePen.28329

Пример 2.

See the Pen Rain on the glass. Demo 2 by Denis (@soladiem) on CodePen.28329

Пример 3.

See the Pen Rain on the glass. Demo 3 by Denis (@soladiem) on CodePen.28329

Пример 4.

See the Pen pePEpd by Denis (@soladiem) on CodePen.28329

Пример 5.

See the Pen Rain on the glass. Demo 5 by Denis (@soladiem) on CodePen.28329

Пузырьковый фон

Хороший фон из пульсирующих пузырьков. Можно интересно поиграться с настройками.

See the Pen Bubble background by Denis (@soladiem) on CodePen.28329

Шатающаяся лампочка

Обычный фон с тремя шатающимися лампочками.

See the Pen Wobbly light bulb by Denis (@soladiem) on CodePen.28329

Существует огромное множество подобных решений. Постепенно я планирую добавлять новые и новые примеры. Спасибо за ваше внимание и до новых встреч!