Параллакс эффект при движении мыши и скролле сайта. Без библиотек и дополнений. HTML CSS JavaScript.

Плавный параллакс эффект при движении мыши и скролле сайта. Без библиотек и дополнений, сугубо на HTML CSS JavaScript.
☝️ Fairo - единственное приложение, в котором все бизнес-функции включены в один бизнес-аккаунт за фиксированную ежемесячную плату.
Сайт: bit.ly/3sBJJ73
Скачать приложение для Android: bit.ly/3qEWJXQ
Скачать приложение для iOS: apple.co/32QExjV
👉 Изображения: fls.guru/howtodoit/mouseparal...
👉 Материалы выпуска (патреон): / 50616732
💪 Платный курс по верстке: edu.fls.guru
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
00:00 - В выпуске
00:24 - РЕКЛАМА
01:36 - Подготовка к работе
02:04 - Пишем HTML
04:17 - Пишем CSS
12:24 - Пишем JS. Параллакс при движении курсора
19:26 - Пишем JS. Параллакс при скролле
22:21 - Заключение
👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - / @itpassions
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@FreelancerLifeStyle]

Как вам? 🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/ 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle

[@no_way_back813]

Супер!)

[@deniskotov]

Каждое новое видео - как праздник для меня!

[@FreelancerLifeStyle]

Я рад!

[@rusnettle]

Женя - тебя просто слушать приятно, не то что внимательно запоминать но и просто слушать! Так держать! :)

[@FreelancerLifeStyle]

Я рад!

[@aleksejtsind3978]

Отлично! Спасибо, Женя! Сделать на чистом это супер!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@no_way_back813]

Ура, новый видос! Спасибо Женя за труды :)

[@FreelancerLifeStyle]

Пожалуйста!

[@user-mn1nm9lf1k]

Я очень рад, что прохожу обучение именно у тебя. Уже добрался до js. Спасибо тебе огромное за твой труд, за все плюшки на патреоне тоже огромное спасибо))) Поехали)))

[@allerw]

Это просто бомбически! Женя, огромное Вам спасибо, за ваши труды. Успехов и удачи. Любуюсь не нарадуюсь parallax.

[@zmeygorynych5684]

Вот разве можно не любить этого парня?)

[@FreelancerLifeStyle]

Хех, спасибо!

[@superdexter1932]

Спасибо вам за ваши ролики, очень помогают разобраться в той или иной теме.

[@FreelancerLifeStyle]

Я очень рад этому!

[@artbotguy]

Это видео ещё доступнее, чем предыдущее тоже про горы, спасибо)

[@iliagolota9653]

Супер! Дякую! Сиджу зараз на відео про флекси , але кожне нове відео - мотивує навіть своєю появою , бо так хочеться навчитися робити такі круті ефекти! Обов'язково сюди доберусь з часом ( бо намагаюсь все робити поступово).

[@FreelancerLifeStyle]

Будь ласка!

[@Masimkaify]

Жека, это супер! Не останавливайся! И большое тебе спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-eq1zs7mj6w]

Спасибо за то, что объяснил вычисления при параллакс эффекте. Как по мне, это самое сложное

[@FreelancerLifeStyle]

Пожалуйста!

[@user-ch4gd5sb7z]

Давно облизывалась глядя на этот макет. И, о чудо! Сейчас узнаю как реализовать его главные фишки. Ура!🥳 Лайк не глядя)

[@andrewstarcev]

Как всегда огонь!! 🔥🔥🔥

[@FreelancerLifeStyle]

Спасибо!

[@valentine.samoylov]

Спасибо 🙏 Вдохновил взяться за макет с параллаксом!

[@Sogeking228]

просто лучший, незнаю что бы я делал без тебя

[@movieclips4848]

Спасибо вы меняете жизнь сотен тысяч людей к лучшему желаю вам к концу года преодолеть планку в миллион подписчиков 🙏🙏🙏

[@FreelancerLifeStyle]

Спасибо!

[@user-dg6tb2yd5b]

Только вчера задумался сделать нечто подобное, а тут Вы! Как всегда лучший 🤟🏻👍

[@FreelancerLifeStyle]

Я рад!

[@lenamagenta7416]

на одном дыхании. спасибо тебе, Человек ))

[@and555_48]

Женя ты крут! Реально ЛУЧШИЕ видео уроки по Frontend на KZbin в русскоговорящем сегменте!

[@FreelancerLifeStyle]

Спасибо!

[@it1729]

Как раз хотел добавить в вёрстку такую штуку - Жека выпускает видео! Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@asmix7328]

Магия какая-то) Спасибо за урок!)

[@FreelancerLifeStyle]

Пожалуйста!

[@user-np9mq5xc7j]

Вау, неожиданный контент! Спасибо ☺️

[@FreelancerLifeStyle]

Пожалуйста!

[@ruslanbasarev5159]

спасибо огромное за такой мега полезный контент... и удачи вам в развитии канала и вообще по жизни)!

[@FreelancerLifeStyle]

Пожалуйста!

[@sergeybondarenko2949]

Пришел сюда после интервью у бороды и не пожалел. Спасибо за работу! Подписка и лайк :)

[@FreelancerLifeStyle]

Я рад!

[@mmax487]

Как, раз что хотел довно учить, спасибо

[@FreelancerLifeStyle]

Пожалуйста!

[@kotlancer]

Годнота подъехала!)) плюс один патрон в боекомплекте разработчика!)

[@FreelancerLifeStyle]

Спасибо!

[@marinatripetska1772]

Це дуже круто! Дякую за чудовий контент!!!!

[@FreelancerLifeStyle]

Будь ласка!

[@ProAleX-eo6ce]

Жека красавчик;) как и всегда, Спасибо за огромный труд;)

[@user-qn7zf9js3y]

JS наконец-то ожил! :D Отличное видео!

[@dimonrock1791]

Спасибо за твои классные уроки 👍

[@FreelancerLifeStyle]

Пожалуйста!

[@pashasergiychuk8854]

Круто,теперь есть реклама!Очень рад за вас!

[@olegsemenukha4107]

Бомба!!!❤️🙏

[@FreelancerLifeStyle]

Спасибо!

[@user-vk4si1oz7w]

Как всегда шикарно!!!!

[@FreelancerLifeStyle]

Спасибо!

[@user-ru2om6xt5y]

Женя, спасибо за твои уроки!!! 👍 Прошел твой бесплатный курс за 2,5 месяца. Хороший старт для дальнейшего развития. Стараюсь тупо не повторять, а по максимуму изменять задачи и продумывать код самостоятельно в соответствии с полученными знаниями. Хочу предложить вариант расчёта смешения объектов параллакс эффекта для уменьшения кода и переменных. Суть в том, что бы высчитать коэффициент относительности смещения курсора и в соответствии с ним подвинуть объект на тот же процент от указанной максимальной величины смещения. V - размер viewport. M - координаты курсора K - коэффициент P - максимальное смещение объекта в ‘px’ или ‘%’ После преобразований формул вывел короткую. Записываю сразу общий результат, подставлять значения для осей X и Y Вариант для максимального смещения в пикселях: K = (V - 2 * M)/V transform: translate (${K*P}px, ${K*P}px); Вариант для максимального смещения в %: K = (V - 2 * M)/100 transform: translate (${K*P}%, ${K*P}%); Ниже привожу реализованный мной код ))) window.onload = function () { const parallax = document.querySelector('.parallax'); if (parallax) { // проверка наличия блока parallax. нужно для исключения ошибки на страницах сайта, где этого блока нет. // переменные с блоками которые будут двигаться const parallaxFon = document.querySelector('.parallax__fon'); const parallaxFoto = document.querySelector('.parallax__we'); const parallaxTitle = document.querySelector('.parallax__title'); // максимальное отклонение объектов в %) let valueMoveFon = -1; let valueMoveFoto = -2; let valueMoveTitle = 3; document.addEventListener('mousemove', function (event) { let widthViewport = document.documentElement.clientWidth; // ширина окна браузера let heightViewport = document.documentElement.clientHeight; // высота окна браузера // коэффициент относительности жвижения объектов к курсору для смещения указанного в '%' let percentMoveMouseX = (widthViewport - 2 * event.clientX) / 100; let percentMoveMouseY = (heightViewport - 2 * event.clientY) / 100; // присвоение стилей трансформации (максимальное отклонение в '%' * на коэффициент относительности движения ) parallaxFon.style.cssText = `transform: translate(${percentMoveMouseX * valueMoveFon}px, ${percentMoveMouseY * valueMoveFon}px)` parallaxFoto.style.cssText = `transform: translate(${percentMoveMouseX * valueMoveFoto}px, ${percentMoveMouseY * valueMoveFoto}px)` parallaxTitle.style.cssText = `transform: translate(${percentMoveMouseX * valueMoveTitle}px, ${percentMoveMouseY * valueMoveTitle}px)`; }); } }

[@danilafipsk]

Офигенно! Красиво!

[@web2905]

Спасибо) Супер эффект :)

[@FreelancerLifeStyle]

Пожалуйста!

[@user-fk8jf1oz3d]

Как всегда очень круто!

[@ivanchai]

Ура!!! Новое видео от Жени!!!

[@FreelancerLifeStyle]

Ура!

[@shukonfadah5725]

все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье

[@user-wg6lw4uz8p]

Супер. Спасибо за ролик.

[@FreelancerLifeStyle]

Пожалуйста!

[@eugeniotur]

Eselente como siempre !!! Muchas garcias por tu labor.

[@ger-ych1545]

Спасибо огромное Вам! Очень помогло это видео :)

[@user-hg9hr8gd7o]

Жека, ты топовый чел! Самый годный контент на твоём канале))

[@FreelancerLifeStyle]

Спасибо!

[@user-hg9hr8gd7o]

Нет, это тебе спасибо!))

[@evgenevgenin9994]

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

[@user-ic5vg6ki4i]

Ну конечно же лайк!!!

[@FreelancerLifeStyle]

Спасибо!

[@ruleti5347]

топовый контент, спасибо Евгений

[@asyasmoothies9911]

Есть идея Картинка с землёй на которой стоит человек сделать длиннее, т.е. земли под человеком должно отображаться больше ("можно с переходом под землю") Но отображать ты часть как в видео. При скроле быстро поднимать это изображение. Будет иллюзия отдаления, или ухода под землю)

[@albertrain7093]

Спасибо Женя, как всегда ты на высоте ) У меня вопросик.. max-aspect-ratio все современные браузеры понимают?

[@detro1821]

не человек, золото

[@FreelancerLifeStyle]

Спасибо!

[@WladimirTarasov]

респект за разбор параллакса по полочкам

[@KomAlexei]

Красота!

[@user-mx1bb3eq1s]

Видос отличный) Ну коли просишь предложения по улучшению, вот пара: нужно добавить троттлер который будет вызывать обработчик движения мыши не при каждом событии, а например раз в 50мс. Таким образом мы оптимизируем производительность, а для пользователя это вообще не будет заметно. Далее нужно обернуть в функцию передачу стилей и вызывать ее для каждого элемента параллакса в цикле. Это нужно для улучшения лаконичности кода, а также чтобы унифицировать решение. Например помечать параллак-объекты в верстке специальными data-атрибутами, в которых указывать свой коофицент, а для всей сцены создать дата атрибут со скоростью. Таким образом можно будет собрать мини-либу для парралакса. После того как сделал проверку на parallax, можно выбирать элементы относительно него, а не документа, ведь они по факту все дочерние. Это во-первых, позволяет делать более точную выборку. Во-вторых, это небольшая оптимизация, которая позволяет искать узлы не от документа, а от уже выбранного узла.

[@FreelancerLifeStyle]

Спасибо

[@user-ed8eb6cx7o]

Огромное спасибо, классное видео

[@FreelancerLifeStyle]

Пожалуйста!

[@davidkhankhadjayev8307]

Ты блин вашшее))) я хотел бы чтобы ты научил нас JS так что бы нам тоже было так просто создавать анимации )) Мы знаем JS но не можем так круто его использовать)

[@oleksandrmalishevskyi3979]

Это то, что я долго искал

[@aleksk9170]

круто! обалденно!

[@user-gg4dv2rx2g]

Жека, спасибо за полезное видео!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-gg4dv2rx2g]

@@FreelancerLifeStyle Сейчас начал смотреть 4-й стрим для патронов, и узнал, что недавно там кто-то высказывал в закрытом чате какие-то претензии. Так вот таких деятелей сразу на кол))) А может это провокация со стороны твоих конкурентов!!! В любом случае, Жека, мы за тебя, ты наикрутейший специалист и учитель в свой сфере деятельности!!!

[@user-sm4zy7uc1m]

Здравствуйте, можете выпустить видео подробно про атрибут hrefland, яб его с удовольствием посмотрел на примерах) ну если не получится то ничего страшного, вы и так много видео полезных выпускаете за что вам ОГРОМНОЕ СПАСИБО!

[@ivank.2040]

Круто, просто круто!

[@FreelancerLifeStyle]

Спасибо!

[@user-df5vx9un8l]

Спасибо за урок!) Не знаю, на сколько это может считаться оптимизацией: - в функцию назначения стилей сразу передавать значения coordXpercent и coordYpercent с учетом коэффициента. Тут же добавить transition, с помощью которого можно управлять скоростью и чуток поведением (lenear, ease-out). Таким образом можно обойтись без distX/distY и не пересчитывать coordXpercent и coordYpercent. Машина у меня старая и с графикой у нее туго, зрительно, мой вариант на ней более плавно происходит; - сами же назначения стилей для каждого элемента загнал в цикл; - по мелочам - если coordXpercent и coordYpercen получать не в процентах, а в отношении (не умножая на 100), то можно их УМНОЖАТЬ на коэффициент выраженный в процентах, вроде так более наглядно получается.

[@annalumery4211]

Женя, спасибо тебе большое за твой труд! Всё доходчиво, интересно и наглядно!!

[@user-dj9pl6vv9e]

Здравствуйте! Спасибо за потрясающую подачу материала. У меня вопрос: не могли бы вы, пожалуйста, записать туториал по созданию переходов между экранами? Например с использованием barba.js. Конкретно интересуют переходы slide (при клике на ссылку экран "сдвигается" и контент второго экрана заменяет контент первого, надеюсь понятно что имеется в виду) и fade. Очень надеюсь на ваш ответ, заранее спасибо!

[@_akunin3674]

Дякую за контентіще!

[@FreelancerLifeStyle]

Будь ласка!

[@ArsenDanylenko]

Дякую за відео, друже!

[@user-tl7wn1ik8k]

Спасибо за твою работу, благодаря тебе и твоим БЕСПЛАТНЫМ урокам, я стал фронт энд разработчиком. Серьезно, ты даже букмекеров на рекламишь. По-сути ты делаешь это исключительно потому что ты хочешь делать мир лучшее. Раньше такой контент можно было найти на западном Ютубе.

[@FreelancerLifeStyle]

Я рад что полезно!

[@evgenika7472]

Спасибо!!! Лучший!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@maximtresk]

Ничего не понятно, но очень интересно :)

[@iradi99]

Много видос и по быстрее а то я соскучился

[@PieceOfInternet]

Видео крутое!) Жека , было бы круто от тебя получить видосик по посадке верстки на Wordpress. Очень мало адекватного контента в этом направлении и если сделаешь будет круто) уверен будет 100500 лайков!)

[@FreelancerLifeStyle]

Да, будет мини курс

[@TheGlebSChannel]

полным полно видео на эту тему, где это очень мало контента?

[@user-fx8th7nu8e]

Можете снять видос по html-препроцессорам? И используют ли их? По css часто слышу, а про html-препроцессоры недавно узнал

[@zaya2868]

Лайк і комент ще не дивлячись:)

[@FreelancerLifeStyle]

Дякую!

[@abdulloxerkinov1731]

круто брат

[@FreelancerLifeStyle]

Спасибо!

[@kostz1212]

Жека, что думаешь о BootStrape и будешь ли ты делать гайды по ниму?

[@FreelancerLifeStyle]

посмотрим)

[@AlexJ0ker]

Круто! А такие картинки собственноручно можно изготавливать?

[@FreelancerLifeStyle]

Можно скачать в описании, либо использовать свои

[@sergs379]

Супер. А как сделать такой параллакс в в виде плагина, чтоб можно было его использовать где надо. Может в нескольких местах страницы.

[@xu2593]

спасибо, все работает

[@user-hm5zl1xf1n]

Топчик!

[@FreelancerLifeStyle]

Спасибо!

[@user-gj6vh1fh1g]

Спасибо за видео, отличный урок. Был, помнится, еще один урок по параллаксу (с маяком и морем). В этом, к сожалению, я не достиг результата, хотя, вроде, проверил все не один раз. В консоли пишет предупреждение: Ошибка разбора значения в 'transform'. Объявление пропущено. В чем может быть штанга?

[@serdarhuseynov8901]

Евгений просто спасибо

[@user-mb5cy5lc9w]

Ты лучший!

[@FreelancerLifeStyle]

Спасибо!

[@vpro5213]

Дякую за відео. 👍

[@user-ql3rn7pu2h]

Ууу спасибо как раз искал такой урок

[@mmax487]

Можно такой еффект поставить на маленком блоке? Либо фото?

[@FreelancerLifeStyle]

Конечно

[@FreelancerLifeStyle]

Я рад!

[@hinestia8866]

Евгений можете пожалуйста посоветовать где можно найти и скачать psd макеты для новичков?

[@user-tf2lp7jp5x]

Ты весь СНГ поднимешь своими обучениями. Годнята всегда отличается своим запахом.

[@user-rd4kg4yg7t]

Жека круто !!!

[@FreelancerLifeStyle]

Спасибо!

[@movieclips4848]

Спасибо 🙏

[@Max_FS]

Круть👍🔥

[@FreelancerLifeStyle]

Спасибо!

[@Max_FS]

@@FreelancerLifeStyle и Вам спасибо за Вашу работу и такие отличные видео!

[@Pereswet83]

Спасибо! Много интересного подчерпнул )) Заранее извиняюсь, но немного позанудствую насчёт "улучшения кода": 1. почему window.onload, а не document.addEventListener('DOMContentLoaded', Parallax, false) ? 2. если объявлен строгий режим "use strict", то зачем точка с запятой в каждой строке и неСтрелочное объявление функций? )) чисто сила привычки или всё же необходимость?

[@FreelancerLifeStyle]

onload ждет загрузку картинок, DOMContentLoaded нет. точка с запятой в каждой строке и неСтрелочное объявление функций для более понятной подачи.

[@Pereswet83]

@@FreelancerLifeStyle понял, спасибо 👍

[@farlawarr]

У меня по умолчанию от user agent stylesheet идет margin: 8px для body, это новый хром такой нехороший стал? не нашел обнуления этого маргина в уроке, какое-то время помучался =) Еще была проблема, что при настройке параллакса при скролле картинки гор и человека пропадали. Добавление z-index: 2 и 3 в скрипты для трансформа парентов картинок порешали эту проблему. Спасибо за труд, Жека!

[@user-xn5rq2ii5n]

Спасибо вам огромное!!!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@evesheppard2341]

Блин возьми к себе стажером =) готов за еду работать, да что там, и без еды готов )))

[@kontiray8842]

Можете пожалуйста скинуть строки для обнуления css? Увидел на видео про SASS, все переписал, только строку на html, body не смог полностью увидеть

[@user-jg1ny8ij5v]

Здравствуйте, подскажите пожалуйста как вставить данную анимацию в Figma ?

[@samsaracave3437]

О, видео

[@FreelancerLifeStyle]

Ага)

[@leoclu8939]

Ничего не понял, но очень интересно

[@gritsienkooleg3447]

Даа, спасибо, Жека )

[@deniskotov]

Жень, не в курсе, почему у меня происходит рывок контента при параллаксе на скролле? Типа сначала нормально скроллится где-то до половины, потом 100 пикселей параллакса нет, а потом контент делает рывок на эти 100 пикселей и снова идет нормально. Не подскажешь, в какую степь копать?

[@SwordToothTiger]

Добрый день, а у вас есть видео в которым рассказывается какие минимальные знания нужны что бы начать хоть какую то копеечку зарабатывать и как? Если нет, планируеете сделать? Спасибо за видео, в любом случаее.