Как вам? 🔴 Карта канала: 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

3 жыл бұрын

Супер!)

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

@FreelancerLifeStyle

3 жыл бұрын

Я рад!

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

@FreelancerLifeStyle

3 жыл бұрын

Я рад!

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

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

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

@FreelancerLifeStyle

3 жыл бұрын

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

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

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

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

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

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

@FreelancerLifeStyle

3 жыл бұрын

Спасибо!

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

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

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

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

@FreelancerLifeStyle

3 жыл бұрын

Будь ласка!

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

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

@FreelancerLifeStyle

3 жыл бұрын

Я рад!

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

@FreelancerLifeStyle

3 жыл бұрын

Спасибо!

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

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

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

@FreelancerLifeStyle

3 жыл бұрын

Спасибо!

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

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

@FreelancerLifeStyle

3 жыл бұрын

Я рад!

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

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

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

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

@FreelancerLifeStyle

3 жыл бұрын

Спасибо!

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

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

@FreelancerLifeStyle

3 жыл бұрын

Спасибо!

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

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

@FreelancerLifeStyle

3 жыл бұрын

Будь ласка!

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

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

@FreelancerLifeStyle

3 жыл бұрын

Ура!

Бомба!!!❤️🙏

@FreelancerLifeStyle

3 жыл бұрын

Спасибо!

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

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

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

@FreelancerLifeStyle

3 жыл бұрын

Спасибо!

@user-hg9hr8gd7o

3 жыл бұрын

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

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

@FreelancerLifeStyle

3 жыл бұрын

Спасибо!

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

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

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

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

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

@FreelancerLifeStyle

3 жыл бұрын

Спасибо!

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

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

@user-gg4dv2rx2g

3 жыл бұрын

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

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

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

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

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

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

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

@FreelancerLifeStyle

3 жыл бұрын

Спасибо!

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

@FreelancerLifeStyle

3 жыл бұрын

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

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

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

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

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

@FreelancerLifeStyle

3 жыл бұрын

Спасибо

Спасибо 🙏

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

Ты лучший!

@FreelancerLifeStyle

3 жыл бұрын

Спасибо!

круто брат

@FreelancerLifeStyle

3 жыл бұрын

Спасибо!

Топчик!

@FreelancerLifeStyle

3 жыл бұрын

Спасибо!

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

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

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

@FreelancerLifeStyle

3 жыл бұрын

Спасибо!

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

Круть👍🔥

@FreelancerLifeStyle

3 жыл бұрын

Спасибо!

@Max_FS

3 жыл бұрын

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

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

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

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

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

@mmax487

3 жыл бұрын

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

@FreelancerLifeStyle

3 жыл бұрын

Конечно

@FreelancerLifeStyle

3 жыл бұрын

Я рад!

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

@FreelancerLifeStyle

3 жыл бұрын

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

@TheGlebSChannel

3 жыл бұрын

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

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

@FreelancerLifeStyle

3 жыл бұрын

Будь ласка!

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

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

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

@FreelancerLifeStyle

3 жыл бұрын

Пожалуйста!

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

@FreelancerLifeStyle

3 жыл бұрын

Дякую!

О, видео

@FreelancerLifeStyle

3 жыл бұрын

Ага)

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

Интересно

Давай еще:)

*Л а й к* за отличное видео

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

@FreelancerLifeStyle

3 жыл бұрын

посмотрим)

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

@FreelancerLifeStyle

3 жыл бұрын

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

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

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

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

Урыыыы, магия)

@FreelancerLifeStyle

3 жыл бұрын

Это точно)

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

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

@FreelancerLifeStyle

3 жыл бұрын

Уряя!

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

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

Kruto!👍