Здравствуйте, представляю Вам подборку кода, создающего красивые анимрованные фоновые изображения с потрясающими эффектами.
1. Анимированные фоны на CSS:
Скользящие анимированные фоновые изображения на CSS:
1.1. “codepen.io/tylersticka/pen/mewaqW”
Отличный эффект, когда передние изображение имеют более быструю скорость относительно изображений, расположенных на заднем фоне.
1.2. “codepen.io/lyphanghr/pen/RZKmgy”
Красивые сдигающиеся и раздвигающиеся наклонные панели.
1.3. “codepen.io/bobbykorec/pen/GpYpKY”
В данном фоне присутствует эффект параллакса + эффект прокрутки = потрясющее фоновое изображение.
Про красивые многослойные CSS фоны можете прочитать в моей статье здесь – “https://mnogoblog.ru/mnogoslojnye-css-fony-kod”.
1.4. “codepen.io/andreyshipalov/pen/YNXNPy”
Эффект бегущей строки, только созданный из изображения.
1.5. “codepen.io/jackrugile/pen/Apfyn”
Ещё одно анимированное фоновое изображение с красивыми горами и холмами.
2. Анимированные фоны с использованием JavaScript:
Вот несколько фоновых анимации, которые создаются с использованием HTML, CSS и JavaScript. Мы видим, что JavaScript вывел анимацию на совершенно новый уровень. Анимации стали динамичными и могут управляться с помощью пользовательского кода.
2.1. “codepen.io/msurguy/pen/sbIio”
Triangle Pattern Generator – это инструмент анимации для создания красивых фонов и обоев. Вы можете управлять светом и цветом фона. Вы также можете контролировать размер и срезы треугольников. Этот генератор поддерживает экспорт в форматы PNG и SVG. А SVG является векторной графикой, поэтому вы можете увеличить шаблон до любого размера, который вы хотите.
2.2. “codepen.io/wouwi/pen/Apvaq”
На данном фоне фигуры изменяются по размерам, а вращающиеся огни добавляют восхитительные эффекты к анимации. Вы можете играть с кодом самостоятельно, чтобы изменить эффекты и переходы срезов.
2.3. “codepen.io/dandenney/pen/tKsdj”
Эта фоновая анимация также имеет срезы с изменяющимися размерами и огнями. Но огни имеют разные движения и направления в отличии от предыдущего анимированного фона.
2.4. “codepen.io/jhnsnc/pen/Mprdaa”
Здесь происходит переход цветов и градиентов над треугольными формами. Каждые несколько секунд данный анимационный фон тонко изменяет градиенты освещения.
3. Анимированные фоны на Canvas:
3.1. “codepen.io/jacquelinclem/pen/udnwI”
Красивая анимация цвета точек, изменяющегося положения линий и прозрачности. Анимация состоит из HTML, CSS и JavaScript кода.
3.2. “codepen.io/pawelqcm/pen/oxPYox”
Физические значения, такие как: высота, ширина, цвет и чувствительность можно регулировать. Достаточно легко встроить на свой сайт.
3.3. “codepen.io/VincentGarreau/pen/pnlso”
Завораживающая комбинация цвета, движущихся точек и линий делает эту анимацию красивой и оригинальной.
3.4. “codepen.io/acauamontiel/pen/mJdnw”
Анимация из тематики галактики и звёзд.
3.5. “codepen.io/Munkkeli/pen/PqWBdP”
Это самый простой из всех представленных фонов. Он просто имеет несколько движущихся частиц. Изменить можно только цвета фона.
3.6. “codepen.io/jackrugile/pen/acAgx”
Красивый фейерверк.
3.7. “codepen.io/dudleystorey/pen/NbNjjX”
3.8. “codepen.io/seanseansean/pen/reQGoQ”
3.9. “codepen.io/linrock/pen/Amdhr”
Падающие конфетти.
3.10. “codepen.io/akm2/pen/Risa”
На этом всё! Красивых Вам сайтов!