Супер! Дякую! Сиджу зараз на відео про флекси , але кожне нове відео - мотивує навіть своєю появою , бо так хочеться навчитися робити такі круті ефекти! Обов'язково сюди доберусь з часом ( бо намагаюсь все робити поступово).
Я очень рад, что прохожу обучение именно у тебя. Уже добрался до js. Спасибо тебе огромное за твой труд, за все плюшки на патреоне тоже огромное спасибо))) Поехали)))
Женя, спасибо за твои уроки!!! 👍 Прошел твой бесплатный курс за 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)`; }); } }
Спасибо за твою работу, благодаря тебе и твоим БЕСПЛАТНЫМ урокам, я стал фронт энд разработчиком. Серьезно, ты даже букмекеров на рекламишь. По-сути ты делаешь это исключительно потому что ты хочешь делать мир лучшее. Раньше такой контент можно было найти на западном Ютубе.
Видос отличный) Ну коли просишь предложения по улучшению, вот пара: нужно добавить троттлер который будет вызывать обработчик движения мыши не при каждом событии, а например раз в 50мс. Таким образом мы оптимизируем производительность, а для пользователя это вообще не будет заметно. Далее нужно обернуть в функцию передачу стилей и вызывать ее для каждого элемента параллакса в цикле. Это нужно для улучшения лаконичности кода, а также чтобы унифицировать решение. Например помечать параллак-объекты в верстке специальными data-атрибутами, в которых указывать свой коофицент, а для всей сцены создать дата атрибут со скоростью. Таким образом можно будет собрать мини-либу для парралакса. После того как сделал проверку на parallax, можно выбирать элементы относительно него, а не документа, ведь они по факту все дочерние. Это во-первых, позволяет делать более точную выборку. Во-вторых, это небольшая оптимизация, которая позволяет искать узлы не от документа, а от уже выбранного узла.
Есть идея Картинка с землёй на которой стоит человек сделать длиннее, т.е. земли под человеком должно отображаться больше ("можно с переходом под землю") Но отображать ты часть как в видео. При скроле быстро поднимать это изображение. Будет иллюзия отдаления, или ухода под землю)
Спасибо за урок!) Не знаю, на сколько это может считаться оптимизацией: - в функцию назначения стилей сразу передавать значения coordXpercent и coordYpercent с учетом коэффициента. Тут же добавить transition, с помощью которого можно управлять скоростью и чуток поведением (lenear, ease-out). Таким образом можно обойтись без distX/distY и не пересчитывать coordXpercent и coordYpercent. Машина у меня старая и с графикой у нее туго, зрительно, мой вариант на ней более плавно происходит; - сами же назначения стилей для каждого элемента загнал в цикл; - по мелочам - если coordXpercent и coordYpercen получать не в процентах, а в отношении (не умножая на 100), то можно их УМНОЖАТЬ на коэффициент выраженный в процентах, вроде так более наглядно получается.
Ты блин вашшее))) я хотел бы чтобы ты научил нас JS так что бы нам тоже было так просто создавать анимации )) Мы знаем JS но не можем так круто его использовать)
@@FreelancerLifeStyle Сейчас начал смотреть 4-й стрим для патронов, и узнал, что недавно там кто-то высказывал в закрытом чате какие-то претензии. Так вот таких деятелей сразу на кол))) А может это провокация со стороны твоих конкурентов!!! В любом случае, Жека, мы за тебя, ты наикрутейший специалист и учитель в свой сфере деятельности!!!
Видео крутое!) Жека , было бы круто от тебя получить видосик по посадке верстки на Wordpress. Очень мало адекватного контента в этом направлении и если сделаешь будет круто) уверен будет 100500 лайков!)
Здравствуйте, можете выпустить видео подробно про атрибут hrefland, яб его с удовольствием посмотрел на примерах) ну если не получится то ничего страшного, вы и так много видео полезных выпускаете за что вам ОГРОМНОЕ СПАСИБО!
Привет Женя! Нашел твой канал по рекомендации друга, начал смотреть, оказалось что живём в одном городе)) Так же начал учиться вёрстке, и начало успешно получаться, уже формирую портфолио своими работами. Спасибо что делаешь такой контент, действительно качественный и позитивный, а также учишь правильным позициям в жизни (к примеру твой слоган). Я уверен ты меняешь жизни многих людей, подавая хороший пример, продолжай в том же духе!) P.S: Хотел взять менторство на Патреоне, буквально за день свободные места были раскуплены(
Здравствуйте! Спасибо за потрясающую подачу материала. У меня вопрос: не могли бы вы, пожалуйста, записать туториал по созданию переходов между экранами? Например с использованием barba.js. Конкретно интересуют переходы slide (при клике на ссылку экран "сдвигается" и контент второго экрана заменяет контент первого, надеюсь понятно что имеется в виду) и fade. Очень надеюсь на ваш ответ, заранее спасибо!
Жека, привет! не могу словить почему 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 работать пока гоняли меня с компа на комп)))) Спасибо!
Жень, не в курсе, почему у меня происходит рывок контента при параллаксе на скролле? Типа сначала нормально скроллится где-то до половины, потом 100 пикселей параллакса нет, а потом контент делает рывок на эти 100 пикселей и снова идет нормально. Не подскажешь, в какую степь копать?
Подскажите почему JS код не работает, пишет ошибка в 5 строке: "use strict" //Ждем загрузку контента window.onload = function() { const parallax = document.querySelector('.parallax'); if (parallax) {
Добрый день, а у вас есть видео в которым рассказывается какие минимальные знания нужны что бы начать хоть какую то копеечку зарабатывать и как? Если нет, планируеете сделать? Спасибо за видео, в любом случаее.
Как вам?
🔴 Карта канала: 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 на UA-cam в русскоговорящем сегменте!
Спасибо!
Отлично! Спасибо, Женя!
Сделать на чистом это супер!!!
Пожалуйста!
Я очень рад, что прохожу обучение именно у тебя. Уже добрался до js. Спасибо тебе огромное за твой труд, за все плюшки на патреоне тоже огромное спасибо))) Поехали)))
Пришел сюда после интервью у бороды и не пожалел. Спасибо за работу! Подписка и лайк :)
Я рад!
Спасибо вам за ваши ролики, очень помогают разобраться в той или иной теме.
Я очень рад этому!
Это просто бомбически! Женя, огромное Вам спасибо, за ваши труды. Успехов и удачи. Любуюсь не нарадуюсь parallax.
Жека, это супер! Не останавливайся! И большое тебе спасибо!
Пожалуйста!
Спасибо вы меняете жизнь сотен тысяч людей к лучшему желаю вам к концу года преодолеть планку в миллион подписчиков 🙏🙏🙏
Спасибо!
Женя, спасибо за твои уроки!!! 👍
Прошел твой бесплатный курс за 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 наконец-то ожил! :D Отличное видео!
Спасибо ра реальное качественное бесплатное обучение, в наше время большая находка. Жека = клондайк плюшек.
Видос отличный) Ну коли просишь предложения по улучшению, вот пара: нужно добавить троттлер который будет вызывать обработчик движения мыши не при каждом событии, а например раз в 50мс. Таким образом мы оптимизируем производительность, а для пользователя это вообще не будет заметно.
Далее нужно обернуть в функцию передачу стилей и вызывать ее для каждого элемента параллакса в цикле. Это нужно для улучшения лаконичности кода, а также чтобы унифицировать решение. Например помечать параллак-объекты в верстке специальными data-атрибутами, в которых указывать свой коофицент, а для всей сцены создать дата атрибут со скоростью. Таким образом можно будет собрать мини-либу для парралакса.
После того как сделал проверку на parallax, можно выбирать элементы относительно него, а не документа, ведь они по факту все дочерние. Это во-первых, позволяет делать более точную выборку. Во-вторых, это небольшая оптимизация, которая позволяет искать узлы не от документа, а от уже выбранного узла.
Спасибо
Есть идея Картинка с землёй на которой стоит человек сделать длиннее, т.е. земли под человеком должно отображаться больше ("можно с переходом под землю")
Но отображать ты часть как в видео.
При скроле быстро поднимать это изображение.
Будет иллюзия отдаления, или ухода под землю)
Спасибо за твои классные уроки 👍
Пожалуйста!
Спасибо) Супер эффект :)
Пожалуйста!
Как всегда шикарно!!!!
Спасибо!
Спасибо за урок!)
Не знаю, на сколько это может считаться оптимизацией:
- в функцию назначения стилей сразу передавать значения coordXpercent и coordYpercent с учетом коэффициента. Тут же добавить transition, с помощью которого можно управлять скоростью и чуток поведением (lenear, ease-out). Таким образом можно обойтись без distX/distY и не пересчитывать coordXpercent и coordYpercent. Машина у меня старая и с графикой у нее туго, зрительно, мой вариант на ней более плавно происходит;
- сами же назначения стилей для каждого элемента загнал в цикл;
- по мелочам - если coordXpercent и coordYpercen получать не в процентах, а в отношении (не умножая на 100), то можно их УМНОЖАТЬ на коэффициент выраженный в процентах, вроде так более наглядно получается.
не человек, золото
Спасибо!
Евгений просто спасибо
Ничего не понятно, но очень интересно :)
Это то, что я долго искал
Супер. Спасибо за ролик.
Пожалуйста!
Eselente como siempre !!! Muchas garcias por tu labor.
Ты блин вашшее))) я хотел бы чтобы ты научил нас JS так что бы нам тоже было так просто создавать анимации ))
Мы знаем JS но не можем так круто его использовать)
Спасибо огромное Вам! Очень помогло это видео :)
Жека, спасибо за полезное видео!!!
Пожалуйста!
@@FreelancerLifeStyle Сейчас начал смотреть 4-й стрим для патронов, и узнал, что недавно там кто-то высказывал в закрытом чате какие-то претензии. Так вот таких деятелей сразу на кол))) А может это провокация со стороны твоих конкурентов!!! В любом случае, Жека, мы за тебя, ты наикрутейший специалист и учитель в свой сфере деятельности!!!
Лайк і комент ще не дивлячись:)
Дякую!
Офигенно! Красиво!
топовый контент, спасибо Евгений
респект за разбор параллакса по полочкам
Огромное спасибо, классное видео
Пожалуйста!
Видео крутое!)
Жека , было бы круто от тебя получить видосик по посадке верстки на Wordpress. Очень мало адекватного контента в этом направлении и если сделаешь будет круто) уверен будет 100500 лайков!)
Да, будет мини курс
полным полно видео на эту тему, где это очень мало контента?
Круто, просто круто!
Спасибо!
Красота!
круто! обалденно!
Дякую за відео, друже!
Спасибо вам огромное!!!!!
Пожалуйста!
Дякую за контентіще!
Будь ласка!
Много видос и по быстрее а то я соскучился
Здравствуйте, можете выпустить видео подробно про атрибут hrefland, яб его с удовольствием посмотрел на примерах) ну если не получится то ничего страшного, вы и так много видео полезных выпускаете за что вам ОГРОМНОЕ СПАСИБО!
Привет Женя!
Нашел твой канал по рекомендации друга, начал смотреть, оказалось что живём в одном городе))
Так же начал учиться вёрстке, и начало успешно получаться, уже формирую портфолио своими работами.
Спасибо что делаешь такой контент, действительно качественный и позитивный, а также учишь правильным позициям в жизни (к примеру твой слоган).
Я уверен ты меняешь жизни многих людей, подавая хороший пример, продолжай в том же духе!)
P.S: Хотел взять менторство на Патреоне, буквально за день свободные места были раскуплены(
кстати удивлён что ни разу не пересеклись в городе)
Привет! Рад!
Менторство лучше с перых чисел брать, там и места появятся
@@FreelancerLifeStyle понял, спасибо!)
спасибо, все работает
Здравствуйте, подскажите пожалуйста как вставить данную анимацию в Figma ?
Спасибо!!! Лучший!!!
Пожалуйста!
Ууу спасибо как раз искал такой урок
Можно такой еффект поставить на маленком блоке? Либо фото?
Конечно
Я рад!
Супер. А как сделать такой параллакс в в виде плагина, чтоб можно было его использовать где надо. Может в нескольких местах страницы.
Здравствуйте! Спасибо за потрясающую подачу материала. У меня вопрос: не могли бы вы, пожалуйста, записать туториал по созданию переходов между экранами? Например с использованием barba.js. Конкретно интересуют переходы slide (при клике на ссылку экран "сдвигается" и контент второго экрана заменяет контент первого, надеюсь понятно что имеется в виду) и fade.
Очень надеюсь на ваш ответ, заранее спасибо!
Подскажи, почему может не работать js код, если в консоли не выдаёт ошибок?
Бесы мешают. Святой водой окропи.
Ты лучший!
Спасибо!
Ты весь СНГ поднимешь своими обучениями.
Годнята всегда отличается своим запахом.
круто брат
Спасибо!
Ничего не понял, но очень интересно
Дякую за відео. 👍
Блин возьми к себе стажером =) готов за еду работать, да что там, и без еды готов )))
Жека, привет! не могу словить почему 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 работать пока гоняли меня с компа на комп)))) Спасибо!
Почему могут не применяться стили? При загрузке страницы сразу стоит transforn: translate(0%, 0%);. После движения мыши стили пропадают вообше.
Круть👍🔥
Спасибо!
@@FreelancerLifeStyle и Вам спасибо за Вашу работу и такие отличные видео!
Спасибо Женя, как всегда ты на высоте ) У меня вопросик.. max-aspect-ratio все современные браузеры понимают?
Здравствуйте! Подскажите, а как убрать этот параллакс эффект движения картинки на мобильных устройствах?
Жека круто !!!
Спасибо!
О, видео
Ага)
Даа, спасибо, Жека )
Можете снять видос по html-препроцессорам? И используют ли их? По css часто слышу, а про html-препроцессоры недавно узнал
Жень, не в курсе, почему у меня происходит рывок контента при параллаксе на скролле? Типа сначала нормально скроллится где-то до половины, потом 100 пикселей параллакса нет, а потом контент делает рывок на эти 100 пикселей и снова идет нормально. Не подскажешь, в какую степь копать?
Подскажите почему JS код не работает, пишет ошибка в 5 строке:
"use strict"
//Ждем загрузку контента
window.onload = function() {
const parallax = document.querySelector('.parallax');
if (parallax) {
Можете пожалуйста скинуть строки для обнуления css? Увидел на видео про SASS, все переписал, только строку на html, body не смог полностью увидеть
Евгений можете пожалуйста посоветовать где можно найти и скачать psd макеты для новичков?
Жека, что думаешь о BootStrape и будешь ли ты делать гайды по ниму?
посмотрим)
Сними видео по горячим клавишам которые ты используешь
Почему фоновые изображения могут уезжать бесконечно наверх или вниз? Как ограничить их передвижение?
Добрый день, а у вас есть видео в которым рассказывается какие минимальные знания нужны что бы начать хоть какую то копеечку зарабатывать и как? Если нет, планируеете сделать? Спасибо за видео, в любом случаее.