Отлично объясняете! Но уже второй урок вы вызываете querySelectorAll внутри коллбэка. Поиск по DOM-дереву это дорогая операция, тем более querySelectorAll. Таким образом вы в 2-3 раза замедляете работу скрипта. Элементы в процессе не меняются, и их data-speed тоже. Поэтому есть смысл записать их в переменные заранее и не вычислять каждый раз. Так как ваши уроки смотрят в основном начинающие, то они запоминают плохие практики не осознавая этого.
Очень правильно, что пишешь const. Это говорит программисту и интерпретатору, что данная переменная не будет дальше переопределяться другими значениями. И когда смотришь чужой код, то не надо внимательно просматривать всю функцию чтобы понять, а не переопределил ли ее автор каким-то другим объектом/значением. Те кто критикует использование const слабо разбираются в теме. const надо использовать везде где только можно.
Кто критикует использование const те непрограммисты, как и кинокритики, они не режиссеры, литературные критики, они не редакторы или писатели, они только полагаются на внутренние убеждения или идеализацию собственного эгоцентризма.
Подскажите пожалуйста что this делает в данном контексте, и если я правильно понял второй аргумент в функции document.addEventListener('mousemove', parallax); передает все движения мыши в качестве аргумента event в функцию parallax и вызывает ее?
спасибо большое за отличные уроки, к сожалению нет денег для курса вашего, но эти бесплатные фичи очень помогают при самообразовании, спасибо за уроки:)
@@nikitaananjevs4094 он не это имелл ввиду, а то, когда ты скролишь страницу, у тебя какие-то элементы на странице движутся быстрее, а какие-то медленнее
@@livevikulin да что сложного то? Есть такое событие onscroll у того же window, или любого прокручиваемого объекта. В него пишешь функцию, замеряешь offsetY и исходя из его величины задаёшь позицию чему-ты-хочешь. Одному один коэффициент, другому другой - и они движутся по разному.
Здравствуйте, подскажите пожалуйста, как сделать этот ""БДЫЖ" (или shake не знаю как его назвать) эффект, когда страница при прокрутке достигает конца, типа ударятся о верхнюю или нижнюю границу браузера, очень буду благодарен за ссылку на статью или видео...просто не знаю даже как это загуглить, потому что просто не понимаю, как это называется)))
@@masvelmasvel8058 многие из них слишком тяжелые, и/или жрут много оперативки. На своем опыте знаю, если много от слайдера не нужно - лучше создать самому
Интересно было бы посмотреть уроки создания анимации. Только на в виде передвижения кубиков, а какой-то крутой анимации. Типа www.rudebox.org.ua/demo/creative-animation-for-site-with-svg/index2.html
О май гад. Ты учишь как божечка. Я покланяюсь тебе, о великий разработчик Артём. Прими меня вослужение и я буду приносить тебе в полнолунее жертву твоих врагов и конкурентов, и еще тех кто ставит дислайки.
КТО ЗА ПОДДЕРЖИТЕ ЛАЙКАМИ!!!! Артем, сделайте тач слайдер на события pointers, touch... реально полезно уметь это делать. Можно конечно и через готовые решения, но нужно и самому разобраться!!! Какой то прикольный слайдерик адаптивный.
Мне было би интересна реализация слайдера как здесь mstagency.ru . И самый большой вопрос как у текущего урока сгладить рывок при наведении на параллакс с левой стороны экрана или с правой. Спасибо огромное за уроки.
@@masvelmasvel8058 нет, с помощью css можно скрыть нативный и отрисовать свой, но двигать его при прокрутке колесиком мышки или при зажатой ЛКМ мыши, это уже делается с помощью js, но вот как конкретно сделать и то и другое я не знаю, мне интересно, вот и попросил это в комментарии.
Артём, стоит ли заморачиваться оптимизацией таких скриптов, насколько это влияет на производительность? Например, в данном коде бессмысленно при каждом шорохе мыши отрабатывает querySelectorAll, хотя можно сделать это один раз при инициализации. Насколько подобное критично в реальном проекте?
Я имел ввиду, когда юзер водит во всех Осях мышкой, что бы отдельный элемент двигался по разному, но не выходил за область допустим по 100px квадратных??
Артём, Спасибо за уроки(за все...). у меня Mac, VSCode -> Live Server 5.6.1, Chrome. Столкнулся с проблемой... После авто сохранения страница автоматически не обновляется.
Добрый день. Подскажите а как сделать смешение блока по оси Y но текстового блока ? То есть есть два рядом блока один блок картинка - рядом текст, и при прокрутке скорость текстового блока быстрей - как на этом сайте 2 раздел - themes.themegoods.com/grandrestaurant/demo3/
Артем, спасибо Вам за ваши видео. Очень помагают в изучении. Посмотрел курс по вордпрессу, по-моему самый лучший из всех которые я смотрел. А не будет ли урока, как сделать лэндинг на вордпресс с возможностью редактирования из админки? Без плагинов, например через виджеты или customizer? Просто не совсем понимаю как делают лэндинги на вордпресс
Здравствуйте! Я начинающий front-end developer. На данный момент знаю jquery. Но как я понял на нем что-то крутое создать нельзя (по типу того же параллакса или карточек из прошлого урока). Подскажите пожалуйста, какой фреймворк сейчас лучше учить? Или же лучше выучить native js для веба и не париться? Спасибо)
Ну почему же нельзя? Все, что показано в роликах можно сделать на jQuery. В роликах показан чистый JS. Все тоже самое можно сделать на jQuery. Это библиотека, которая упрощает тебе взаимодействие с элементами. Что ты имеешь ввиду под "крутым"? Если то, что показано в уроках, то уже давно есть готовые решения, библиотеки и т.д, где ты указываешь элемент с которым хочешь взаимодействовать. Ручками писать нужно либо для практики, либо под какую ту ситуацию (например, нет в слайдере или параллаксе такого, что тебя бы устроило и ты подумал "напишу сам").
@@gamechannel_833 пишу на vue и радуюсь жизни. Простой в освоении, сильный и набирающий популярность фреймворк. Но предупреждаю, пока что на нем тяжелее искать работу, чем на react/angular
Лучше бы делать все без использования фич ES6+ (Это про template strings), или же говорить, что их желательно транспайлить, чтобы перегнать в ES5 синтаксис. Конечно, поддержка 93% браузеров это круто и сведет проблему совместимости к минимуму, но если начать использовать более интересные плюшки ES6+, то может вылезти эта самая проблема
лучше добавить определение браузера и если отлавливается образец мамонта - намекнуть, что браузер крайне устарел ES6 вышел 4 года назад, это слишком большой срок чтобы до сих пор заморачиваться с переводом в 10-летний стандарт, и попахивает тем же, чем занимаются те, кто до сих пор сидит на Win XP, и лишать 90%+ каких-то хороших вещей из-за той небольшой доли пользователей которые не хотят переходить на новые браузеры - не лучшее решение
Как начинающий веб разработчик, ни как не могу смотреть ваши уроки по SCC Grid. Как только начинаю смотреть и делать тоже самое что вы делаете у меня постоянно проблемы с sass файлами. То не правильно генерирует css файлы то ещё что то. Вообщем я не как не могу дойти до верстки. Так как все проблемы связана с text editor extensions. Можно будет все ручное создавать? А тут уже сколько новых уроков вышло и я не могу их смотреть пока не досмотрю с гирдами. Честно скажу у меня уже боязнь что вы опять будете использовать какой нибудь extension. И этот урок пропущу пока что.
1) SCC исправь, пожалуйста, на CSS 2) Если начинающий, то в Grid пока, как мне кажется, не стоит. Лучше flex 3) Можешь использовать не терминальные команды, а Koala. 4) Sass капризный к пробелам. Попробуй SCSS.
Сделал, получилось круто, спасибо) правда, я вот не смог разобраться, как скачать эти фоновые изображения. Пришлось делать свои, получилось вот что: github.com/MikhailKey/Parallax-Js
Отлично объясняете! Но уже второй урок вы вызываете querySelectorAll внутри коллбэка. Поиск по DOM-дереву это дорогая операция, тем более querySelectorAll. Таким образом вы в 2-3 раза замедляете работу скрипта. Элементы в процессе не меняются, и их data-speed тоже. Поэтому есть смысл записать их в переменные заранее и не вычислять каждый раз. Так как ваши уроки смотрят в основном начинающие, то они запоминают плохие практики не осознавая этого.
Полезный комментарий, от всех кто лайкнул говорю спасибо)
для тех кто не ищет легких путей =)
Фоновые изображения из урока(вдруг кому пригодится :) ):
demo.yootheme.com/themes/joomla/2014/frequency/templates/yoo_frequency/images/default/parallax/parallax_bg.jpg
demo.yootheme.com/themes/joomla/2014/frequency/templates/yoo_frequency/images/default/parallax/parallax_layer1.png
demo.yootheme.com/themes/joomla/2014/frequency/templates/yoo_frequency/images/default/parallax/parallax_layer2.png
спасибо
Очень правильно, что пишешь const. Это говорит программисту и интерпретатору, что данная переменная не будет дальше переопределяться другими значениями. И когда смотришь чужой код, то не надо внимательно просматривать всю функцию чтобы понять, а не переопределил ли ее автор каким-то другим объектом/значением. Те кто критикует использование const слабо разбираются в теме. const надо использовать везде где только можно.
Кто критикует использование const те непрограммисты, как и кинокритики, они не режиссеры, литературные критики, они не редакторы или писатели, они только полагаются на внутренние убеждения или идеализацию собственного эгоцентризма.
Сколько каналов на эту тему не пересмотрел, Артём лучше всех даёт инфу. Спасибо большое!
Круто! спасибо огромное! Даже не думал, что мой вопрос так быстро всплывет!!!
У Вас очень интересные уроки. Не бросайте это дело.
Было круто! Спасибо за контент!
УРА товарищи!!!
Подскажите пожалуйста что this делает в данном контексте, и если я правильно понял второй аргумент в функции document.addEventListener('mousemove', parallax); передает все движения мыши в качестве аргумента event в функцию parallax и вызывает ее?
спасибо большое за отличные уроки, к сожалению нет денег для курса вашего, но эти бесплатные фичи очень помогают при самообразовании, спасибо за уроки:)
Спасибо вам за ваши труди. А как на счёт того что сделать эффекты при скролле.
wow.js + animate.css
попробуй загуглить, достаточно простые но эффектные анимации для Div tags
но если разобрать чтонибудь кастомное то было бы круто
@@nikitaananjevs4094 он не это имелл ввиду, а то, когда ты скролишь страницу, у тебя какие-то элементы на странице движутся быстрее, а какие-то медленнее
@@livevikulin да что сложного то? Есть такое событие onscroll у того же window, или любого прокручиваемого объекта. В него пишешь функцию, замеряешь offsetY и исходя из его величины задаёшь позицию чему-ты-хочешь. Одному один коэффициент, другому другой - и они движутся по разному.
Спасибо!
Здравствуйте, подскажите пожалуйста, как сделать этот ""БДЫЖ" (или shake не знаю как его назвать) эффект, когда страница при прокрутке достигает конца, типа ударятся о верхнюю или нижнюю границу браузера, очень буду благодарен за ссылку на статью или видео...просто не знаю даже как это загуглить, потому что просто не понимаю, как это называется)))
Артем, а как насчет того что бы сделать адаптивный слайдер ?
Хорошая идея
плагинов-слайдеров же хватает и так, зачем колесо заново создавать?
@@masvelmasvel8058 многие из них слишком тяжелые, и/или жрут много оперативки. На своем опыте знаю, если много от слайдера не нужно - лучше создать самому
@@faust2134 хм.. в целом согласен
Как раз то что нужно, ты большой молодец)
Конечно это лайк.
Но говорить что мой лайк ничего не стоит...((
Он много стоит.
Куда попало я свой лайк не тыкаю!)
Подскажите пожалуйста,можно ли использовать parallax.js в реакт приложение?
Огромное спасибо! Как всегда очень доступно и интересно!
Для работы с тегом img тебе нужно было прописать: .layer img {width: 100%; height: 100%; object-fit: cover}
По задумке эти элементы являются фоном, поэтому логичнее картинки задать через background
@@Glo_Academy Я в курсе) У тебя был просто завтык как работать с img, видимо забыл просто, вот и написал.
Интересно было бы посмотреть уроки создания анимации. Только на в виде передвижения кубиков, а какой-то крутой анимации. Типа www.rudebox.org.ua/demo/creative-animation-for-site-with-svg/index2.html
Где взять картинки для такого эффекта ?
прикольная фича. спасибо:)
Спасибо! Ваще бомбически! 👍⚡️👍⚡️👍
Урааа! Еще не досмотрел, а уже жду следующую фичу! =)
Спасибо!!!
Лайк не глядя
Ты крут , просто жесть !!!!!
жмякнул бы хоть 100 раз лайк !!!!!!!
Спасибо за информативность !!!
Очень круто! Спасибо!
О май гад. Ты учишь как божечка. Я покланяюсь тебе, о великий разработчик Артём. Прими меня вослужение и я буду приносить тебе в полнолунее жертву твоих врагов и конкурентов, и еще тех кто ставит дислайки.
Необычно. Благодарю за поддержку. Жертв не нужно, достаточно лайка, колокольчика подписки и репоста :)
почему в моем журнале console.log нет пустого значения?
КТО ЗА ПОДДЕРЖИТЕ ЛАЙКАМИ!!!!
Артем, сделайте тач слайдер на события pointers, touch... реально полезно уметь это делать. Можно конечно и через готовые решения, но нужно и самому разобраться!!! Какой то прикольный слайдерик адаптивный.
background-size можно писать в общей куче. background: #fff url('img.jpg') center / cover no-repeat;
Классная рубрика, хотелось бы ещё, чтобы вы оставляли папку с кодом в описании
Мне было би интересна реализация слайдера как здесь mstagency.ru . И самый большой вопрос как у текущего урока сгладить рывок при наведении на параллакс с левой стороны экрана или с правой. Спасибо огромное за уроки.
добавь свойство transition.
к примеру: transition: all linear 0.8s;
Огонь 👍👍👍👍👍
Пожалуйста расскажи как сделать свой вертикальный ползунок прокрутки страницы сайта и скрыть базовый у браузера. Это очень интересно!
это не js, а css, загугли - scrollbar
@@masvelmasvel8058 Скрыть нативный и показать свой, да - это css? а вот его функционал - это js
@@obzoryGameMAX не совсем понял, нужно изменить функционал скролбара? зачем это делать? оО
@@masvelmasvel8058 нет, с помощью css можно скрыть нативный и отрисовать свой, но двигать его при прокрутке колесиком мышки или при зажатой ЛКМ мыши, это уже делается с помощью js, но вот как конкретно сделать и то и другое я не знаю, мне интересно, вот и попросил это в комментарии.
Я тоже использую const в глобальной области определения, в локальной var или let
Ребята привет! Подскажите как решаете вопрос с политикой конфедициальности в форме обратной связи, где ее берёте ? Может есть какие то универсальные
для селектора * можно еще добавить *::before и *::after что бы уж все элементы
Артём, стоит ли заморачиваться оптимизацией таких скриптов, насколько это влияет на производительность? Например, в данном коде бессмысленно при каждом шорохе мыши отрабатывает querySelectorAll, хотя можно сделать это один раз при инициализации. Насколько подобное критично в реальном проекте?
были случаи что мозила бесится, если вешать onscroll. вы с этим сталкивались?
Ещё одно хорошее видео, спасибо за контент!!
Супер!
очень классно. спасибо
Артем, а как насчет того что бы сделать zoom изображений при наведении?
Это можно css сделать
Я имел ввиду, когда юзер водит во всех Осях мышкой, что бы отдельный элемент двигался по разному, но не выходил за область допустим по 100px квадратных??
Thank you.I like these lessons
А когда отменили element.dataset???
А как сделать отдельные обьекты?, просто если вырезать в Photohop то не прокатыввает.
Просто и полезно, спасибо :)
Смотрю твоё видео в такой же футболке только оранжевой 0_0
всем привет! можете подсказать где скачивать картинки для паралакса? или эт над через фотошоп на слои делить?
И чистый голова👍🏿
как будет считать быстрее, если брать length или индекс last + 1 ?
бляха, ты просто волшебник
подскажите как адаптировать данный фон
Артём, Спасибо за уроки(за все...).
у меня Mac, VSCode -> Live Server 5.6.1, Chrome.
Столкнулся с проблемой... После авто сохранения страница автоматически не обновляется.
Подскажите в моменте 19:24 артём пишет на русском руфвук(header) и у него срабатывает автозамена на английский, как это можно сделать?
Punto switcher
Круто
Здравствуйте. Подскажите где взять фотки для примера??
Google
Продолжай!!!
привет, круто делаешь! А как такой параллакс сделать отдельным объектам?
Присвоить элементам класс layer
Тупа лайк
Шпасибо :))
Добрый день. Подскажите а как сделать смешение блока по оси Y но текстового блока ?
То есть есть два рядом блока один блок картинка - рядом текст, и при прокрутке скорость текстового блока быстрей - как на этом сайте 2 раздел - themes.themegoods.com/grandrestaurant/demo3/
это по сути тоже самое, что показано в этом уроке, но параллакс-эффект к тексту + свойство opacity
Хорошо подобранная тема! Как всегда на высоте!
Артем, спасибо Вам за ваши видео. Очень помагают в изучении. Посмотрел курс по вордпрессу, по-моему самый лучший из всех которые я смотрел. А не будет ли урока, как сделать лэндинг на вордпресс с возможностью редактирования из админки? Без плагинов, например через виджеты или customizer? Просто не совсем понимаю как делают лэндинги на вордпресс
Такое видео не планировал
Да можно и cover сделать и на изображение
Круто!) го драг энд дроп!
Спасибо. Как всегда чётко, доходчиво, внятно :)
Спасибо большое за урок! Хотелось бы урок по drag and drop)
у вас есть курсы на udemy ? если нет, то когда будут?
Нет и пока не планируются
Объясните, в яем принципиально разница в паралаксе на библиотеке jquery и нативном js?
Разницы никакой, но от jQuery уже пора отказаться и такие простые вещи делать на нативном, а более сложные вещи компонентами (react, vue, angular..).
А зачем по дефолту на -10% сдвигать в лево?
спасиба за ваши труди )) а кстати крутой тема на vs code, как называется?
Стандартная
Попытался запилить функцию по вертикальному скроллу, не выходит , работает только одно что то . =(
Юухууу, сделал ! =)
It`s cool,- guy keep on doing the same things
Здравствуйте! Я начинающий front-end developer. На данный момент знаю jquery. Но как я понял на нем что-то крутое создать нельзя (по типу того же параллакса или карточек из прошлого урока). Подскажите пожалуйста, какой фреймворк сейчас лучше учить? Или же лучше выучить native js для веба и не париться? Спасибо)
Ну почему же нельзя? Все, что показано в роликах можно сделать на jQuery. В роликах показан чистый JS. Все тоже самое можно сделать на jQuery. Это библиотека, которая упрощает тебе взаимодействие с элементами. Что ты имеешь ввиду под "крутым"? Если то, что показано в уроках, то уже давно есть готовые решения, библиотеки и т.д, где ты указываешь элемент с которым хочешь взаимодействовать. Ручками писать нужно либо для практики, либо под какую ту ситуацию (например, нет в слайдере или параллаксе такого, что тебя бы устроило и ты подумал "напишу сам").
@@tereleksa ага, то есть как я понял мне лучше продолжать изучать jquery. Спасибо большое, вы мне растолковали все как надо))
@@gamechannel_833 пишу на vue и радуюсь жизни. Простой в освоении, сильный и набирающий популярность фреймворк. Но предупреждаю, пока что на нем тяжелее искать работу, чем на react/angular
@@faust2134 а почему не jQuery? Почему Vue?
*Как скачать Paint?*
а как найти фото для для паралакс эффекта
Возьми что-то похожее. Их легко найти в интернете
Артём объясняешь со знаем дела. Было бы неплохо увидеть мини курс по созданию телеграм бота на JS на или на Python.
I like it
Как поставить обратные кавычки?
На мак есть отдельная кнопка. На виндоус наверняка тоже такие есть
Лучше бы делать все без использования фич ES6+ (Это про template strings), или же говорить, что их желательно транспайлить, чтобы перегнать в ES5 синтаксис. Конечно, поддержка 93% браузеров это круто и сведет проблему совместимости к минимуму, но если начать использовать более интересные плюшки ES6+, то может вылезти эта самая проблема
лучше добавить определение браузера и если отлавливается образец мамонта - намекнуть, что браузер крайне устарел
ES6 вышел 4 года назад, это слишком большой срок чтобы до сих пор заморачиваться с переводом в 10-летний стандарт, и попахивает тем же, чем занимаются те, кто до сих пор сидит на Win XP, и лишать 90%+ каких-то хороших вещей из-за той небольшой доли пользователей которые не хотят переходить на новые браузеры - не лучшее решение
Эм, бейбл?
@@faust2134 костыль, если нормально на это смотреть, решающий свою задачу но костыль, частично благодаря которому язык немного тормозит в развитии
биг сенкс)
"data-cheburashka" :DDDD
Минимум кода , как у javascript ниндзя
Было 1,1 тыс. лайков. Я нажал лайк, стало 1,1 тыс. Что я делаю не так?
Ютуб округляет лайки
Зачем отнимать у Вани работу?
Как начинающий веб разработчик, ни как не могу смотреть ваши уроки по SCC Grid. Как только начинаю смотреть и делать тоже самое что вы делаете у меня постоянно проблемы с sass файлами. То не правильно генерирует css файлы то ещё что то. Вообщем я не как не могу дойти до верстки. Так как все проблемы связана с text editor extensions. Можно будет все ручное создавать? А тут уже сколько новых уроков вышло и я не могу их смотреть пока не досмотрю с гирдами. Честно скажу у меня уже боязнь что вы опять будете использовать какой нибудь extension. И этот урок пропущу пока что.
1) SCC исправь, пожалуйста, на CSS
2) Если начинающий, то в Grid пока, как мне кажется, не стоит. Лучше flex
3) Можешь использовать не терминальные команды, а Koala.
4) Sass капризный к пробелам. Попробуй SCSS.
@@tereleksa спасибо попробую Flex пока изучить. Извините за SCC. CSS
@@nurlanakylbekov7266 как у вас дела стали разработчиком
@@Vlad-be6hx здравствуйте да но у меня направление mobile, стал iOS разработчиком. уровень сейчас middle:)
Почему так мало просмотров, комментов, лайков? Видимо никому не нужен годный контент
Самое главное ты поддержи. Остальные подтянутся ;)
Лучше бы скорость в скрипте прописать.
Сделал, получилось круто, спасибо) правда, я вот не смог разобраться, как скачать эти фоновые изображения. Пришлось делать свои, получилось вот что: github.com/MikhailKey/Parallax-Js
ахахаха это же не ты делал и вообще это ошибка 404
Зачем было запускать цикл для трех элементов? Можно было просто обратиться по индексам массива и уже в формуле для каждого подставить свою скорость
То, что я написал - более гибкое решение
Один хрен, с реактом сторонние либы юзать. Но урок прикольный.
Люди которые жалуются на const вы кто?
Я подписался, а Вы подписались?
Я подписан с самого начала :)
Cкажите почему делаю как у вас выношу картинку layer-bg
она просто слетает
Было интересно, Спасибо!