Фон для сайта движущийся – Трёхмерный фон для сайта в реальном времени на JavaScript при помощи three.js / Habr

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

Также анимированные бекграунды (фоны) используются для выделения функциональных, навигационных элементов сайта.

Поэтому для вашего вдохновения в этой статье собрано 21 великолепный пример эффектов анимации фона сайта.

Содержание

• 1 Sakura
• 2 Rain Effect
• 3 Interactive mosaic background
• 4 Color Changing
• 5 Wave Animation
• 6 Landscape animation experiment
• 7 Animated Background Header
• 8 Floating Cloud Background
• 9 Parallax Star background in CSS
• 10 Pure CSS3 Gradient Background Animation
• 11 Canvas Parallax Skyline
• 12 Jquery & CSS3 background
• 13 Parallax backgrounds with walk cycle
• 14 Misty
• 15 Lowpoly Dynamic
• 16 Clean Slider With Curved Background
• 17 Change background colour with fade animation as you scroll
• 18 Ambient
• 19 Particles
• 20 Scrolling Terrain and Shooting Stars
• 21 Crystal Caves
  • 21.1 ЭТО ИНТЕРЕСНО!

Sakura

Rain Effect

Interactive mosaic background

Color Changing

Wave Animation

Landscape animation experiment

Animated Background Header

Floating Cloud Background

Parallax Star background in CSS

Pure CSS3 Gradient Background Animation

Canvas Parallax Skyline

Jquery & CSS3 background

Parallax backgrounds with walk cycle

Misty

Lowpoly Dynamic

Clean Slider With Curved Background

Change background colour with fade animation as you scroll

Ambient

Particles

Scrolling Terrain and Shooting Stars

Crystal Caves

ЭТО ИНТЕРЕСНО!

Анимированные фоны для блоков и страниц — ч.2

В этой заметке представлено несколько вариантов для анимации фона.

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

В примерах анимация накладывается в области

Вариант 1:

<canvas></canvas>

#bubbles { background:#477ab9; width:100%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #bubbles:hover { background:#3D689C; }

<script src=»http://atuin.ru/js/art/bubbles.js» type=»text/javascript»></script>

Должен быть подключен скрипт фона

Вариант 2:

<canvas></canvas>

#lines { background:#477ab9; width:100%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #lines:hover { background:#3D689C; }

<script src=»http://code.jquery.com/jquery-1.12.4.min.js» type=»text/javascript»></script> <script src=»http://atuin.ru/js/art/lines.js» type=»text/javascript»></script>

Должна быть подключена библиотека jQuery и скрипт фона

Вариант 3:

<canvas></canvas>

#floodlight { background:#477ab9; width:100%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #floodlight:hover { background:#3D689C; }

<script src=»http://atuin.ru/js/art/floodlight.js» type=»text/javascript»></script>

Должен быть подключен скрипт фона

Вариант 4:

<canvas></canvas>

#stars { background:#477ab9; width:100%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #stars:hover { background:#3D689C; }

<script src=»http://atuin.ru/js/art/stars.js» type=»text/javascript»></script>

Вариант 5:

<canvas></canvas>

#painting { background:#477ab9; width:100%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #painting:hover { background:#3D689C; }

<script src=»http://atuin.ru/js/art/painting.js» type=»text/javascript»></script>

Должен быть подключен скрипт фона

Смотрите также: Анимированные фоны — часть 1

Анимационные фоны для сайта

Доброе время суток. Перед Вами очень хорошая сборка анимационных фонов для сайта в семи разных вариациях. Анимация в основном связана с передвижением, появлением и исчезновением фигур, слов или рисунков. Я буду описывать каждый эффект по отдельности и внизу каждого анимационного фона будет кнопка «Демо» и кнопка «Скачать», а в низу сайта кнопка для скачивания всех вариаций + бонус: одностраничник, на котором все эти фоны представлены на одно странице. И так, поехали:

Анимационный фон, который я назвал «Кругляшки»

У нас на фоне стоит изображение, которое автоматически подгоняется под разрешение монитора, а на этом фоне «плавают» прозрачные круги разных размеров. Они то появляются, то исчезают. Появление, передвижение и исчезновение абсолютно рандомное. Смотрится стильно, глаз не напрягает и может сделать Ваш сайт более живым. Только прошу — не ставьте такой анимационный фон на все что угодно, так как если сайт чисто информативный и на нем много информации, именно текстовой, то такой фон будет немного отвлекать и рассеивать внимание. 

Анимационный фон «Звездное небо»

Реализация звездного неба с помощью jquery, html и css. Анимация достаточно качественная, можно заменить фоновую картинку на ночное небо и эффект будет еще круче. Пробуйте :))

Фоновый эффект «Квадратики»

Неплохой эффект 3D, особенно с тем изображением, которое уже стоит в демо версии. Может показаться топорно, но вы всегда можете поэкспериментировать и сделать с помощью css квадраты или другие фигуры и сделать так, как вам нравится. Данный анимационный эффект работает по такой же схеме, как и остальные эффекты.

Анимация фона треугольниками

Наверное самая неудачная реализация этого эффекта, но кому то может пригодиться!

Анимационный фон под кодовым названием «Слова»

Пошло что-то новенькое. Здесь реализована анимация слов, которые можно менять в js файле. Смотрится интересно и думаю многим может пригодится. Думаю, что вариантов использовать такой фоновый эффект на сайте масса. Забираем!

Фоновый эффект с ласковым названием «Пузырьки»

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

Самый интересный анимационный фон «Рисунок»

Подобно, развивающейся на ветру, ленточке этот фоновый эффект создает впечатление, что эта «фигура» рисуется в онлайн режиме. Красиво переплетаясь, этот рисунок имеет свойство увеличиватся в размерах и примерно через минуту он покроет всю поверхность фона. Смотрите демо и скачивайте!

Не думаю, что вы никогда не искали что то подобное, вот мне лично всегда хотелось какие то промо сайты украшать анимационным фоном примерно таким, как «Кругляшки». В этой сборке вы найдете фоновый эффект под себя.

А это как раз то, о чем я говорил. Если вы нажмете на «Демо», то попадете на страницу с полноценным сайтом одностраничником, где представлены все варианты-эффекты анимации фона в этой статье. А если нажмете на кнопку «Скачать», то скачаете архив со всеми вариантами анимационных фонов и плюс шаблон сайта одностраничника. Всего хорошего!

background » Скрипты для сайтов

Генератор случайных разноцветных кружков

Генератор на canvas разноцветных рандомных кругов.

Низко полигональный генератор фона

Генератор фона из треугольников с возможностью настройки глубины, вариативности, цветов, градиента. Полученный результат можно скачать, как изображение любого выбранного размера

Bubbly — анимированный фон из пузырьков на canvas

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

SVG маска для фонового изображения

SVG маска для изображения. Удерживая левую кнопку мышки область маски будет расти и изображение вернется к своему исходному состоянию. Перемещая курсор мыши, область под ним будет отображать исходную картинку без маски.

Капельный фон

Фон с эффектом перетекающих капель. Сделано с помощью SVG масок и CSS анимации.

Анимированный градиентный фон на SVG

Задний фон с анимированным градиентом в SVG

CSS3 анимация звездного ночного неба

Несколько экспериментов над фоном и его анимацией с помощью только CSS3. Статичный и анимированный фон звездного неба и анимированный фон падающего снега.

Делаем сами CSS3 фон

Онлайн сервис для создания CSS3 фонов. Можете сами сделать фон из полосочек, параметр каждой задается в редакторе. После того, как фон готов, просто скопируйте полученный код.

CSS3 узор для фона

Ресурс на котором можно присмотреть для своего сайта бесшовный фон на CSS3, а не привычную всем картинку. Есть очень симпатичные бэкграунды.

Полноразмерное фоновое изображение

Всё что нам понадобится — это изображение, которое будет использоваться в качестве фонового. При изменении окна браузера, будут изменяться и размеры нашего фонового изображения. Плагин проверен в Safari, Chrome, Opera, IE8 и Firefox.

Меню с анимацией фона кнопки

Вид меню с различными эффектами анимации фона. Смена фона происходит, либо как слайд — справа налево, сверху вниз, либо происходит плавное изменение цвета.

abMenu — меню с анимированным фоном

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

• Назад
• 1
• 2
• Вперёд

Фон с движущимися трапециями

let objectCount = 100;

let canbg = «#337AB7»;

let canheight = 500;

let canwidth = document.getElementById(‘lines’).offsetWidth;

let objects = [];

class FlowObjects {

    constructor(x, width, flowAngle, opacity) {

        this.x = x;

        this.initX = x;

        this.y = random(-50, height);

        this.initY = this.y;

        this.width = width;

        this.initWidth = width;

        this.height = this.width * 3;

        this.opacity = opacity;

        this.v = opacity;

        this.angle = flowAngle;

    }

    update() {

        this.x += this.v;

        this.y = tan(flowAngle) * 1 + this.y;

        if (this.y — this.height / 2 >= height) {

            this.reset();

        }

        if (this.x — this.width / 2 >= width) {

            this.reset();

        }

    }

    reset() {

        this.x = this.initX;

        this.y = 0 — this.height / 2;

        this.width = this.initWidth;

    }

    draw() {

        push();

        translate(this.x, 0);

        noStroke();

        fill(`rgba(191, 226, 255, ${this.opacity})`);

        shearX(this.angle);

        rect(0, this.y, this.width, this.height, 5);

        pop();

    }

    perspective({ movementX: movX }) {

        this.x += movX * this.opacity * 0.1;

    }

}

function setup() {

    let myCanvas = createCanvas(canwidth, canheight);

    myCanvas.parent(«lines»);     

    rectMode(CENTER);

    flowAngle = PI / 6;

    for (let i = 0; i < objectCount; i++) {

        objects.push(

        new FlowObjects(

        random(-width, width),

        floor(random(15, 40)),

        PI / 8,

        random()

        )

        );

    }

}

function draw() {

    background(canbg);

    for (let i = 0; i < objects.length; i++) {

        objects[i].update();

        objects[i].draw();

    }

    noFill();

}

function mouseMoved(event) {

    for (let i = 0; i < objects.length; i++) {

        objects[i].perspective(event);

    }

}

window.addEventListener(‘resize’, () => {

    objects=[];

    setup();

}

);    

Фоновые эффекты для сайта (движение фона и тд)

1. jQuery плагин «Parallax 0.2»

Плагин поможет вам реализовать эффект объемного движения фона при перемещении мыши по экрану.

2. jQuery плагин «Backstretch»

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

3. Parallax

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

4. Фоновый эффект на jQuery

Фоновый эффект (движение по слоям). На демонстрационной странице поводите мышкой по экрану, чтобы увидеть эффект в действии.

5. Spritley

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

6. Фоновый эффект «Vertical Parallax»

Эффект вертикальной прокрутки фоновых слоев. Каждый слой движется с разной скоростью, в итоге получается довольно интересный фоновый эффект.

7. Фоновая jQuery анимация на странице

Анимированный jQuery эффект при перемещении курсора по экрану.

Движущиеся облака на CSS

.cloud {

    overflow: hidden;

    position: relative;

    width:100%;

    padding-bottom: 56.25%;

    height: 0;

    background: url(mountain.jpg);

    background-size: cover;

}

.cloudcontent {

    position: relative;

    padding:30px;

    color: #337AB7;

    font-size:22px;

    font-weight:bold;

    z-index:100;

}

.cloud img {

    width: 100%;

    left: 0;

    top: 0;

    position: absolute;

    -webkit-user-select: none;

    -moz-user-select: none;  

    -ms-user-select: none;

    user-select: none;    

    pointer-events: none;

}

@-webkit-keyframes animCloud {

    from {

        -webkit-transform: translateX(100%)

    }

    to {

        -webkit-transform: translateX(-100%)

    }

}

@-moz-keyframes animCloud {

    from {

        -moz-transform: translateX(100%)

    }

    to {

        -moz-transform: translateX(-100%)

    }

}

@keyframes animCloud {

    from {

        -webkit-transform: translateX(100%);

        -moz-transform: translateX(100%);

        -ms-transform: translateX(100%);

        -o-transform: translateX(100%);

        transform: translateX(100%)

    }

    to {

        -webkit-transform: translateX(-100%);

        -moz-transform: translateX(-100%);

        -ms-transform: translateX(-100%);

        -o-transform: translateX(-100%);

        transform: translateX(-100%)

    }

}

.cloud1 {

    -webkit-animation: animCloud 20s infinite linear;

    -moz-animation: animCloud 20s infinite linear;

    animation: animCloud 20s infinite linear

}

.cloud2 {

    -webkit-animation: animCloud 40s infinite linear;

    -moz-animation: animCloud 40s infinite linear;

    animation: animCloud 40s infinite linear

}

.cloud3 {

    -webkit-animation: animCloud 60s infinite linear;

    -moz-animation: animCloud 60s infinite linear;

    animation: animCloud 60s infinite linear

}

.cloud4 {

    -webkit-animation: animCloud 80s infinite linear;

    -moz-animation: animCloud 80s infinite linear;

    animation: animCloud 80s infinite linear

}