Скрипт плавной смены 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, большое спасибо, работает )

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

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

	Скрипт плавной смены background-image 29.02.2016, 18:36. Показов 12686. Ответов 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