parallax при скроллинге

[stmaxvl]

Реализация скроллинга с параллакс эффектом вызвала у меня ряд вопросов. Как оказалось – он адекватно работает только в firefox. Смотрел множество сайтов, везде есть рывки при прокрутке. В ИЕ хуже всего – кроме рывков – дерганье.

Отсюда вопрос: возможна ли кроссбраузерная реализация (плавная горизонтальная прокрутка без рывков и дерганий)?

Пример задачи: http://addevelop.ru/...t/View-new.html

Буду рад советам и примерам реализации плавности. Описывайте свой опыт реализации подобных задач.

Edited October 20, 2013 by stmaxvl

[Николя223]

попробуйте через скролл сделать, это рациональнее чем положение анимировать

Либо через canvas

Edited October 19, 2013 by Николя223

[Николя223]

Офтоп: вообще Js по производительности может быть очень даже быстр) не то что сайты - 3D галактики разворачивают

http://workshop.chromeexperiments.com/stars/

p.s: работает только на браузерах с поддержкой WebGl - webkit,firefox

[advokatua]

http://workshop.chro...ents.com/stars/

этот сайт и должен работать как слайдшоу, или это только у меня так на последнем Хроме? )

[Николя223]

не ) там целая галактика. Не работает - скорее всего потому что нет аппаратной поддержки webGL - (примерно как openGL, но для js), у меня - chromium

Edited October 19, 2013 by Николя223

[advokatua]

да все есть, только работает это как Battlefield 4 на 386-ом

[Николя223]

Ну не знаю) у меня - ноут слабый - процессор 2 ядра ~1.6 ГГц, встроеный видеоадаптер + 4 Гигабайт ОЗУ

[stmaxvl]

попробуйте через скролл сделать, это рациональнее чем положение анимировать

Либо через canvas

Подскажите, что значит сделать через скролл?

Сейчас отлавливаю событие скроллинга и в нем позиционирую элемент. Но, например, в ИЕ элемент сначала скроллится, а потом становится на нужное положение - это дерганье. Рывок - это, например в Хроме - в нем при скроллинге большее количество пикселей прокручивается, чем в FF, соответственно движение не плавное, а рыком.

Edited October 20, 2013 by stmaxvl

[Николя223]

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

http://jsfiddle.net/nikolya223/QYWhn/ код

http://jsfiddle.net/...mbedded/result/ полный экран

А вам при прокрутке нужно просто прокручивать другие слои

Edited October 21, 2013 by Николя223

[across]

ну что, решили проблему?

http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html

 

я столкнулся с той же проблемой.

 

вот тут есть список, во многих как-то решили проблему. но я не смог понять как.

[ryter]

http://www.greensock.com/gsap-js/ пробовали?

position: fixed; весьма странно работает в последней версии хрома

[across]

http://stackoverflow.com/questions/20542586/javascript-smooth-parallax-scrolling-with-mouse-wheel

 

вот чел решил проблему вроде бы

 

я тоже попробовал - но у меня чуть плавнее получилось - но при скроллинге также вверх прыгает и возвращается.

2 ryter

спасибо

 

http://forums.greensock.com/topic/6056-scrolling-the-page-up-and-down-with-greensock-js/

 

вот ещё. начинаю вникать.

Edited January 10, 2014 by across

[across]

сделал через position: fixed всё нормализовалось.

[cyber-soldier]

Кто-нибудь может подсказать, такой параллакс https://active-vision.ru/blog/parallaks-effekt-js-simple-parallax/ как можно привязать к движению мыши? Именно чтобы к этой библиотеке добавить