Анимированный фон сайта (HTML | CSS | JS)

Раздел языка JavaScript.
Аватара пользователя
FolloverDrov
Сообщения: 1

Анимированный фон сайта (HTML | CSS | JS)

Сообщение FolloverDrov » Пн июл 25, 2016 4:37 pm

Здравствуйте.
Я занимаюсь обработкой и редактированием фотографий, решил сделать свой собственный сайт-портфолио. Очень хотелось бы сделать все максимально красиво (в соответствии с родом деятельности) и вот у меня возник вопрос: Можно ли сделать фон сайта анимацией или, хотя бы, поочередную смену картинок этого самого фона ? Все делаю на HTML + CSS + JS, так как не хочу напрягаться с PHP. Если такое возможно, напишите, пожалуйста, пару вариантов, как и каким образом это можно сделать.
Заранее спасибо!
Реклама
Аватара пользователя
Slash
Администратор
Сообщения: 2028
Поблагодарили: 62 раза

Re: Анимированный фон сайта (HTML | CSS | JS)

Сообщение Slash » Пн июл 25, 2016 6:01 pm

Могу предложить вариант на JS, как сделано тут: Два меняющихся фона в одном блоке (JavaScript), основа уже есть, все остальное легко "допилить". Например, меняем фон из пяти картинок, каждые 15 секунд:

Код: Выделить всё

var num = '';             // Создаем пустую переменную
var b   = document.body;  // Обращение к тегу body
var fon = [               // Создание массива с фоновыми картинками
    '1.jpg',
    '2.jpg',
    '3.jpg',
    '4.jpg',
    '5.jpg'
];

change(); // Запускаем функцию, чтобы появился фон

// Данная функция устанавливает случайную фоновую картинку
function change() {
    num = Math.round(Math.random() * (fon.length - 1));
    b.style.background = 'url(' + fon[num] + ')';
};

setInterval(change, 15000); // Запуск функции change каждые 15 секунд   

Если есть необходимость, можно добавить или убрать несколько картинок, для этого редактируем массив fon.
Так можно изменить время обновления фона, для этого в функции setInterval, изменяем цифру 15000 (одна секунда - это 1000).

Вернуться в «JavaScript»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость