Главная / JQuery, Полезное / Меняющийся фон сайта

Меняющийся фон сайта

В этом уроке мы сделаем меняющийся фон сайта при помощи скрипта CrossSlide.

Рассмотрим 3 разных вида эффекта изменения фона:

  • Плавное появление и исчезания изображений фона
  • Перемещение изображения вверх\низ
  • Эффект приближения и отдаления

Выставляйте качество 480р.

Скачать скрипт.

Если урок Вам был полезен, нажмите на любую кнопку ниже— буду благодарен :) Всем удачи и следите за ходом событий ;)


Обсуждение. Оставлено 21 коммент.

А можно сделать так, чтобы ещё и текст менялся на сайте вместе с каждой картинкой? Примерно как на сайте Еврохима. Я применил ваш скрипт, чтобы сделать как у них менялся фон, только нужно чтоб ещё как у них на каждой картинке надписи менялись.
Или может поясните как это можно сделать отдельным дивом, но настроить чтоб это было синхронно с картинками? Спасибо.

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

Привет! А как сделать, чтобы height была по размеру экрана? Когда в #placeholder вместо например 700px вводишь 100% или auto, то фон вообще перестает отображаться.  Не хочется чтобы был скролл или кусок без фона на мониторах с разным разрешением. Заранее спасибо :)

Здравствуйте.
Так сложно сказать, пробуйте играть с CSS, попробуйте этому div’у поставить display:table-cell; и тогда, возможно, он примет высоту.

Дмитрий, у меня возникла проблема, делал скрипт по самому первому примеру, всё указал сделал форму в CSS и вставил скрипт в код страницы, но вот картинки не отображаются! помогите, буду благодарен

Здравствуйте.
Наверно, что-то забыли подключить, раз не работает. Проверьте все еще раз. Подключен ли сам скрипт – самое важное. Мне писали, что все сделано правильно но не работает, хотя на самом деле оказалось, что даже скрипт не подключили…

вот пример моего кода:
1. Подключился к беблиотеке, потом тут у меня календарь с беблиотеки и последнее скрипт cross-slide:
 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.cross-slide.js"></script>
 
2.вот css:
 

#ss{
background-color:#CCC;
border-radius: 15px;
border:#999 5px solid;
 
}
 
#is{
width:450px;
height:250px;
margin-left:14%;
position:relative;
}
 
3. А вот так выглядит код страницы:

 <div id="ss"> 
        <div id="is"> 
        <script>
$(function() {
 
$('#is').crossSlide({
  speed: 2,
  fade: 1
}, [
  { src: 'img/lekarstva1.jpg' },
  { src: 'img/13817.jpg' },
  { src: 'img/tabletki.jpg' },
  { src: 'img/gomeo.jpg' }
]);
        });
        </script>
                 </div>
                     </div>
 
Может ли здеси играть роль версии библиотек? может ли в этом быть ошибка?

 

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

а что же может быть в моём случае? посоветуете??)

Попробуйте сделать так же как в уроке. Т.е все CSS стили возьмите из урока и т.д, а потом сравните, что у Вас не сходится.

У меня возникла проблема с отображением на разных мониторах. Нужно что бы всегда было 100%. "display:table-cell" – не помогло.
Заранее спасибо за помощь.

Не зная структуры сайта, врятли смогу что-то подсказать.

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

Честно – я не знаю. Нужно просто пробовать :)

Не работает (( может проще урок не в видео а какой нибудь примерный исходник выложите? Очень надо!
 
заранее спасибо!

1) даа, конечно жаль что "display:table-cell" не помогает для подстройки по разрешению экранов =(
2) ..и вот у меня почему-то незахотел встать табле между дивами. оказывается внизу страницы. есть совет по этому поводу?! (otvezemspb .ru)

<div id="bg_image">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" id="main-table">
    <tr>
        <td valign="top">
            <h1 align="center"> TEST </h1>
        </td>
    </tr>
</table>

</div>

отвечаю сам себе :)
нужно подкорректировать в фалйе *.css строки:

#bg_image{
    width:100%;
    position:absolute;
    left: 0px;
    top: 0px;
    height: 490px;

}

осталось разобраться с растяжкой

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

Этот скрипт подходит больше для смены именно фона.
Если вы хотите сделать только, например, в шапке сайта, то рекомендую использовать какой-нибудь слайдер.
Например, мне нравится – nivoslider.

Прошу прощения за оффтоп!
Дмитрий, могли-бы Вы сделать маленький видео-курс о добавлении товаров в корзину и обновлении корзины без перезагрузки страницы. То-есть с помощью jQuery?
Я был бы Вам за это благодарен, особенно если это будет на основе вашего урока по созданию мини интернет магазина.

Попробовал на DLE отлично работает единственное точки убрал в названиях JS фалов, а то не хотел что то
Спасибо


Оставить комментарий

Чай с логотипом заказчика чай с логотипом. Этот домен продается здесь: telderi.ru, и еще много других