Эффект джунглей.


    Сегодня наткнулся на один сайт, фон которого скроллится при ресайзе окна браузера, прикольно, ничего не скажешь, но этого мне было мало. Поэтому, захотелось сделать так, что бы фон скроллился постоянно безо всяких гифов и флешей. Включил свою любимую музыку и… вуаля! :)
    То, что я здесь накатал использует jQuery, и писалось это очень быстро. Поэтому, сильно не пинайте :)

    Где это можно применить? Ну уж точно не на всём сайте, но для открытки либо странички-визитки\презентации — я считаю, самое оно :)


    1. HTML


    Рисунков у нас всего три, поэтому, для первого рисунка у нас есть body, для двух остальных мы создаём два дива и тут же их закрываем. Но, так как эти два дива будут просто офигеть какими большими, мы их помещаем в ещё один див:
    <div id="overflow">
    <div id="midground"></div>
    <div id="foreground"></div>
    </div>

    Само собой, для контента у нас есть отдельный див:
    <div id="content">
    <!-- content goes here -->
    </div>


    2. CSS


    Теперь приступик с стилям. мы вставили для того, чтобы обрезать ненужную часть и вместе с этим скрыть нижний скролл.
    #overflow { width: 100%; overflow: hidden; height: 500px; position: absolute; }

    Далее, собственно, рисуем эти два оставшиеся рисунка :
    #midground {
    background: transparent url(bg-mid.png) left top repeat-x;
    margin: 0; padding: 0; width: 1000%;
    position: absolute; top: 0;
    height: 600px;
    z-index: 1;
    }
    #foreground {
    background: transparent url(bg-front.png) left top repeat-x;
    margin: 0; padding: 0; width: 1000%; height: 200px;
    position: absolute; top: 0; left: -9000px;
    z-index: 2;
    }


    3. jQuery


    Думаю как подключать скрипты к страницам объяснять не нужно, поэтому я этот пункт упущу и перейду сразу к коду :

    init.js: $(document).ready(function() {
    $('#midground').animate({left: "-=9000px"}, { easing: "linear", duration:120000 });
    $('#foreground').animate({left: "+=9000px"}, { easing: "linear", duration:120000 });
    });

    И теперь объясню что это, для тех, кто не в курсе.

    1. $(document).ready — выполняется как только html/js полностью загружены.
    2. $() - это селектор в jQuery, в качестве параметра он принимает css-селекторы и xpath
    3. $.animate() - стандартная функция, принимает в себя параметры css и тип визуализации(easing)
    4. $.animate({left: "+=9000px"}) - здесь я двигаю заданный див на заданное кол-во пикселей вправо. Во второй строке - влево.
    5. {easing: "linear", duration: 120000} - тип анимации(easing) явно указали "linear", то есть, линейным, т.к. в jQuery по умолчанию стоит "swing". Он в данном случае не устраивает т.к. после начала анимации оно сперва разгоняется и уже только потом набирает нормальную скорость. duration: 120000 - думаю, self-explanatory, указано в миллисекундах.
    6. Да, анимация будет не бесконечна - крутиться оно будет две минуты, этого должно быть достаточно успеть перейти на другую страницу :)

    Хорошо, хорошо, умник, покажи нам рабочий пример.


    Пожалуйста! :)

    Проверено в : Firefox 2, Opera 9.26, Internet Explorer 7, Safari 3.0.4.
    IE 6 не проверял не работает , но в нём такой эффект лучше явно отключить - думаю, будет тормозить :)

    Комментарии 44

      +3
      Здорово! только очень грузит процессор (
        +4
        Очень важно понимать, с какой целью это делается. Если предполагается, что на сайте есть информация, которую будет читать посетитель, то двигающийся фон будет ему мешать.
        Это как новогодние JS-снежинки на сайтах. Лично я каждый раз, видя их, борюсь с желанием сразу закрыть окно, не разбираясь, о чём сайт.
          0
          Я лично тоже снежинки ненавижу. Это задумывалось сугубо как eye-candy, не более того. Можно конечно скорость движения ещё меньше поставить, тогда напрягать практически не будет.
            0
            Скорость определенно нужно уменьшать, иначе просто очень сильно отвлекает.
              0
              Для демонстрации техники скорость - самое то. Молодец, автор!
            0
            да, очень привлекает к себе внимание, трудно на тексте сконцентрироваться
            0
            По потере фокуса окном нужно анимацию тормозить, а запускать, соответственно, по получению фокуса. Это спасет отца русской демократии :)
              0
              Поправьте, пожалуйста, отступ после тега habracut.
                0
                В опере 9.5, SeaMonkey тоже нормально работает.
                Вот только то, что загрузка проца достигает 100% что на опере, что на сафари не порадовало. Слишком уж это негативный эффект. Многое из-за этого может тормозить.
                И еще - читать текст абсолютно нереально - анимация раздражает, сбивает. В особенности когда движущиеся части проползают сзади текста.
                  0
                  Давайте определимся, оно тормозит или просто грузит проц ? :) Если оно просто грузит проц, то какая разница, собственно-говоря ? У меня работает на ура.
                    0
                    Скажем так - паралельно работает компилятор, делает билд. У меня он стал работать медленнее. Вполне допускаю что это глюк моей боевой оперы, но не порадовало.

                    Но даже это не суть важно.
                    Архиватор, который попросил работать в фоновом режиме при просмотре страницы перестал работать. То есть приоритет, с которым оно обрабатывается явно выше, чем Idle.
                      0
                      "Скажем так" (с) Я конечно ничего не компилирую и не архивирую, но :)

                      Т.к. я веб-разработчик, у меня перманентно открыты как минимум 4 браузера, я их перечислил внизу топика, на всех одновременно была открыта эта страница. При этом запущен ещё целый комбайн всякого ПО, память забита до отказа и ещё Виста в придачу стоит вместе с Aero, но ничего не тормозит, хотя и конфигурация компа не такая уж и сильная. У меня оно просто выводит что проц загружен, но тормозов никаких не наблюдается.

                      А вообще как гентушник со стажем в 3 года, скажу что компиляция всегда сказывается на работе компа в целом, если приоритет не понизить :)
                        0
                        То, что ничего из открытого и активного тормозить не будет - я верю. Глазами это вижу. Если немного точнее: то, что работает не в фоне тормозить не будет, но анимация резко теряет свою привлекательно. Дрыгаться и заедать начинает - не знаю как это правильно по русски сказать. Не сильно, но глазом артефакты заметны.
                        А те приложения, что работаю в фоне с низким приоритетом начинают "тормозить". В большинстве случаев таких приложений у рядового пользователя нет, но мало-ли.

                        Вот, собственно, такие эффекты возникают на моем машине (достаточно слабой). Залипание анимации возникает если запустить приложение, которое дает заметную нагрузку на процессор.
                          0
                          Я понял о чём вы, я ж не спорю :)
                  0
                  Ну вот, теперь куча сайтов будет с крутящейся рекламой внизу/наверху :-)

                  На delfi.lv так делают кстати, как раз для показа баннера.
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      Когда увидел статью про этот эффект сразу захотелось сделать анимированную версию, но так и не смог придумать зачем это может понадобиться.
                      • НЛО прилетело и опубликовало эту надпись здесь
                          +1
                          Даешь демосцену в вебдизайн! :-)
                            0
                            Между прочим, демки на JS и Flash существуют уже давно :)
                            0
                            Красиво, но головокружительно.
                              0
                              это из-за разнонаправленного скроллинга среднего и переднего плана.
                              если бы они скроллились в одну сторону - был бы эффект "вид из окна движущегося вагона" :)
                              0
                              эм... а ничего, что как раз "эффект джунглей" вы и не реализовали?
                              задумайтесь над смыслом перемещения лиан/ветвей в одну сторону ;)
                                0
                                done ;)
                                0
                                Эффект супер, да и отличная почва для экспериментов :) Вот только ресурсоемкость несколько напрягает..
                                  0
                                  Да, было бы по-медленнее.. :)
                                    +1
                                    Молодец, конечно, что не поленился понять задницу, взять готовые решения (гуглхомпейдж, jQuery), готовую идею и показал как ты круто можешь изменять css свойства DOM элементов.

                                    IE 6 не пашет многое, не только сам эффект. В остальных эффект подтормаживает, либо грузит проц. Не говоря уже о бесполезности эффекта.

                                    Но, как я уже заметил, цель ты достигнул — рассказал всем как с помощью jQuery менять css свойства объектов.
                                      0
                                      А смещение не в одном направлении должно быть?
                                        0
                                        Теперь крутится в одну сторону :)
                                          0
                                          Открыл в IE6 - там мало того, что не работает, так ещё и канал мой забился на 100%.
                                          Эту страницу прям можно вешать на стенд уязвимостей IE6 :)
                                            0
                                            Ну я писал внизу что я эту штуку в IE6 даже не открывал. Все вместе взятое весит 400кб, кода там почти ничего - только рисунки.
                                              0
                                              Как я понял, он начинает эту фоновую картинку запрашивать в бесконечном цикле и за счёт этого и появляется такой эффект.
                                            0
                                            1. Тормозит.
                                            2. в ИЕ 6 не пашет. (и транспарент тоже)
                                            3. Если я не ошибаюсь, то можно наложить флеш на бекграунд, может тоже выйти довольно мило.

                                            Но идея классная, оценил. Так держать.
                                              0
                                              1. У меня - нет :)
                                              2. Смотреть самую последнюю строку топика :)
                                              3. Можно, не люблю флеш :) В смысле люблю, но не для этого.
                                              0
                                              Ого, меня уже цитируют :)
                                                0
                                                Нужно было вставить какой-то текст, на lipsum.com лезть было лень :)
                                                  0
                                                  Ладно, чего уж теперь :)
                                                0
                                                при ресайзе окна анимация прекращается.

                                                p.s. Когда ещё первый раз на smashingmagazine эту гориллу запостили, сразу заметил что в IE6 не работает, ибо бэкраунд PNG.
                                                  0
                                                  эффект красивый, но скажите, как часто вы ресайзите окно браузера, что бы узнать что есть какой-то эффект?
                                                    0
                                                    я часто. но у меня два монитора 1680х1050. =)
                                                      0
                                                      Сайт пиарился таким способом, чтобы люди смотрели этот эффект :) На sm даже отдельно статья была :)
                                                      +1
                                                      Мда... вот уже когда понимаешь что JS-фрейворки это зло :)
                                                      меняем ваши подключения


                                                      на следующий код

                                                      window.onload = function(){
                                                      var f = document.getElementById('foreground');
                                                      var m = document.getElementById('midground');
                                                      var fx = 0;
                                                      var mx = 0;
                                                      try { document.execCommand("BackgroundImageCache", false, true); } catch(e) {}; // это мы включаем кеш картинок для IE6, иначе будет постоянно пытаться что-то там обновить
                                                      setInterval(function(){
                                                      f.style.backgroundPosition = (fx += 1) + 'px 0';
                                                      m.style.backgroundPosition = (mx -= 1) + 'px 0';
                                                      }, 50); // меняем число миллисекунд между кадрами,
                                                      // меньше милисекунд скорость будет выше,
                                                      // больше - скорость меньше
                                                      };

                                                      у #midground и #foreground ставим left: 0 и width: 100%
                                                      У #overflow убираем height и overflow.
                                                      Все! Никаких jQuery (вы бы еще с документацией скрипт подцепили). Намного меньше грузит процессор. Работает везде (даже в IE6, правда в IE не поддерживаются полупрозрачные png). Разве это сложнее чем, подключить jQuery и написать две строчки вместо пяти?!
                                                        0
                                                        ОЧень понравилось, отлично! Но притормаживает.. обидно.. Еще опонравилось что библиотека jQuery нахходится на другом сайте
                                                          0
                                                          все хорошо, но обидно что IE6 всё портит, потому что у меня было уже появилась идейка, как это применить правильно и без визуального раздражения ;)

                                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                          Самое читаемое