Создаём parallax scrolling эффект с помощью jQuery и CSS

[Silaev]

Где то я уже это видел, нет? Или это та же статья наверх вылезла?

[Palehin]

Ссылка на оригинал этой статьи есть в этой статье. Собственно, оттуда перешёл, прочитал, понравилась — перевёл)

[Hoorsh]

Вы наверно спутали вот с этой статьей habrahabr.ru/post/141817/

Мне тоже так сначала показалось, потому что в комментах к той статье кто-то ссылку на это же развитие автомпромышленности запостил

[gouranga]

Неделю назад было подобное.

[ComodoHacker]

А картинки оптимизировать никак нельзя было? 1.6M это явное неуважение к пользователю.

[ComodoHacker]

Упрек не вам, разумеется.

[Palehin]

Перезалил в jpg

[ComodoHacker]

Я не про ваши картинки, но тоже хорошо. :)

[Palehin]

Это всего лишь один из способов сделать parallax scrolling. Никто не мешает увеличить скорость движения слоёв для создание наибольшей иллюзии. Также, не обязательно использовать всего четыре слоя, их может быть сколько угодно, тогда эффект будет гораздо заметнее. Плюс ко всему, тут всего несколько строк кода. И это всё работает без использования различных parallax scrolling библиотек, в которых, вовсе не 5 строк кода.

[Stdit]

Чтобы эффект был заметнее, делают инерцию (ка в предыдущей статье). После конца прокрутки фон должен плавно останавливаться. Насколько сложно его сюда добавить?

[Ag47]

Будьте добры, поделитесь ссылочкой на предыдущую статью

[Stdit]

habrahabr.ru/post/141687/

[Davert]

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

[Mirza]

угу, запостил статью про автопромышленность и эффектом доводишь до ума ассоциативный ряд «глубоко в жопе»…

[pokryshkin]

Opera — небольшой баг. Если скроллить держась мышой за скроллбар, а не крутить колесом, то пока мы движем скроллбар — двигается только текст, как только движение останавливаем (кнопку не обязательно отпускать) — остальные слои догоняют текст.

[Palehin]

Opera 11.62 — Всё отлично скроллится

[pokryshkin]

странно, аналогичная версия: 11.62.
Вы именно тащите мышкой скроллбар? Потому как другие способы скроллинга отрабатываются нормально.

[Palehin]

Да, тащу мышкой. Если интересно, вот видео (83,7 мб). Снял только что. Только курсор там скрыт (Camtasia Studio скрывает курсор на видео), но он там есть :)

[pokryshkin]

верю что есть, куда же без него.
Позже попробую «на чистой» машине, может дело в конфигах. У меня опера обновляется уже не первый год, заново не ставил очень давно.

[vdv73rus]

Эх, параллакс становится попсовым

[f0rmat1k]

Работает достаточно плавно даже на слабых машинах. Будет интересно, если вы расскажете по свой алгоритм.

[Georgy1]

Жутко лагает в safari на ios.
Впрочем, оно и не удивительно.

[bersz]

когда в настройках скроллинга стоит перелистывание по странице, а не по строкам, весь эффект пропадает

[termi]

Странный эффект: В IE9 в режиме эмуляции IE8 работает плавнее, чем в режиме стандартов. Даже сделал версию без jQuery, к сожалению, лаги в IE9 остались :(

[keyno]

Интересный эффект. Так можно вообще без jQuery обойтись, обрабатывая события и работаю с DOM-деревом. Зачем заставлять пользователя грузить лишние десятки килобайт ради пары строчек кода?

[termi]

Версия без jQuery h123.ru/ES5-DOM-SHIM/parallax-scrolling-demo/
Кода меньше и он более читаемый. Работает в IE7+ и во всех других браузерах

[ShpuntiK]

На данный момент мне понравилась 3-4 сайта с параллаксом (например, adidas кроссовки). А вот остальные никакого «ухты» не вызывают, поэтому не понимаю почему данному эффекту придают столько внимания…

[radist2s]

Ну все, держись интернет, скоро тебя захлестнет волна бесполезных монстрозных паралаксовых сайтов.
А пост хоть и хороший, но уж очень простой.

[achekalin]

Одно плохо — к высоте экранов вся верстка привязана. Но тут, правда, ничего не сделаешь (к сожалению).

[JekFdrv]

Оказывается анимация по разному смотрится, в Chrome оно при юзании колёсика для скролинга дергается, а в FireFox-e плавно двигается, я вот надумал может для это нужно использовать не .css а .animate, но там проблема в том что нужно каждый раз стопать анимацию при обращении от функции скролинга к анимации… Или динамически менять данные в функции анимации.