Как сделать параллакс эффект на CSS HTML jQuery. Туториал // Как это сделать? // Фрилансер по жизни
HTML-код
- Опубликовано: 31 окт 2019
- Хочешь научится делать крутой параллакс (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
«Фрилансер по жизни». Живи, а работай в свободное время! ©
#фрилансерпожизни #какэтосделать #верстка
Ценю твой ЛАЙК и КОММЕНТ!
Получить доступ к плюшкам + поддержать канал: 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/
Но интерактив на сайте больше не работает! Ссылки мёртвые, слайдер тоже не работает. Что делать?
Ничего не понял (когда началась JS-часть), но очень интересно.
Когда задаёте название переменным, называйте их человеческими именами (Нет, не Жека, Антон и т.д., а чтобы можно было понять, какая за что отвечает).
Параллакс, эх, всё это круто! Но ведь это делает код громоздким, а многие, зачастую, ещё и на мобильную версию потом тянут всё не заморачиваясь, display:none и готово (но мы то знаем, что ЖиЕс прожир… подгружается).
С точки зрения вёрстки, очень впечатляет, но хотелось бы узнать больше о том, как это потом оптимизировать, чтобы работало на всех устройствах корректно, и не сжирало оперативку и скорость, чтобы не отражалось негативно на поведенческих факторах, и в свою очередь, не оказывало критического влияния на позиции сайта в поисковой выдаче.
Забавно вообще, что проггеры живут, словно, в разных плоскостях. Одни заботятся о том, чтобы всё работало корректно, но забивают на визуальную составляющую, а другие мыслят творчески, и делают крутые штуки, которые потом тянут сайт вниз, как якорь, из-за того, что всё медленно, и вообще начинает лагать, когда с десяток таких скриптов подгружается ))
В целом, не сомневаюсь в ваших способностях, подписываюсь, и желаю успехов! )
Спасибо! Как и во всем, тут нужен баланс 👍
По поводу оптимизации, в интернете есть очень много статей(как минимум использование сжатых картинок и нужный их формат, который являеться "легким") + если ты не напихаешь миллионы паралакс эффектов на страницу, будет тебе счастье)))
А что мешает адаптировать под мобилку?))
Трафик и скорость загрузки тоже реализуемо....
По поводу переменных - согласен... Такие названия переменных даже затрудняют понимание кода ученику
Столько позитивных эмоций от урока я давно не испытывал! Я аж воспарил к звездам :) Спасибо за вашу работу, Евгений! Творческий подход к преподаванию - это ваш конёк!
Супер! Я рад!
Просто фантастика, круто, круто ....! Выше всех похвал, очень полезная рубрика! Твой канал лучший! Будь здоров!!!
Евгений, у меня нет слов, это выше всяких похвал. +Респект вам, это очень-очень круто) А ещё очень приятно и интересно учится у такого мастера-практика как вы, который сам зарабатывает на жизнь этим, а не у "профессоров" в обычных учебных заведениях, которые оказались на деле лишь "репиторами", которые оказались способны лишь запомнить информацию и воспроизводить её, не способны думать и очень сильно боятся отойти от "стандарта". Консервативные люди. Таким, как они - нет места в ИТ (на мой взгляд). А вам Евгений огромный респект и ещё раз большое спасибо за ваш труд)
Очень круто .Спасибо за твой труд и уроки.
Как же это офигенно . Ни разу такого не встречал , но увиденное - удивляет. Даже бы не подумал , что такое можно сделать . Спасибо тебе
Спасибо! Будет еще круче)
Дуже круто! Щиро дякую Женя! Нехай тебе Бог благословить!
Все круто, спасибо за урок.
Это хороший стимул для того что бы учиться, и потом делать и придумывать самому такие шикарные идеи!) Спасибо ещё раз
Супер! Для этого и делаю такие выдосы!
Супер очень интерестно, доступно и понятно, оставлю как постулат ваши заметки!)
Спасибо за уроки. Они полезные!
Жека, спасибо за урок! У кого JS не работает, хотя всё как в уроке. то предлагаю вам ещё раз обратить внимание на переменные. Я к примеру банально пропустил нижнее подчёркивание.
Не дождусь когда будет кина про JS и адаптивную верстку)) Жека красавец успехов тебе и всех благ!!!
Все будет! Спасибо! 👍
Ох, Евгений! Эффект супер! по js люди пишут, что непонятно, я уже настроилась, что будет сложно - но так все разжевано. Каждая строчка. Просто мега-спасибо за такие интересные ролики. Делаю с удовольствием ^^
Супер! Я очень рад!
Это Просто МАГИЯ!!! Жека спасибо жги дальше!!!
Конечно, я только начал :)
Скорость верстки просто космическая, еще и такой бомбический эффект,. Респект
Спасибо!
Мощно! Сегодня только подписался, и кайфую от подачи)
Спасибо большое, стараюсь👍🤟
Это просто улет!!! Смотрю и кайфую)))
Спасибо! 👍🤘
Шикарный эфект👍
Пожалуй лучший канал, среди всех, что я видел на двух языках. Красава, парень! Ты прям Кулибин среди верстальщиков! Здоровья и Успехов тебе!!
Спасибо!
Вау! Просто неймовірно! Надіюсь, що колись у вас будуть уроки по jQuery, адже ви його дуже часто використовуєте. Дякую вам за вашу працю та старання!
Жека, видос бомбезный))) немного сложновато. но думаю разберусь когда сам попробую сделать)) АГОНЬ!
Спасибо, уверен разберешся!
Спасибо, добавил себе в заметки)👍👍👍👍 Как всегда лайк!!!! Отличное видео перед началом изучением jquery).
Спасибо! Вышло и правда атмосферно. Плюс можно применять и в более практических ситуациях. JQ уже скоро!
Классно сделано.Видно что ты опытный мастер.А я только начинающий ))
охрененть! я конечно слабо понял как это все вот так работает, но повторить за тобой удалось!) Спасибо большое Женя! Буду учить JS и смотреть твои видео!
Пожалуйста!
класс , как обычно лайк и море благодарности!
Пожалуйста!
Давно тебя смотрю, самый годный контент по теме на русском ютубе.
Только в хороших наушниках чувствуется вибрация от нажатий клавиш, микрофон записывает это. Если не сложно, сделай с этим что-нибудь))
Я понял это, как мотивация начать учить js. Круто!
И главное всего за 14 минут, коротко и понятно, здорово!
Спасибо! Старался все показать и рассказать!
@@FreelancerLifeStyle Евгений, вы супер! У вас здорово всё получается! Сразу чувствуется опыт!
А тут пытаешься пытаешь набить, даже по видео смотришь, набиваешь, уходит много много времени, хотя сейчас уже намного лучше чем пол года назад. Буду надеяться что если буду повторять, пробовать, то со временем тоже натренируюсь, хоть и не сразу.
Видео то 14 минут, но вручную как всегда за час получается)))
@@krau5_ а если новичок, то и все два уйдут)))...
Спасибо! Очень круто! А главное что довольно не сложно))
Спасибо!
Умничка👍 очень круто получилось)))
Спасибо!
Первый канал на который поставыл колокольчик!!! Спасибо тебе!!!
И тебе спасибо! 👍🤟
Правда, интересно и красиво!
Нереально круто!
Спасибо за видео, эффект крутой получился!
Пожалуйста!
Супер 👍. Захотелось в горы.
Спасибо за Ваш труд!)
Пожалуйста!
Вау. Всегда думал, что для создания подобного эффекта нужно несколько сотен строк кода. Оказалось все не так уж и сложно! Спасибо, Женя! Как всегда круто :D
P.S. Пойду пробовать повторить
Все верно! Уверен все получится! 👍
без JQuery наверно было бы около того
Круто! Спасибо!
Вялiкi дзякуй Вам! Цудоўны эфект! Выдатная праца!
Эффект просто бомба! Можно было бы поставить больше лайков, поставил бы :) Жека красавчик :)
А можно запилить курс по JS?
Очень интересно и круто. Правда в JS-части не понятно для меня. Всему своё время, научусь. Так еще так быстро сделал, здорово.
Спасибо. Женя, ты профессионал.
Спасибо! Все будет!
Очень крутое видео!
Смотрится потрясно! Можно удивлять коллег, как минимум ))
Спасибо!
@@FreelancerLifeStyle спасибо за ваш труд
Блін, просто кайфую від ваших уроків...
Восхищен ))
очень круто получилось
Как всегда крутяк!
Жека, когда стрим? :)
классное видео Женя кросс!!!!!!
Спасибо!
Лайк, однозначно!
Спасибо! 👍😅
Доступно 👍
А ще недавно таку штуку взнав що дуже зручно копіювати текст, наприклад як на 1:45 твого відео. То просто зажимаєш Shift+Alt+стрілку вниз і не треба виділяти строку, вона сама копіюється))
*і дякую тобі за цю рубрику, дуже крута...
"когда я начинаю прокручивать" гора начинает идти к магомеду) интересный кейс, было полезно, спасибо!
Класс!!! Спасибо!
Пожалуйста!
Волшебник👏
Спасибо!
Куда 2 лайк ставить? Эффект просто бомба. Спасибо что показываеш как это делается
Спасибо!
Но интерактив на сайте больше не работает!
Топ) Сделай пожалуйста видео про кастомные слайдеры с анимацией, как на всяких крутых макетах. Будет очень круто
Красотищаа!!
Это да)
Лучший канал на ютубе)
Спасибо! 😊
Круто!
просто магия)))
супер!
спасибо!!! класс
Отличненько. Крутая рубрика. И для новичков и для старичков 😁
Спасибо большое, будет много интересного!
Жень, выглядит конечно офигенно, но я не могу взаимодействовать с контентом (например :hover не работает), если у всех элементов меняю z-index выглядит уже не так красиво. Что подскажешь делать?
Привет у меня проблемка можешь с ней помочь ? Это на счёт данного видео. в JS Всё ка и у тебя но почему не работает анимация ничего понять не могу! и в console пишет ошибку .
Крутяк!
Спасибо
Пожалуйста!
спасибо за урок Как сделать параллакс эффект на CSS HTML jQuery. Туториал // Как это сделать? // Фрилансер по жизни
Красафчик !!!
Привет Жень, Большое спасибо за урок. Очень интересно твоё мнение по поводу canvas, актуальна ли эта технология в 2020 и часть ли ей пользуешься?
Спасибо
Очень интересный эффект. В целом все понятно, но хотелось бы спросить, для чего переменные в коде оборачиваются в + + с двух сторон? я видимо что-то пропустила, буду благодарна за ответ.
Рад, что наткнулся на твой канал случайным образом ) Спасибо за контент, нравится твоя подача материала
А что вообще человеку необходимо знать/уметь, чтобы быть полноценным front-end разработчиком?
Очень буду ждать ответа
привет.подскажи как дальше структуру строить,чтоб шапку зафиксить ниже?
Ждем JS )
женя ты капец поставил всех учителей в конец! еще раз говорю гарвард нервно курит в сторонке со своими студентами
Шаман!.... Чи може мольфар... Очень круто!
Спасибо!
Бро крутой канал👍
Спасибо! 🤘
супер эфект ))). Евгений а как ты на видео вставляешь картинку\видео с колокольчиком чтобы подписывались?
Круто круто круто !!!
Спасибо!
А как сделать то же самое, но внутри секции, находящейся посередине страницы с другим контентом?
ВАУ!
и как это внедрить в середину страницы например, у меня все вверх улетает
Магия JS😎
Норм. Вдохновляет. Для меня, пока, это магия.
Спасибо, все не так сложно)
А как быть с размерами под девайсы ? На всю ширину экрана просто вывести ?
Такому ні на яких курсах не навчають!!! Дякую!!!
Спасибо женя
Как поставить 100500 лайков?? Это очень круто! Жека - красавец)
Спасибо! Буду делать больше таких штук!
Топчик
Спасибо!
оч круто, и до безобразия просто :)
умножать на 0.000005 идентично делению на 200000 т.к. 0.000005 = 1 / 200000
Спасибо! Можно делить можно умножать)
спасибо!
Красиво получилось.
Жень, как вам удаёться продумать движение каждого слоя, чтоб выглядело так реалистично? Меня всегда интересовал этот вопрос) в вашем портфолио тоже много крутых анимашек. Как вы это всё придумываете?)
Это происходит интуитивно, подбираю параметры пока не начнет нравиться 😅
Женя я написал код как у тебя но у меня эффект не получается почемуууу???????????
А что на счёт адаптивности? На андроидах работает ?
👍
А как сделать появление блоков при скролле страницы?
Жень, к тебе только одно замечение. Горы на англ - mountain))
Спасибо за урок
Спасибо!
Большое спасибо !
Крутой видео!)
Хочу сделать нечто подобное в слайде slick слайедера, но там всё крошится, как только я добавляю элементам position: fixed (
Если вдруг у тебя не будет идей что снимать - расскажи плз как сделать параллакс эффект в одном отдельном окошке (со своим скролл баром) по середине страницы браузера
Предлагаю темы для рубрики - прогресбары, желательно радиальный, так как линейные слишком просто. С использованием svg или канваса.
Ок, можно будет сделать, спасибо!