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

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

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

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

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

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

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

Комменты

  • Не работает. А жаль. Очень нужно сделать меняющийся фон.

  • Решил проблему я лелея.
    Я сделал просто гиф фон с задержкой около 5 минут и поставил себе в магазин.
    Но все равно спасибо за ваш совет))

  • Как сделать разный фон сайта в разных РАЗДЕЛАХ

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

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

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

    • Дмитрий Валак: 05-02-2013 в 16:03

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

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

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

    }

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

  • 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>

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

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

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

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

    • Дмитрий Валак: 07-08-2012 в 8:01

      Попробуйте сделать так же как в уроке. Т.е все 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>
     
    Может ли здеси играть роль версии библиотек? может ли в этом быть ошибка?

     

    • Дмитрий Валак: 06-08-2012 в 11:57

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

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

    • Дмитрий Валак: 06-08-2012 в 11:11

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

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

    • Дмитрий Валак: 18-06-2012 в 14:02

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

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

    • Дмитрий Валак: 04-06-2012 в 4:59

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