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

[@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]

Я рад!

[@no_way_back813]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@aleksejtsind3978]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@and555_48]

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

[@FreelancerLifeStyle]

Спасибо!

[@andrewstarcev]

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

[@FreelancerLifeStyle]

Спасибо!

[@zmeygorynych5684]

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

[@FreelancerLifeStyle]

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

[@superdexter1932]

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

[@FreelancerLifeStyle]

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

[@Masimkaify]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@iliagolota9653]

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

[@FreelancerLifeStyle]

Будь ласка!

[@РусскийГитарист-к9ф]

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

[@movieclips4848]

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

[@FreelancerLifeStyle]

Спасибо!

[@Sogeking228]

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

[@allerw]

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

[@ТёмаРассадин-н9щ]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@Ку-куЕпта-ь8о]

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

[@FreelancerLifeStyle]

Я рад!

[@lenamagenta7416]

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

[@mmax487]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@sergeybondarenko2949]

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

[@FreelancerLifeStyle]

Я рад!

[@ДмитрийСедов-ж9у]

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

[@FreelancerLifeStyle]

Спасибо!

[@ДмитрийСедов-ж9у]

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

[@artbotguy]

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

[@ДарьяАрсеньева-х9и]

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

[@shukonfadah5725]

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

[@olegsemenukha4107]

Бомба!!!❤️🙏

[@FreelancerLifeStyle]

Спасибо!

[@АлексейНескажу-б9э]

Женя, спасибо за твои уроки!!! 👍 Прошел твой бесплатный курс за 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)`; }); } }

[@kotlancer]

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

[@FreelancerLifeStyle]

Спасибо!

[@it1729]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@marinatripetska1772]

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

[@FreelancerLifeStyle]

Будь ласка!

[@АлексейНасвайный-ы7с]

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

[@FreelancerLifeStyle]

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

[@ruslanbasarev5159]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@asmix7328]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@valentine.samoylov]

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

[@web2905]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@dechto1]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@pashasergiychuk8854]

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

[@ProAleX-eo6ce]

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

[@seryibaran_official]

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

[@FreelancerLifeStyle]

Ура!

[@ОлегМарченко-ы2ь]

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

[@dimonrock1791]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@ДмитрийВолокитин-я8ф]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@Денис-в5д5ь]

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

[@FreelancerLifeStyle]

Спасибо!

[@detro1821]

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

[@FreelancerLifeStyle]

Спасибо!

[@asyasmoothies9911]

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

[@БэндерРобот]

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

[@maximtresk]

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

[@АнонимАноним-с2о]

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

[@FreelancerLifeStyle]

Спасибо

[@АлександрБайшев-р4г]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@АлександрБайшев-р4г]

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

[@evgenevgenin9994]

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

[@KomAlexei]

Красота!

[@danilafipsk]

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

[@oleksandrmalishevskyi3979]

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

[@ruleti5347]

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

[@Noname-i4f3z]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@annalumery4211]

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

[@ger-ych1545]

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

[@PieceOfInternet]

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

[@FreelancerLifeStyle]

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

[@TheGlebSChannel]

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

[@ivank.2040]

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

[@FreelancerLifeStyle]

Спасибо!

[@WladimirTarasov]

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

[@aleksk9170]

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

[@davidkhankhadjayev8307]

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

[@Тамилл]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@eugeniotur]

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

[@serdarhuseynov8901]

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

[@xu2593]

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

[@_akunin3674]

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

[@FreelancerLifeStyle]

Будь ласка!

[@evgenika7472]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@zaya2868]

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

[@FreelancerLifeStyle]

Дякую!

[@ArsenDanylenko]

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

[@abdulloxerkinov1731]

круто брат

[@FreelancerLifeStyle]

Спасибо!

[@Фёдор-м7н]

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

[@mmax487]

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

[@FreelancerLifeStyle]

Конечно

[@FreelancerLifeStyle]

Я рад!

[@iradi99]

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

[@МихаилЖуравлев-э3с]

Ты лучший!

[@FreelancerLifeStyle]

Спасибо!

[@РомаМатвийчук-к6т]

Топчик!

[@FreelancerLifeStyle]

Спасибо!

[@evesheppard2341]

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

[@samsaracave3437]

О, видео

[@FreelancerLifeStyle]

Ага)

[@gritsienkooleg3447]

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

[@НиколайСтепанов-ю3м]

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

[@albertrain7093]

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

[@BOSCTON]

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

[@АдхамЭсанов-в6т]

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

[@ПриродакрасаМіра]

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

[@FreelancerLifeStyle]

Спасибо!

[@Max_FS]

Круть👍🔥

[@FreelancerLifeStyle]

Спасибо!

[@Max_FS]

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

[@leoclu8939]

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

[@ЮлияВолкова-к3н]

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

[@vpro5213]

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

[@sergs379]

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

[@movieclips4848]

Спасибо 🙏

[@kostz1212]

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

[@FreelancerLifeStyle]

посмотрим)

[@AmericanDragon134]

Интересно

[@МаксимЖук-э2г]

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

[@deniskotov]

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

[@b-o-t-l-y]

Женя сам себе поставил один дизлайк? ))))) Спасибо за видос!!!

[@FreelancerLifeStyle]

Наверное)

[@hinestia8866]

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

[@olegandrov267]

Почему могут не применяться стили? При загрузке страницы сразу стоит transforn: translate(0%, 0%);. После движения мыши стили пропадают вообше.

[@РусскийГитарист-к9ф]

Один вопрос, в рамках нашего обучения по js еще будет теория или на DOM это все, что нужно для сайтов?

[@FreelancerLifeStyle]

Еще будет

[@РусскийГитарист-к9ф]

Благодарю за ответ, буду ждать с нетерпением))

[@JavaScriptcher]

Ура!+!!!!!!!!

[@FreelancerLifeStyle]

Уряя!

[@endurenzmusic6617]

Kruto!👍

[@AlexJ0ker]

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

[@FreelancerLifeStyle]

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

[@evloev4821]

что бы я не ютубил) фрилансер уже снял видео на этот счет)))