Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.81/64: Рейтинг темы: голосов - 64, средняя оценка - 4.81
0 / 0 / 0
Регистрация: 10.10.2014
Сообщений: 27

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

29.02.2016, 18:36. Показов 12607. Ответов 12
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день, ищу код/скрипт по плавной смене backgraung-image. Если есть такие темы на форуме то пришлите ссылкочку, мои поиски не нашли результатов. За ранее спасибо
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
29.02.2016, 18:36
Ответы с готовыми решениями:

Подключение плавной смены картинки
Использую следующий скрипт для плавной смены картинки в header`е: <script type="text/javascript"...

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

Скрипт плавной смены картинок при нажатии
Добрый народ! Помогите! Нужен скрипт, который бы плавно сменял изображения при нажатия на ссылки, которые прописаны в ручную. И после...

12
 Аватар для AmateR62
118 / 118 / 87
Регистрация: 24.02.2014
Сообщений: 404
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
0
0 / 0 / 0
Регистрация: 10.10.2014
Сообщений: 27
01.03.2016, 16:12  [ТС]
AmateR62, Мне требуется сделать меняющийся по времени фон на сайте например через каждые 10-20 секунд происходила бы смена фона
0
 Аватар для AmateR62
118 / 118 / 87
Регистрация: 24.02.2014
Сообщений: 404
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
0
0 / 0 / 0
Регистрация: 10.10.2014
Сообщений: 27
01.03.2016, 16:22  [ТС]
AmateR62, можно ли это использовать как то под <html> ?
0
 Аватар для AmateR62
118 / 118 / 87
Регистрация: 24.02.2014
Сообщений: 404
01.03.2016, 16:23
Цитата Сообщение от xokkis Посмотреть сообщение
AmateR62, можно ли это использовать как то под <html> ?
Не понял вопроса... фон страницы?
0
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
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
 Аватар для AmateR62
118 / 118 / 87
Регистрация: 24.02.2014
Сообщений: 404
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);
});
0
0 / 0 / 0
Регистрация: 27.06.2016
Сообщений: 2
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);
});
Но, фон все равно присваивается всем блокам
0
 Аватар для sad67man
2600 / 1504 / 689
Регистрация: 23.08.2015
Сообщений: 3,804
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);
});
1
0 / 0 / 0
Регистрация: 27.06.2016
Сообщений: 2
27.06.2016, 12:44
sad67man, большое спасибо, работает )
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
27.06.2016, 12:44
Помогаю со студенческими работами здесь

Эффект плавной смены контента
Как сделать, чтобы предыдущее содержимое контейнера плавно переходило в обновляемое ? Или чтобы затуманивалось и снова прояснялось ?

Скрипт плавной прокрутки сайта
Как можно проще всего реализовать плавную прокрутку к следующей секции как на этом сайте при нажатии на стрелку: http://callibri.ru/ ?

Эффект плавной смены одного изображения другим
Доброго времени суток! Очень нуждаюсь в Вашей помощи. Нужно сделать чтобы при наведении на изображение оно плавно, снизу вверх менялось на...

Работа с background-color,background-image
Добрый день ув. пользователи! Подскажите пожалуйста, можно как-то сделать, что бы div, которому прописывают правила...

Очередность border-image и background-image у вложенных элементов
Я работаю с одной графической библиотекой для настольных приложений, в которой пользовательский интерфейс задаётся при помощи CSS. Опыта в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Новые блоги и статьи
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 . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru