Простой parallax эффект для промо-сайта

    В последнем проекте который состоял всего из одной странички, потребовалось реализовать простой эффект, суть которого лучше понять на примере #1 и #2.

    Поскольку времени для реализации было достаточно, и долгое время таится желание написать хоть что-то, что может помочь другим разработчикам. Оформил все это дело в совсем малюсенький и простой plugin для jquery. Надеюсь, теперь этот код могут прочесть не только я и мой кот Борис, если же это и вовсе кому-то поможет в работе то я совсем не против использования его в ваших проектах, изменения копирования редактирования и т.д.

    Настройки



    ratioH — модификатор движения мыши по горизонтали
    ratioV — модификатор движения мыши по вертикали
    reversed — меняет местами X и Y (движение мыши по горизонтали меняют позицию объекта по вертикали и наоборот )
    invertH — инвертирование движения мыши по горизонтали
    invertV — инвертирование движения мыши по вертикали

    Настройки задаются при инициализации скрипта и могут сочетаться в любой комбинации.

    При желании ко всему этому можно прицепить .animate() вместо .css() или даже добавить transition для нормальных браузеров, но для поставленной задачи такой реализации было достаточно. В планах реализовать полноценный parallax с изменением размеров объектов и прочими вкусностями.

    Скачать можно тут
    Критика широко приветствуется, рекомендации принимаются и учитываются, спасибо за внимание.

    UPD: Добавил еще один пример, виноват видимо первый пример не отразил суть того что я хотел сделать.
    Поделиться публикацией

    Похожие публикации

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

      +7
      А для чего это можно использовать в реальной работе? Или тут just for fun?
        +5
        Дизайнер нарисовал одностраничный промо-сайт и по задумке там должны были хаотично летать призы, я предложил такой вариант, мне показалось это более user friendly если пользователь может останавливать это безобразие, не двигая мышку и прочитать таки условия акции без отвлекающих факторов. Заказчик остался доволен, у них на сайт все двигается, как они и хотели.
          0
          «там должны были хаотично летать призы»
          Просто п… ц какой-то, а не промо-сайт. Задумщика — к стенке.
      –3
      В чем суть данного плагина?
        +35
        По-моему суть параллакс эффекта в неравномерной промотке ближнего объекта относительно дальнего, что позволяет сделать иллюзию объема.

        А три судорожно елозящих кубика это эпилептик-эффект.
          0
          $(«div»).epileptic(«start», 300); — как-то так, да?
            +11
            Посмотрите второй пример, может быть так нагляднее?
              0
              Вот так уже намного лучше, особенно хорошо смотрится на реальном сайте :)
            +16
            Эта ссылка просто обязана была появиться в комментариях к этому топику.
              0
              Это Обиван или Квайгон?
                +2
                Обиван думаю. Он долго находился в этих локациях.
                  +5
                  Ну а кто говорил “these are not the droids you are looking for”?
                    0
                    Генерал Оби-Ван Кеноби.
                    +3
                    Либо Октокэт, либо авторский кот Борис таки прочел код.
                      +3
                      0
                      proteys.info/404/ Эта тоже :)
                        0
                        Песня зачётная :)
                      +15
                      Я пытался поставить фигуры на место — не вышло :(
                        0
                        У фигур разные коэффициенты — соответственно разные «начальные» точки, так и должно быть
                          +1
                          еще есть небольшой баг при появления курсора.
                          идет резкое передвижение объектов [видео]
                            0
                            Даже видео записали) спасибо, исправим.
                        +10
                        Вот это параллакс f6design.com/projects/parallax-scrolling/
                        А у вас кубики убегают от мышки

                          +1
                          А если сайт без скрола, а параллакс хочется?
                        • НЛО прилетело и опубликовало эту надпись здесь
                            +3
                            Да, признаю я не дизайнер и нарисовать красивые картинки для примера мне мучительно сложно, поэтому позаимствовал их для второго примера с приведенного вами сайта, может быть теперь больше похоже на параллакс?
                            +2
                            >>простой эффект, суть которого лучше понять на примере

                            нифига не понял
                              0
                              Добавил еще один пример.
                              +2
                              Вы меня извините, но это ни фига не паралакс.
                              +3
                              Копипаст при написании кода — наверное, быстро, но объём растёт в геометрической прогрессии. Я бы переписал код так:
                              jsfiddle.net/dHTLt/3/
                                +1
                                Спасибо за комментарии и исправления, я ждал этого.
                                По поводу копипаста, да некрасиво получается, но я хотел вынести все проверки из обработчика, не хочется при каждом движении мыши проверять как нужно двигать объект.
                                  +1
                                  Вычисления делаются быстро, экономить надо не на них в этом случае, а на количестве событий и перерисовок. Не перерисовывать, если положение (почти) не изменилось и если времени прошло меньше 20-30 мс. Тогда, думаю, исчезнут (паралитические) лаги в этом примере. Вы сделали работу оптимизирующего компилятора, но с концептом работать лучше с единым кодом. Например, тут с вычислением перспектив я не работал, с ними творится полный бардак. А отработка 3D-модели поможет сделать из примера не только параллакс, но и вращение, например, если надо. А попробуйте с 8 копиями это сделать.
                                  +1
                                  Лучше уж вот так: jsfiddle.net/dHTLt/34/
                                    0
                                    Действительно лучше, спасибо.
                                      +1
                                      Да, недавно скрипт всплыл еще раз, и я его еще немного изменил.
                                      Вот моя версия: jsfiddle.net/dHTLt/79/

                                      Отличие — теперь все блоки наблюдаются одним и тем же наблюдателем (существует точка, при перемещении мыши в которую все блоки встают на свои места).
                                  +1
                                  Ещё, было бы не плохо, добавить animation + easing. Конечно, будет тормознее, но если объектов не много, то не критично. Вот пара аккуратных примеров с аним+иазингом:
                                  www.ascensionlatorre.com/philosophy
                                  fieldnotes.iancoyle.com/ (раздел «Nike Better World»)
                                  mortenstrid.no/ — тут тоже есть anim+easing в отличае от Вашего второго примера.
                                    0
                                    В планах в следующей версии реализовать animation, transition и easing.
                                    +3
                                    на kino-govno.com/ регулярно использую подобное. очень красиво получается. спасибо вам за скрипт.
                                      +1
                                      хитрец)
                                        +1
                                        используют
                                        0
                                        Здесь bjork.com
                                          +3
                                          ад какой!
                                          +1
                                          Вы подпишите второй пример. Пока не увидел в комментах думал, что вы сами это сделали.
                                            +1
                                            Зачем нужны invert*, если можно для той же цели использовать отрицательные ratio*?
                                              0
                                              Поддерживаю предыдущий комментарий.
                                              На производительности это конечно не скажется, но пару десятков строк кода точно сэкономит.
                                                0
                                                Как-то я проглядел этот момент, будет время перепишу.
                                              +1
                                              Давно уже побаловался с этим эффектом вот таким образом: aeroseti.ru/dog/
                                                0
                                                И здесь www.pepsilikerz.com
                                                  0
                                                  Мы на новый год подобным образом открытку делали :-) studio38.ru/new_year/index.html
                                                    0
                                                    Чтобы еще корректнее работало, надо после кода:
                                                    $('html').on('mousemove', function(e) {
                                                    	x = eqH(e)
                                                    	y = eqW(e)
                                                    	$(layer).css({top:y,left:x})
                                                    });
                                                    

                                                    добавить строчку:
                                                    $(window).resize($.fn.plaxmove(options));
                                                    

                                                    А то при ресайзе окна и при «процентном» позиционировании блока блоки не ресайзатся…

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

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