Скрипт плавной смены background-image

@xokkis · Регистрация: 10.10.2014

Студворк — интернет-сервис помощи студентам

Добрый день, ищу код/скрипт по плавной смене backgraung-image. Если есть такие темы на форуме то пришлите ссылкочку, мои поиски не нашли результатов. За ранее спасибо

@AmateR62 · 01.03.2016, 00:48

Можно сделать через css3 свойство transition:

HTML5
1
<div class="element"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div.element {
  height: 250px;
  width: 400px;
  background: url([url]http://www.moymonitor.ru/3d-kartinki/image.raw?view=image&type=img&id=770[/url]) no-repeat;
  border: 1px solid rgba(175,175,175,0.7);
  
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
 
div.element2 {
   background: url([url]https://brightwallpapers.com/Uploads/7-10-2014/48416/thumb-1920x1200-sign-like-facebook-minimalism.jpg[/url]) no-repeat; 
  
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

JavaScript
1
2
3
4
5
$(function(){
  $('div').hover(function() {
    $( this ).toggleClass( 'element2' );
  });
});

Песочница: http://codepen.io/AmateR/pen/XdJjLJ

@xokkis · 01.03.2016, 16:12 **[ТС]**

AmateR62, Мне требуется сделать меняющийся по времени фон на сайте например через каждые 10-20 секунд происходила бы смена фона

@AmateR62 · 01.03.2016, 16:15

Значит еще берите метод setInterval()

Грубо говоря, предыдущий пример:

JavaScript
1
2
3
4
5
$(function(){  
  setInterval(function() {
    $( 'div' ).toggleClass( 'element2' );
  }, 2000);
});

http://codepen.io/AmateR/pen/XdJjLJ

@xokkis · 01.03.2016, 16:22 **[ТС]**

AmateR62, можно ли это использовать как то под <html> ?

@AmateR62 · 01.03.2016, 16:23

Сообщение от xokkis

AmateR62, можно ли это использовать как то под <html> ?

Не понял вопроса... фон страницы?

@xokkis · 01.03.2016, 16:26 **[ТС]**

AmateR62, Да, что бы не делать div через весь сайт

@AmateR62 · 01.03.2016, 16:28

Конечно можно, принцип тот же

@xokkis · 01.03.2016, 20:31 **[ТС]**

AmateR62, а теперь вопрос для очень тупых как увеличить кол-во картинок

а то что то у меня не получается с JS - http://codepen.io/

Добавлено через 2 часа 6 минут
AmateR62, Как сделать более 2 картинок например 3-4

Добавлено через 1 час 52 минуты
Огромное спасибо!

@AmateR62 · 01.03.2016, 20:41

Можно вот так... но не оптимальный скрипт, надо подделать

HTML5
1
2
3
<body class="element0">
  <div>какой то текст</div>
</body>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
body { 
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  color: white;
}
 
.element0 {
  background: url([url]http://www.moymonitor.ru/grafika/image.raw?view=image&type=img&id=10624[/url]) no-repeat;
}
 
.element1 {
  background: url([url]http://www.moymonitor.ru/3d-kartinki/image.raw?view=image&type=img&id=770[/url]) no-repeat;
  
}
 
.element2 {
   background: url([url]https://brightwallpapers.com/Uploads/7-10-2014/48416/thumb-1920x1200-sign-like-facebook-minimalism.jpg[/url]) no-repeat; 
  
}
 
.element3 {
  background: url([url]http://www.desktops4wallpaper.com/image_gallery/vista_wallpaper_33/021_top_vista_xp_wallpapers_20090713_1384125596.jpg[/url]) no-repeat; 
  
}

JavaScript
1
2
3
4
5
6
7
8
9
10
$(function(){
  var count = 0;
  setInterval(function() {
    if ( count == 0 ) $( 'body' ).removeClass( 'element3' );
    $( 'body' ).removeClass( 'element'+count );
    count++;
    $( 'body' ).addClass( 'element'+count );
    if ( count==3 ) count = 0;
  }, 2000);
});

@cp7 · 27.06.2016, 11:25

AmateR62, подскажите пожалуйста, как сделать тоже самое не для body, а для блока <div class="element0">?
Спасибо )

Добавлено через 18 минут
Пробовал

HTML5
1
<div id="elements" class="element0">

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(function(){
  var div = document.getElementById('elements');
  var count = 0;
  setInterval(function() {
    if ( count == 0 ) $( 'div' ).removeClass( 'element3' );
    $( 'div' ).removeClass( 'element'+count );
    count++;
    $( 'div' ).addClass( 'element'+count );
    if ( count==3 ) count = 0;
  }, 2000);
});

Но, фон все равно присваивается всем блокам

@sad67man · 27.06.2016, 12:40

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(function(){
  var div = document.getElementById('elements');
  var count = 0;
  setInterval(function() {
    if ( count == 0 ) $( div ).removeClass( 'element3' );
    $( div ).removeClass( 'element'+count );
    count++;
    $( div ).addClass( 'element'+count );
    if ( count==3 ) count = 0;
  }, 2000);
});

@cp7 · 27.06.2016, 12:44

sad67man, большое спасибо, работает )

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@xokkis 0 / 0 / 0 Регистрация: 10.10.2014 Сообщений: 27

	Скрипт плавной смены background-image 29.02.2016, 18:36. Показов 12607. Ответов 12 Метки нет (Все метки) Добрый день, ищу код/скрипт по плавной смене backgraung-image. Если есть такие темы на форуме то пришлите ссылкочку, мои поиски не нашли результатов. За ранее спасибо 0

@xokkis 0 / 0 / 0 Регистрация: 10.10.2014 Сообщений: 27
	01.03.2016, 16:12 [ТС]
	AmateR62, Мне требуется сделать меняющийся по времени фон на сайте например через каждые 10-20 секунд происходила бы смена фона 0

@xokkis 0 / 0 / 0 Регистрация: 10.10.2014 Сообщений: 27
	01.03.2016, 16:22 [ТС]
	AmateR62, можно ли это использовать как то под <html> ? 0

@xokkis 0 / 0 / 0 Регистрация: 10.10.2014 Сообщений: 27
	01.03.2016, 16:26 [ТС]
	AmateR62, Да, что бы не делать div через весь сайт 0

@AmateR62 118 / 118 / 87 Регистрация: 24.02.2014 Сообщений: 404
	01.03.2016, 16:28
	Конечно можно, принцип тот же 0

@xokkis 0 / 0 / 0 Регистрация: 10.10.2014 Сообщений: 27
	01.03.2016, 20:31 [ТС]
	AmateR62, а теперь вопрос для очень тупых как увеличить кол-во картинок а то что то у меня не получается с JS - http://codepen.io/ Добавлено через 2 часа 6 минут AmateR62, Как сделать более 2 картинок например 3-4 Добавлено через 1 час 52 минуты Огромное спасибо! 0

@cp7 0 / 0 / 0 Регистрация: 27.06.2016 Сообщений: 2
	27.06.2016, 12:44
	sad67man, большое спасибо, работает ) 0