Как сделать параллакс эффект на CSS HTML jQuery. Туториал // Как это сделать? // Фрилансер по жизни
Хочешь научится делать крутой параллакс (parallax) эффект на сайте при скролле на CSS HTML jQuery? Я расскажу и покажу как это сделать!
Ссылка на картинки из туториола:
fls.guru/howtodoit/howtodoit_...
Ссылка на готовый результат верстки:
/ 31218561
Весь плейлист "Как это сделать? Туториалы HTML CSS JS (jQuery) CSS3 эффекты":
• Як це зробити? Туторіа...
Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
Instagram: / freelancer.lifestyle
Facebook: / freelancerlifestyle
Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
«Фрилансер по жизни». Живи, а работай в свободное время! ©
#фрилансерпожизни #какэтосделать #верстка
Пікірлер: 282
Ценю твой ЛАЙК и КОММЕНТ! Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle Telegram чат по верстке: t.me/flschat (teleg.run/flschat) Instagram: instagram.com/freelancer.lifestyle/ Facebook: facebook.com/freelancerlifestyle/
@warriorofredoran958
3 жыл бұрын
Но интерактив на сайте больше не работает! Ссылки мёртвые, слайдер тоже не работает. Что делать?
Ничего не понял (когда началась JS-часть), но очень интересно. Когда задаёте название переменным, называйте их человеческими именами (Нет, не Жека, Антон и т.д., а чтобы можно было понять, какая за что отвечает). Параллакс, эх, всё это круто! Но ведь это делает код громоздким, а многие, зачастую, ещё и на мобильную версию потом тянут всё не заморачиваясь, display:none и готово (но мы то знаем, что ЖиЕс прожир… подгружается). С точки зрения вёрстки, очень впечатляет, но хотелось бы узнать больше о том, как это потом оптимизировать, чтобы работало на всех устройствах корректно, и не сжирало оперативку и скорость, чтобы не отражалось негативно на поведенческих факторах, и в свою очередь, не оказывало критического влияния на позиции сайта в поисковой выдаче. Забавно вообще, что проггеры живут, словно, в разных плоскостях. Одни заботятся о том, чтобы всё работало корректно, но забивают на визуальную составляющую, а другие мыслят творчески, и делают крутые штуки, которые потом тянут сайт вниз, как якорь, из-за того, что всё медленно, и вообще начинает лагать, когда с десяток таких скриптов подгружается )) В целом, не сомневаюсь в ваших способностях, подписываюсь, и желаю успехов! )
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! Как и во всем, тут нужен баланс 👍
@user-sh2fl2tb3c
3 жыл бұрын
По поводу оптимизации, в интернете есть очень много статей(как минимум использование сжатых картинок и нужный их формат, который являеться "легким") + если ты не напихаешь миллионы паралакс эффектов на страницу, будет тебе счастье)))
@drloop3231
3 жыл бұрын
А что мешает адаптировать под мобилку?)) Трафик и скорость загрузки тоже реализуемо....
@user-wz8jd9ud9f
Жыл бұрын
По поводу переменных - согласен... Такие названия переменных даже затрудняют понимание кода ученику
Столько позитивных эмоций от урока я давно не испытывал! Я аж воспарил к звездам :) Спасибо за вашу работу, Евгений! Творческий подход к преподаванию - это ваш конёк!
@FreelancerLifeStyle
4 жыл бұрын
Супер! Я рад!
Как же это офигенно . Ни разу такого не встречал , но увиденное - удивляет. Даже бы не подумал , что такое можно сделать . Спасибо тебе
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! Будет еще круче)
Не дождусь когда будет кина про JS и адаптивную верстку)) Жека красавец успехов тебе и всех благ!!!
@FreelancerLifeStyle
4 жыл бұрын
Все будет! Спасибо! 👍
Просто фантастика, круто, круто ....! Выше всех похвал, очень полезная рубрика! Твой канал лучший! Будь здоров!!!
Евгений, у меня нет слов, это выше всяких похвал. +Респект вам, это очень-очень круто) А ещё очень приятно и интересно учится у такого мастера-практика как вы, который сам зарабатывает на жизнь этим, а не у "профессоров" в обычных учебных заведениях, которые оказались на деле лишь "репиторами", которые оказались способны лишь запомнить информацию и воспроизводить её, не способны думать и очень сильно боятся отойти от "стандарта". Консервативные люди. Таким, как они - нет места в ИТ (на мой взгляд). А вам Евгений огромный респект и ещё раз большое спасибо за ваш труд)
Все круто, спасибо за урок. Это хороший стимул для того что бы учиться, и потом делать и придумывать самому такие шикарные идеи!) Спасибо ещё раз
@FreelancerLifeStyle
4 жыл бұрын
Супер! Для этого и делаю такие выдосы!
Скорость верстки просто космическая, еще и такой бомбический эффект,. Респект
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Ох, Евгений! Эффект супер! по js люди пишут, что непонятно, я уже настроилась, что будет сложно - но так все разжевано. Каждая строчка. Просто мега-спасибо за такие интересные ролики. Делаю с удовольствием ^^
@FreelancerLifeStyle
4 жыл бұрын
Супер! Я очень рад!
Это Просто МАГИЯ!!! Жека спасибо жги дальше!!!
@FreelancerLifeStyle
4 жыл бұрын
Конечно, я только начал :)
Очень круто .Спасибо за твой труд и уроки.
Спасибо за уроки. Они полезные!
Мощно! Сегодня только подписался, и кайфую от подачи)
@FreelancerLifeStyle
4 жыл бұрын
Спасибо большое, стараюсь👍🤟
Супер очень интерестно, доступно и понятно, оставлю как постулат ваши заметки!)
Пожалуй лучший канал, среди всех, что я видел на двух языках. Красава, парень! Ты прям Кулибин среди верстальщиков! Здоровья и Успехов тебе!!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Жека, видос бомбезный))) немного сложновато. но думаю разберусь когда сам попробую сделать)) АГОНЬ!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо, уверен разберешся!
Жека, спасибо за урок! У кого JS не работает, хотя всё как в уроке. то предлагаю вам ещё раз обратить внимание на переменные. Я к примеру банально пропустил нижнее подчёркивание.
Спасибо, добавил себе в заметки)👍👍👍👍 Как всегда лайк!!!! Отличное видео перед началом изучением jquery).
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! Вышло и правда атмосферно. Плюс можно применять и в более практических ситуациях. JQ уже скоро!
Это просто улет!!! Смотрю и кайфую)))
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! 👍🤘
Дуже круто! Щиро дякую Женя! Нехай тебе Бог благословить!
охрененть! я конечно слабо понял как это все вот так работает, но повторить за тобой удалось!) Спасибо большое Женя! Буду учить JS и смотреть твои видео!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
класс , как обычно лайк и море благодарности!
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Спасибо! Очень круто! А главное что довольно не сложно))
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Шикарный эфект👍
Спасибо за Ваш труд!)
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Вау! Просто неймовірно! Надіюсь, що колись у вас будуть уроки по jQuery, адже ви його дуже часто використовуєте. Дякую вам за вашу працю та старання!
Спасибо за видео, эффект крутой получился!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Нереально круто!
Круто! Спасибо!
Умничка👍 очень круто получилось)))
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
Правда, интересно и красиво!
Вау. Всегда думал, что для создания подобного эффекта нужно несколько сотен строк кода. Оказалось все не так уж и сложно! Спасибо, Женя! Как всегда круто :D P.S. Пойду пробовать повторить
@FreelancerLifeStyle
4 жыл бұрын
Все верно! Уверен все получится! 👍
@demonpetrosov6985
4 жыл бұрын
без JQuery наверно было бы около того
Первый канал на который поставыл колокольчик!!! Спасибо тебе!!!
@FreelancerLifeStyle
4 жыл бұрын
И тебе спасибо! 👍🤟
Я понял это, как мотивация начать учить js. Круто!
Лайк, однозначно!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! 👍😅
Класс!!! Спасибо!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Доступно 👍
Очень интересно и круто. Правда в JS-части не понятно для меня. Всему своё время, научусь. Так еще так быстро сделал, здорово. Спасибо. Женя, ты профессионал.
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! Все будет!
Очень крутое видео!
Классно сделано.Видно что ты опытный мастер.А я только начинающий ))
Давно тебя смотрю, самый годный контент по теме на русском ютубе. Только в хороших наушниках чувствуется вибрация от нажатий клавиш, микрофон записывает это. Если не сложно, сделай с этим что-нибудь))
И главное всего за 14 минут, коротко и понятно, здорово!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! Старался все показать и рассказать!
@user-sf2hd2bu2n
4 жыл бұрын
@@FreelancerLifeStyle Евгений, вы супер! У вас здорово всё получается! Сразу чувствуется опыт! А тут пытаешься пытаешь набить, даже по видео смотришь, набиваешь, уходит много много времени, хотя сейчас уже намного лучше чем пол года назад. Буду надеяться что если буду повторять, пробовать, то со временем тоже натренируюсь, хоть и не сразу.
@krau5_
4 жыл бұрын
Видео то 14 минут, но вручную как всегда за час получается)))
@user-sf2hd2bu2n
4 жыл бұрын
@@krau5_ а если новичок, то и все два уйдут)))...
Красотищаа!!
@FreelancerLifeStyle
4 жыл бұрын
Это да)
Восхищен ))
Волшебник👏
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Куда 2 лайк ставить? Эффект просто бомба. Спасибо что показываеш как это делается
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
@warriorofredoran958
3 жыл бұрын
Но интерактив на сайте больше не работает!
Как всегда крутяк! Жека, когда стрим? :)
Супер 👍. Захотелось в горы.
Круто!
Крутяк!
классное видео Женя кросс!!!!!!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Красафчик !!!
Эффект просто бомба! Можно было бы поставить больше лайков, поставил бы :) Жека красавчик :) А можно запилить курс по JS?
очень круто получилось
супер!
Вялiкi дзякуй Вам! Цудоўны эфект! Выдатная праца!
"когда я начинаю прокручивать" гора начинает идти к магомеду) интересный кейс, было полезно, спасибо!
Блін, просто кайфую від ваших уроків...
Топ) Сделай пожалуйста видео про кастомные слайдеры с анимацией, как на всяких крутых макетах. Будет очень круто
Смотрится потрясно! Можно удивлять коллег, как минимум ))
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
@user-qj6op7db5d
3 жыл бұрын
@@FreelancerLifeStyle спасибо за ваш труд
Отличненько. Крутая рубрика. И для новичков и для старичков 😁
@FreelancerLifeStyle
4 жыл бұрын
Спасибо большое, будет много интересного!
А ще недавно таку штуку взнав що дуже зручно копіювати текст, наприклад як на 1:45 твого відео. То просто зажимаєш Shift+Alt+стрілку вниз і не треба виділяти строку, вона сама копіюється)) *і дякую тобі за цю рубрику, дуже крута...
Лучший канал на ютубе)
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! 😊
спасибо!!! класс
Спасибо
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Топчик
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!
Рад, что наткнулся на твой канал случайным образом ) Спасибо за контент, нравится твоя подача материала А что вообще человеку необходимо знать/уметь, чтобы быть полноценным front-end разработчиком?
@krepkovmeste
4 жыл бұрын
Очень буду ждать ответа
просто магия)))
Круто круто круто !!!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
ВАУ!
Ждем JS )
Бро крутой канал👍
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! 🤘
Как поставить 100500 лайков?? Это очень круто! Жека - красавец)
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! Буду делать больше таких штук!
Норм. Вдохновляет. Для меня, пока, это магия.
@FreelancerLifeStyle
4 жыл бұрын
Спасибо, все не так сложно)
Привет Жень, Большое спасибо за урок. Очень интересно твоё мнение по поводу canvas, актуальна ли эта технология в 2020 и часть ли ей пользуешься? Спасибо
Шаман!.... Чи може мольфар... Очень круто!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
женя ты капец поставил всех учителей в конец! еще раз говорю гарвард нервно курит в сторонке со своими студентами
Спасибо женя
супер эфект ))). Евгений а как ты на видео вставляешь картинку\видео с колокольчиком чтобы подписывались?
Магия JS😎
спасибо за урок Как сделать параллакс эффект на CSS HTML jQuery. Туториал // Как это сделать? // Фрилансер по жизни
Такому ні на яких курсах не навчають!!! Дякую!!!
Красиво получилось. Жень, как вам удаёться продумать движение каждого слоя, чтоб выглядело так реалистично? Меня всегда интересовал этот вопрос) в вашем портфолио тоже много крутых анимашек. Как вы это всё придумываете?)
@FreelancerLifeStyle
4 жыл бұрын
Это происходит интуитивно, подбираю параметры пока не начнет нравиться 😅
Большое спасибо ! Крутой видео!) Хочу сделать нечто подобное в слайде slick слайедера, но там всё крошится, как только я добавляю элементам position: fixed ( Если вдруг у тебя не будет идей что снимать - расскажи плз как сделать параллакс эффект в одном отдельном окошке (со своим скролл баром) по середине страницы браузера
После такого можно и впервые на колокольчик нажать
@FreelancerLifeStyle
4 жыл бұрын
Ух, ну спасибо! 👍🤟
оч круто, и до безобразия просто :) умножать на 0.000005 идентично делению на 200000 т.к. 0.000005 = 1 / 200000
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! Можно делить можно умножать)
Предлагаю темы для рубрики - прогресбары, желательно радиальный, так как линейные слишком просто. С использованием svg или канваса.
@FreelancerLifeStyle
4 жыл бұрын
Ок, можно будет сделать, спасибо!
Жень, к тебе только одно замечение. Горы на англ - mountain)) Спасибо за урок
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
после стиля написание кода на js, понял что ты фрилансер :D
@FreelancerLifeStyle
4 жыл бұрын
Это да)
спасибо!
Жень, выглядит конечно офигенно, но я не могу взаимодействовать с контентом (например :hover не работает), если у всех элементов меняю z-index выглядит уже не так красиво. Что подскажешь делать?
👍
Классный эффект и двоольно простой, но на ноуте у меня подлагивает даже немного
👍🏻✌🏻☺️
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! 🤘
@Dr.RockeART
4 жыл бұрын
You are very welcome ☺️ I know how much work it is to create content like this, I just uploaded a video myself... All the best and looking foreword to watch your next video! ✌🏻🙏🏼
@FreelancerLifeStyle
4 жыл бұрын
Man, you channel is awesome!
Очень интересный эффект. В целом все понятно, но хотелось бы спросить, для чего переменные в коде оборачиваются в + + с двух сторон? я видимо что-то пропустила, буду благодарна за ответ.
Все чудово! Якщо людина захоче, то розбереться з JS окремо... Для змінних "Жека" та "Антон" було б теж непогано :)
@FreelancerLifeStyle
4 жыл бұрын
хєх, ну насправді треба нормально називати))
Для меня пока сложно. Но ОЧЕНЬ круто.
@FreelancerLifeStyle
4 жыл бұрын
Со временем все станет понятнее!
@oZopHuk
4 жыл бұрын
@@FreelancerLifeStyle не сомневаюсь, спасибо за мотивацию!
Я потренил свой скил и сделал тоже самое в wordpress в Elementor
@Atractiondj
3 жыл бұрын
буду искать гифки с орлом, хочется что бы еще при прокрутки он на встречу летел что бы прям вау было
Привет Жека!!! Контент просто БОМБА, очень информативно и полезно, но гора по английски- moUntain, а не montain)))
@FreelancerLifeStyle
3 жыл бұрын
Спасибо!