Простой параллакс эффект при движении мышкой на HTML, CSS и JS

[@Sergeyalmaty]

Супер. Быстро, легко, отличная подача с разъяснениями и демонстрацией. Красава👍

[@Mykhailo_Vdovychenko]

Просто и красиво! Супер урок! СПАСИБО!

[@web-dev-pro]

Прикольно

[@АндрейИльин-д6ж]

тут jquery... расходимся

[@alenalel1267]

Так просто и так эффектно, спасибо за ценную инфу :3

[@codeBurger]

Не за что :)

[@JekichLutiy]

спасибу спасибу

[@pisitkapisitka1727]

ты лучший!!!!!!! КАЧЕСТВЕННЫЙ КОНТЕНТТТТТТТ!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@codeBurger]

Спасибо :)

[@progerlife6690]

Офигеть!! Спасибо!!!!Лайк и подписка!!

[@codeBurger]

Я рад что тебе понравилось :D

[@breketmax3560]

Спасибо большое вы лучший на свете я вс люблю можно мне на вас женится , вы единственный кто хорошо объяснил, я так рад спасиюбо

[@pisitkapisitka1727]

ОТ ДУШИ!!!!!!

[@flipper-limon]

круто) спасибо.

[@melomanteve]

Спасибо! Отличное объяснение! А как сделать остановку анимации плавной? Чтобы не резко останавливалось движение а плавно?

[@hugheverett2478]

Супер!!! То, что доктор прописал))) Я бы с удовольствием посмотрел мастер-класс по верстке полноценного psd-макета с parallax эффектом в твоем исполнении на стеке: gulp4 + Sass/Less/Stylus + pure html/Pug/любой другой html-шаблонизатор + БЭМ-нейминг + Flexbox + CSS Grid Layout (ТОЛЬКО БЕЗ БУТСТРАП!!!). Уж очень доходчиво ты все объясняешь))) з.ы. Не слишком жирно ?)))

[@codeBurger]

Я подумаю над этим :)

[@vitalmax5933]

привет! а если на странице несколько областей с параллаксом? у меня область, которая ниже, там картинка выходит за пределы при параллаксе, на 200 с лишним пикселей, но параллакс работает..

[@vitalmax5933]

я понял в чем дело: вместо pageX, pageY взял screenX screenY

[@cybersoldier3858]

Как вариант воспользоваться уже готовой библиотекой jQuery Parallax active-vision.ru/blog/parallaks-effekt-k-dvizheniyu-myshi/ или другими аналогичными, зачем писать самому?

[@Sokyryar]

библиотеки это бич для оптимизации на 90+

[@mishas3149]

чет у меня не работает

[@jiyukun6530]

да просто, но почему то у меня не работает

[@hhkmable]

А можно как-то ускорить данный скрипт?

[@codeBurger]

Вместо значений 30 и 60 укажите другие

[@hhkmable]

Я имел ввиду ускорить сам алгоритм. У меня 10 слоев и ужасно лагает, а 4 слоя работают нормально.)

[@codeBurger]

@@hhkmable Мне кажется никак, параллакс всегда был тяжелым эффектом для браузеров. Если только использовать какой нибудь webgl то может ускорите

[@hhkmable]

если интересно, пофиксил проблему просто использовав translate3d, вдруг кому-то тоже приспичит)) 'translate3d(-' + x * 5 + 'px,-' + y * 5 + 'px, 0px)'

[@xxFursiKxx]

не работает

[@SHOTMEOW]

в названии js, на практике jquery, если что, это разные вещи, сэр...

[@lexxkrt]

jquery на питоне написан?

[@onlylooser1]

bad musik. убери музыку бургер