Женя, спасибо за твои уроки!!! 👍 Прошел твой бесплатный курс за 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)`; }); } }
Супер! Дякую! Сиджу зараз на відео про флекси , але кожне нове відео - мотивує навіть своєю появою , бо так хочеться навчитися робити такі круті ефекти! Обов'язково сюди доберусь з часом ( бо намагаюсь все робити поступово).
Я очень рад, что прохожу обучение именно у тебя. Уже добрался до js. Спасибо тебе огромное за твой труд, за все плюшки на патреоне тоже огромное спасибо))) Поехали)))
Спасибо за твою работу, благодаря тебе и твоим БЕСПЛАТНЫМ урокам, я стал фронт энд разработчиком. Серьезно, ты даже букмекеров на рекламишь. По-сути ты делаешь это исключительно потому что ты хочешь делать мир лучшее. Раньше такой контент можно было найти на западном Ютубе.
Есть идея Картинка с землёй на которой стоит человек сделать длиннее, т.е. земли под человеком должно отображаться больше ("можно с переходом под землю") Но отображать ты часть как в видео. При скроле быстро поднимать это изображение. Будет иллюзия отдаления, или ухода под землю)
Спасибо за урок!) Не знаю, на сколько это может считаться оптимизацией: - в функцию назначения стилей сразу передавать значения coordXpercent и coordYpercent с учетом коэффициента. Тут же добавить transition, с помощью которого можно управлять скоростью и чуток поведением (lenear, ease-out). Таким образом можно обойтись без distX/distY и не пересчитывать coordXpercent и coordYpercent. Машина у меня старая и с графикой у нее туго, зрительно, мой вариант на ней более плавно происходит; - сами же назначения стилей для каждого элемента загнал в цикл; - по мелочам - если coordXpercent и coordYpercen получать не в процентах, а в отношении (не умножая на 100), то можно их УМНОЖАТЬ на коэффициент выраженный в процентах, вроде так более наглядно получается.
@@FreelancerLifeStyle Сейчас начал смотреть 4-й стрим для патронов, и узнал, что недавно там кто-то высказывал в закрытом чате какие-то претензии. Так вот таких деятелей сразу на кол))) А может это провокация со стороны твоих конкурентов!!! В любом случае, Жека, мы за тебя, ты наикрутейший специалист и учитель в свой сфере деятельности!!!
Видос отличный) Ну коли просишь предложения по улучшению, вот пара: нужно добавить троттлер который будет вызывать обработчик движения мыши не при каждом событии, а например раз в 50мс. Таким образом мы оптимизируем производительность, а для пользователя это вообще не будет заметно. Далее нужно обернуть в функцию передачу стилей и вызывать ее для каждого элемента параллакса в цикле. Это нужно для улучшения лаконичности кода, а также чтобы унифицировать решение. Например помечать параллак-объекты в верстке специальными data-атрибутами, в которых указывать свой коофицент, а для всей сцены создать дата атрибут со скоростью. Таким образом можно будет собрать мини-либу для парралакса. После того как сделал проверку на parallax, можно выбирать элементы относительно него, а не документа, ведь они по факту все дочерние. Это во-первых, позволяет делать более точную выборку. Во-вторых, это небольшая оптимизация, которая позволяет искать узлы не от документа, а от уже выбранного узла.
Здравствуйте, можете выпустить видео подробно про атрибут hrefland, яб его с удовольствием посмотрел на примерах) ну если не получится то ничего страшного, вы и так много видео полезных выпускаете за что вам ОГРОМНОЕ СПАСИБО!
Здравствуйте! Спасибо за потрясающую подачу материала. У меня вопрос: не могли бы вы, пожалуйста, записать туториал по созданию переходов между экранами? Например с использованием barba.js. Конкретно интересуют переходы slide (при клике на ссылку экран "сдвигается" и контент второго экрана заменяет контент первого, надеюсь понятно что имеется в виду) и fade. Очень надеюсь на ваш ответ, заранее спасибо!
Ты блин вашшее))) я хотел бы чтобы ты научил нас JS так что бы нам тоже было так просто создавать анимации )) Мы знаем JS но не можем так круто его использовать)
Видео крутое!) Жека , было бы круто от тебя получить видосик по посадке верстки на Wordpress. Очень мало адекватного контента в этом направлении и если сделаешь будет круто) уверен будет 100500 лайков!)
Подскажите почему JS код не работает, пишет ошибка в 5 строке: "use strict" //Ждем загрузку контента window.onload = function() { const parallax = document.querySelector('.parallax'); if (parallax) {
Добрый день, а у вас есть видео в которым рассказывается какие минимальные знания нужны что бы начать хоть какую то копеечку зарабатывать и как? Если нет, планируеете сделать? Спасибо за видео, в любом случаее.
Спасибо за видео, отличный урок. Был, помнится, еще один урок по параллаксу (с маяком и морем). В этом, к сожалению, я не достиг результата, хотя, вроде, проверил все не один раз. В консоли пишет предупреждение: Ошибка разбора значения в 'transform'. Объявление пропущено. В чем может быть штанга?
Жека, привет! не могу словить почему clouds.style.cssText = `transform: translate (${positionX / forClouds}%,${positionY / forClouds}%);`; не устанавливается ? пробовал напрямую clouds.style.transform = `......`; тоже самое.
разобрался... translate (${po.. и translate(${po.. не одно и то же( дело в пробеле после функции - его не должно быть.. кстати тож самое было в этом примере и с rgba( и rgba (.. Ладно, ок. зато разобрался с vs code live server и degugger для chrome, ну и как с git в vs code работать пока гоняли меня с компа на комп)))) Спасибо!
У меня по умолчанию от user agent stylesheet идет margin: 8px для body, это новый хром такой нехороший стал? не нашел обнуления этого маргина в уроке, какое-то время помучался =) Еще была проблема, что при настройке параллакса при скролле картинки гор и человека пропадали. Добавление z-index: 2 и 3 в скрипты для трансформа парентов картинок порешали эту проблему. Спасибо за труд, Жека!
Как вам?
🔴 Карта канала: 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
Супер!)
Каждое новое видео - как праздник для меня!
Я рад!
Женя - тебя просто слушать приятно, не то что внимательно запоминать но и просто слушать! Так держать! :)
Я рад!
Вот разве можно не любить этого парня?)
Хех, спасибо!
Спасибо вам за ваши ролики, очень помогают разобраться в той или иной теме.
Я очень рад этому!
Женя ты крут!
Реально ЛУЧШИЕ видео уроки по Frontend на RUclips в русскоговорящем сегменте!
Спасибо!
Женя, спасибо за твои уроки!!! 👍
Прошел твой бесплатный курс за 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)`;
});
}
}
Отлично! Спасибо, Женя!
Сделать на чистом это супер!!!
Пожалуйста!
Ура, новый видос! Спасибо Женя за труды :)
Пожалуйста!
Спасибо за то, что объяснил вычисления при параллакс эффекте. Как по мне, это самое сложное
Пожалуйста!
Как всегда огонь!! 🔥🔥🔥
Спасибо!
Это просто бомбически! Женя, огромное Вам спасибо, за ваши труды. Успехов и удачи. Любуюсь не нарадуюсь parallax.
Супер! Дякую! Сиджу зараз на відео про флекси , але кожне нове відео - мотивує навіть своєю появою , бо так хочеться навчитися робити такі круті ефекти! Обов'язково сюди доберусь з часом ( бо намагаюсь все робити поступово).
Будь ласка!
Жека, это супер! Не останавливайся! И большое тебе спасибо!
Пожалуйста!
Как, раз что хотел довно учить, спасибо
Пожалуйста!
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье
просто лучший, незнаю что бы я делал без тебя
Спасибо вы меняете жизнь сотен тысяч людей к лучшему желаю вам к концу года преодолеть планку в миллион подписчиков 🙏🙏🙏
Спасибо!
Я очень рад, что прохожу обучение именно у тебя. Уже добрался до js. Спасибо тебе огромное за твой труд, за все плюшки на патреоне тоже огромное спасибо))) Поехали)))
Это видео ещё доступнее, чем предыдущее тоже про горы, спасибо)
Спасибо за твою работу, благодаря тебе и твоим БЕСПЛАТНЫМ урокам, я стал фронт энд разработчиком. Серьезно, ты даже букмекеров на рекламишь. По-сути ты делаешь это исключительно потому что ты хочешь делать мир лучшее. Раньше такой контент можно было найти на западном Ютубе.
Я рад что полезно!
на одном дыхании. спасибо тебе, Человек ))
Есть идея Картинка с землёй на которой стоит человек сделать длиннее, т.е. земли под человеком должно отображаться больше ("можно с переходом под землю")
Но отображать ты часть как в видео.
При скроле быстро поднимать это изображение.
Будет иллюзия отдаления, или ухода под землю)
Пришел сюда после интервью у бороды и не пожалел. Спасибо за работу! Подписка и лайк :)
Я рад!
Только вчера задумался сделать нечто подобное, а тут Вы! Как всегда лучший 🤟🏻👍
Я рад!
Спасибо за урок!)
Не знаю, на сколько это может считаться оптимизацией:
- в функцию назначения стилей сразу передавать значения coordXpercent и coordYpercent с учетом коэффициента. Тут же добавить transition, с помощью которого можно управлять скоростью и чуток поведением (lenear, ease-out). Таким образом можно обойтись без distX/distY и не пересчитывать coordXpercent и coordYpercent. Машина у меня старая и с графикой у нее туго, зрительно, мой вариант на ней более плавно происходит;
- сами же назначения стилей для каждого элемента загнал в цикл;
- по мелочам - если coordXpercent и coordYpercen получать не в процентах, а в отношении (не умножая на 100), то можно их УМНОЖАТЬ на коэффициент выраженный в процентах, вроде так более наглядно получается.
Давно облизывалась глядя на этот макет. И, о чудо! Сейчас узнаю как реализовать его главные фишки. Ура!🥳 Лайк не глядя)
Це дуже круто! Дякую за чудовий контент!!!!
Будь ласка!
Как раз хотел добавить в вёрстку такую штуку - Жека выпускает видео! Спасибо!
Пожалуйста!
Спасибо 🙏
Вдохновил взяться за макет с параллаксом!
Бомба!!!❤️🙏
Спасибо!
Магия какая-то)
Спасибо за урок!)
Пожалуйста!
Спасибо) Супер эффект :)
Пожалуйста!
Ура!!! Новое видео от Жени!!!
Ура!
Жека, ты топовый чел! Самый годный контент на твоём канале))
Спасибо!
Нет, это тебе спасибо!))
Ничего не понятно, но очень интересно :)
Вау, неожиданный контент! Спасибо ☺️
Пожалуйста!
Супер. Спасибо за ролик.
Пожалуйста!
Круто,теперь есть реклама!Очень рад за вас!
Спасибо за твои классные уроки 👍
Пожалуйста!
не человек, золото
Спасибо!
Женя, спасибо тебе большое за твой труд! Всё доходчиво, интересно и наглядно!!
Годнота подъехала!)) плюс один патрон в боекомплекте разработчика!)
Спасибо!
Это то, что я долго искал
Как всегда шикарно!!!!
Спасибо!
спасибо огромное за такой мега полезный контент... и удачи вам в развитии канала и вообще по жизни)!
Пожалуйста!
Спасибо ра реальное качественное бесплатное обучение, в наше время большая находка. Жека = клондайк плюшек.
Жека красавчик;) как и всегда, Спасибо за огромный труд;)
респект за разбор параллакса по полочкам
Евгений просто спасибо
Офигенно! Красиво!
Жека, спасибо за полезное видео!!!
Пожалуйста!
@@FreelancerLifeStyle Сейчас начал смотреть 4-й стрим для патронов, и узнал, что недавно там кто-то высказывал в закрытом чате какие-то претензии. Так вот таких деятелей сразу на кол))) А может это провокация со стороны твоих конкурентов!!! В любом случае, Жека, мы за тебя, ты наикрутейший специалист и учитель в свой сфере деятельности!!!
Круто, просто круто!
Спасибо!
круто! обалденно!
Красота!
топовый контент, спасибо Евгений
Спасибо огромное Вам! Очень помогло это видео :)
Eselente como siempre !!! Muchas garcias por tu labor.
JS наконец-то ожил! :D Отличное видео!
Огромное спасибо, классное видео
Пожалуйста!
Супер. А как сделать такой параллакс в в виде плагина, чтоб можно было его использовать где надо. Может в нескольких местах страницы.
Дякую за контентіще!
Будь ласка!
Видос отличный) Ну коли просишь предложения по улучшению, вот пара: нужно добавить троттлер который будет вызывать обработчик движения мыши не при каждом событии, а например раз в 50мс. Таким образом мы оптимизируем производительность, а для пользователя это вообще не будет заметно.
Далее нужно обернуть в функцию передачу стилей и вызывать ее для каждого элемента параллакса в цикле. Это нужно для улучшения лаконичности кода, а также чтобы унифицировать решение. Например помечать параллак-объекты в верстке специальными data-атрибутами, в которых указывать свой коофицент, а для всей сцены создать дата атрибут со скоростью. Таким образом можно будет собрать мини-либу для парралакса.
После того как сделал проверку на parallax, можно выбирать элементы относительно него, а не документа, ведь они по факту все дочерние. Это во-первых, позволяет делать более точную выборку. Во-вторых, это небольшая оптимизация, которая позволяет искать узлы не от документа, а от уже выбранного узла.
Спасибо
Здравствуйте, подскажите пожалуйста как вставить данную анимацию в Figma ?
Спасибо вам огромное!!!!!
Пожалуйста!
Лайк і комент ще не дивлячись:)
Дякую!
Спасибо Женя, как всегда ты на высоте ) У меня вопросик.. max-aspect-ratio все современные браузеры понимают?
Здравствуйте, можете выпустить видео подробно про атрибут hrefland, яб его с удовольствием посмотрел на примерах) ну если не получится то ничего страшного, вы и так много видео полезных выпускаете за что вам ОГРОМНОЕ СПАСИБО!
Здравствуйте! Спасибо за потрясающую подачу материала. У меня вопрос: не могли бы вы, пожалуйста, записать туториал по созданию переходов между экранами? Например с использованием barba.js. Конкретно интересуют переходы slide (при клике на ссылку экран "сдвигается" и контент второго экрана заменяет контент первого, надеюсь понятно что имеется в виду) и fade.
Очень надеюсь на ваш ответ, заранее спасибо!
Спасибо!!! Лучший!!!
Пожалуйста!
Ты блин вашшее))) я хотел бы чтобы ты научил нас JS так что бы нам тоже было так просто создавать анимации ))
Мы знаем JS но не можем так круто его использовать)
Топчик!
Спасибо!
спасибо, все работает
Почему могут не применяться стили? При загрузке страницы сразу стоит transforn: translate(0%, 0%);. После движения мыши стили пропадают вообше.
Даа, спасибо, Жека )
Ты лучший!
Спасибо!
Дякую за відео, друже!
круто брат
Спасибо!
Много видос и по быстрее а то я соскучился
Ты весь СНГ поднимешь своими обучениями.
Годнята всегда отличается своим запахом.
Жека круто !!!
Спасибо!
Можете снять видос по html-препроцессорам? И используют ли их? По css часто слышу, а про html-препроцессоры недавно узнал
Видео крутое!)
Жека , было бы круто от тебя получить видосик по посадке верстки на Wordpress. Очень мало адекватного контента в этом направлении и если сделаешь будет круто) уверен будет 100500 лайков!)
Да, будет мини курс
полным полно видео на эту тему, где это очень мало контента?
Подскажите почему JS код не работает, пишет ошибка в 5 строке:
"use strict"
//Ждем загрузку контента
window.onload = function() {
const parallax = document.querySelector('.parallax');
if (parallax) {
Добрый день, а у вас есть видео в которым рассказывается какие минимальные знания нужны что бы начать хоть какую то копеечку зарабатывать и как? Если нет, планируеете сделать? Спасибо за видео, в любом случаее.
Ничего не понял, но очень интересно
Жека, что думаешь о BootStrape и будешь ли ты делать гайды по ниму?
посмотрим)
Можете пожалуйста скинуть строки для обнуления css? Увидел на видео про SASS, все переписал, только строку на html, body не смог полностью увидеть
Круть👍🔥
Спасибо!
@@FreelancerLifeStyle и Вам спасибо за Вашу работу и такие отличные видео!
Здравствуйте! Подскажите, а как убрать этот параллакс эффект движения картинки на мобильных устройствах?
О, видео
Ага)
супер! спасибо!
но замечу, что Procent - в англ.языке нету. правильно писать percent
Евгений можете пожалуйста посоветовать где можно найти и скачать psd макеты для новичков?
Спасибо за видео, отличный урок. Был, помнится, еще один урок по параллаксу (с маяком и морем). В этом, к сожалению, я не достиг результата, хотя, вроде, проверил все не один раз. В консоли пишет предупреждение: Ошибка разбора значения в 'transform'. Объявление пропущено. В чем может быть штанга?
Ууу спасибо как раз искал такой урок
Можно такой еффект поставить на маленком блоке? Либо фото?
Конечно
Я рад!
Жека, привет! не могу словить почему clouds.style.cssText = `transform: translate (${positionX / forClouds}%,${positionY / forClouds}%);`;
не устанавливается ? пробовал напрямую clouds.style.transform = `......`; тоже самое.
разобрался... translate (${po.. и translate(${po.. не одно и то же( дело в пробеле после функции - его не должно быть.. кстати тож самое было в этом примере и с rgba( и rgba (..
Ладно, ок. зато разобрался с vs code live server и degugger для chrome, ну и как с git в vs code работать пока гоняли меня с компа на комп)))) Спасибо!
Дякую за відео. 👍
Почему фоновые изображения могут уезжать бесконечно наверх или вниз? Как ограничить их передвижение?
Блин возьми к себе стажером =) готов за еду работать, да что там, и без еды готов )))
У меня по умолчанию от user agent stylesheet идет margin: 8px для body, это новый хром такой нехороший стал? не нашел обнуления этого маргина в уроке, какое-то время помучался =)
Еще была проблема, что при настройке параллакса при скролле картинки гор и человека пропадали. Добавление z-index: 2 и 3 в скрипты для трансформа парентов картинок порешали эту проблему.
Спасибо за труд, Жека!