CSS фичи #10 ➤ Параллакс эффект на CSS | Parallax Effect CSS without JS

Поделиться
HTML-код
  • Опубликовано: 23 ноя 2024

Комментарии • 245

  • @mykhailoriabets3825
    @mykhailoriabets3825 6 лет назад +82

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

    • @sergeyermolaev270
      @sergeyermolaev270 3 года назад

      из видоса не понятно за счет какого свойства эффект. Вы поняли - объясните мне.

    • @ВолодимирПаламарчук-й1ю
      @ВолодимирПаламарчук-й1ю Год назад

      ​@@sergeyermolaev270за счёт смещения картинки по оси Z, то есть вглубь. Это когда вы едет на машине, и дальние объекты движутся медленнее, чем передние. Точно так же и тут, мы отдалили заднюю картинку, и она стала дальше, и из-за этого создался эффект разной скорости прокрутки

  • @Хеллоуитсми-п4о
    @Хеллоуитсми-п4о 2 года назад +1

    Господи, это настолько полезно и понятно. Всегда все эти вещи казались сложными, но вы буквально за десять минут объяснили все так четко и понятно. Большое вам спасибо за ваш труд!

  • @va1sman
    @va1sman 5 лет назад +9

    Нигде еще не видел, чтобы человек все так подробно объяснял, спасибо огромное тебе за то, что ты существуешь.

  • @санжарнурлан-ж8ы

    Спасибо за урок я долго искал способ сделать паралакс для сайта и это видео помогло мне научиться делать паралакс

  • @andrewkovalenko3587
    @andrewkovalenko3587 6 лет назад +148

    Ты серьезно? Не интересно?
    Вот пора прекращать с такими мыслями. Я во фронтенде живу уже, а ты показываешь такие фишки, которые я бы даже не начал учить. Спасибо тебе! Продолжай дальше

  • @OksanaSaienko
    @OksanaSaienko 3 месяца назад

    Вау! Круто! Благодарю за четкое объяснение! Респект 💪

  • @bigbrother6239
    @bigbrother6239 6 лет назад

    Спасибо ! Благодаря вам, я не стою на одном месте. Каждый ваш урок полезен !

  • @zcbesaba
    @zcbesaba 6 лет назад +5

    а этот лысый умеет убедить поставить лайк, и по моему только он на этом канале обладает той харизмой из-за которой, помимо интересного контента, хочется смотреть ролики, хотя эта фича больше напоминает костыль, но учитывая все предыдущие уроки - Артём молодец, рекламой не кормит, только себя и свою контору продвигает (не в этом видео)

  • @Иван-б3н5й
    @Иван-б3н5й 6 лет назад

    Искал этот эффект несколько дней, а тут сенсей взял и выложил!!! Спасибо!!!:)

  • @yodapunishes
    @yodapunishes 6 лет назад

    Ты нереально круто объясняешь! Спасибо!!!

  • @ЕвгенийМакаренко-ш1ъ

    Ты настоко круто все рассказываешь, что открывая видос я сходу луплю лукас, а потом только смотрю) спасибо за контент

  • @Sergey_Klimov
    @Sergey_Klimov 4 года назад

    Такой параллакс эффект прикольно использовать в середине страницы сайта)

  • @JudgegamesRus
    @JudgegamesRus 4 года назад

    Отличное видео. Объяснил все обстоятельно и понятно. Однозначно лайк.

  • @dimitriy8689
    @dimitriy8689 6 лет назад

    По больше таких уроков, часто использованных фичей js на CSS

  • @Дмитрий-х2й5р
    @Дмитрий-х2й5р 4 года назад

    Артем, спасибо вам за уроки. Благодаря им, я начал немного понимать HTML + CSS.

  • @Hermes_TL
    @Hermes_TL 6 лет назад +7

    Вообще редко спускаюсь в комментарии, но ради такого контента, с радостью.
    Спасибо Артем, пили ещё

  • @zhenyafromby
    @zhenyafromby 6 лет назад +1

    Просто превосходные уроки, все очень понятно и наглядно! Спасибо за труд, продолжайте в том же духе

  • @sergeybayraktar
    @sergeybayraktar 4 года назад

    Это очень здорово! Я только вхожу в профессию, однако это именно то, что так мотивирует идти дальше!)

  • @Selex95
    @Selex95 6 лет назад +7

    Очень интересно, спасибо. Держи пятюню)

  • @АлексейСтупников-д4у

    Приветствую автора видео! Благодарю вас за очень подробное объяснение! Желаю вам всех благ!

  • @КонстантинРоман-н7п

    Урок отличный. Объясняете прекрасно. Но все это полумера, потому что это не может работать в отдельном блоке. Мы или делаем всю страницу параллаксом или без, но всего должно быть в меру - анимации, параллакс и пр. Когда можно будет один этаж анимировать, другой с параллаксом а третий спокойным, тогда будет ок.

  • @alexandralexandrov2826
    @alexandralexandrov2826 4 года назад

    Спасибо большое за такие видео)
    Что то учу, что то понимаю, что то освежаю в памяти с такими объяснениями!)

  • @alexryzhenkov271
    @alexryzhenkov271 5 лет назад

    Молодец, хорошо преподносишь(доносишь в плане скорости и в плане понимания) материал!!! Спасибо.

  • @АлексейМихалыч-м1ш
    @АлексейМихалыч-м1ш 6 лет назад +2

    Четко по делу. Спасибо тебе большое!

  • @ledfed4318
    @ledfed4318 3 года назад +1

    Это очень ,крутой эффект ,но по итогу придется использовать bacground-attachmend , поскольку в дальнейшем вы столкнетесь с проблемами) Особенно когда начнете работать с Js
    .

  • @БраенОконар-в2е
    @БраенОконар-в2е 4 года назад

    Просто на easy обьяснил) 10 из 10, like поставил и подписался на подобные фичи💭👏👀

  • @alexlmaxl4966
    @alexlmaxl4966 5 лет назад

    Всё гениальное просто! Спасибо Артем за фичу

  • @MrT00020
    @MrT00020 6 лет назад

    Урок очень интересный. Спасибо!

  • @krivalex
    @krivalex 3 года назад

    круто объясняешь, спасибо

  • @Clickyv
    @Clickyv 5 лет назад

    Это просто гениально. СПАСИБО!

  • @АндрейИльченко-т7ж

    Супер, спасибо за такое видео, ты красава. Давно хотел узнать как делать это, но даже не знал как называется эта штука)

  • @Александр-е5в9н
    @Александр-е5в9н 5 лет назад

    Замечательно и доступно все объяснил. 5 баллов

  • @dmitriyegorov4764
    @dmitriyegorov4764 6 лет назад

    Спасибо, Артем! Нереально крутой материал! Жду продолжения. )

  • @Илья-е8с5о
    @Илья-е8с5о 6 лет назад

    Оптимальную тему для следующего урока ты уже сам назвал. Box-sizing. Для меня он в свое время стал открытием, которое спасло меня от кучи геморроя. Свойство простое, но просто адски полезное.

  • @SanyouUA
    @SanyouUA 5 лет назад +57

    Все инструкции НА ВЕСЬ ЭКРАН!
    А сделать параллакс в отдельном блоке на странице - совсем другая история, и естественно, таких вариантов хрен найдешь на чистом css.
    Если делать как автор видео - нифига не выйдет, картинка расползется, оверфлоу хидден задать нельзя - параллакса не будет.
    Кто-то из "лайкеров" хоть что-то пробовал из этих видосов в других условиях, а не в "чистых на новой странице на весь экран"?

    • @aya4924
      @aya4924 4 года назад +2

      Совершенно верно. Данный пример подойдет для тренировок, но в продакшн-проектах не найдет применения.

    • @Minty290
      @Minty290 4 года назад

      Офигенский а если в отдельный контейнер сам параллакс вставить, как джамботрон в бутстрапе, не получиться?

    • @sxmrxk
      @sxmrxk 4 года назад +2

      ля, если ты такой умный зачем тогда смотришь эти видео? Автор тут хотел показать пример того какие манипуляции можно делать при помощи transform и показал интересный пример, а как дальше будут это использовать - это уже личное дело каждого

    • @Anahitacode
      @Anahitacode 4 года назад

      Да, голову ломаю, как убрать еще один появившейся скролл справа, судя по идее, он наверно там нужен. Пыталась сдеать в отдельной секции с div-ами. Но этот вариант подходит только для чистого body. Ищу дальше. Как информация - полезно. Остальное - самим.

    • @maximzhuravlyov9530
      @maximzhuravlyov9530 3 года назад

      Да это касается 99,9% обучающего контента на Ютубе. Никто за бесплатно раскрывать секреты профессии никогда не станет, всё нужно постигать самому либо нанимать ментора за $30+/час.

  • @net_polyana0987
    @net_polyana0987 6 лет назад

    Еще больше CSS ФИЧ!!!!!!!!
    Это круто и интересно)))

  • @flipper-limon
    @flipper-limon 6 лет назад

    спасибо)) ждал твоего решения этой проблемы) подходов много оказывается.
    Может теперь вертикальный слайдер на CSS)

  • @ЛеонидДобривечер
    @ЛеонидДобривечер 6 лет назад +4

    Мне понравилось. Продолжай развивать front-end! Хотелось бы увидеть темы вёрстки. Например, куча роликов в ютубе про то, "как сверстать из PSD макета", но нету конкретных правил "хорошей/правильно вёрстки". Как правильно группировать блоки, именование классов, div или h1 и т.д. Вот такого бы плана ролик!

    • @АлександраКараваева-й6и
      @АлександраКараваева-й6и 6 лет назад

      за этим вам на интенсивы html-академии)) Они там очень подробно все объясняют. Если цены кусаются и вы не стесняетесь пиратить - все есть на торрентах. Ни к чему не призываю, просто информирую))

    • @ЛеонидДобривечер
      @ЛеонидДобривечер 6 лет назад

      Благодарю за совет)

  • @chingiz_mammadov
    @chingiz_mammadov 6 лет назад

    Все круто. Главное объясняешь круто! Спасибо большое!)

  • @kirillnechaev6137
    @kirillnechaev6137 6 лет назад

    Было бы интересно такую же рубрику с js- фичами, и можно было бы что-нибудь про React.js послушать, просто ты так доступно объясняешь, заходит)

  • @khan-gu6jg
    @khan-gu6jg 3 года назад

    класс ты ваше креативный я бы совсем не додумался бы . Круче нечего не видел

  • @rodigy
    @rodigy 6 лет назад

    вот это действительно круть!

  • @АндрейСкуратов-я4л

    то чувство когда я верстальщик но по ходу я многое чего еще не знаю) афигенная фича. Как то я все ровно мало въехал в механизм работы. и зависимость между текстом и фоном.... Давай еще че нибудь.

  • @middle2984
    @middle2984 6 лет назад +1

    Очень круто! Была бы очень интересна тема с плавным скроллом)

  • @ifynk
    @ifynk 6 лет назад

    Вот интересная фича, я думаю. Нужна форма, которая выглядит так - label: input. И так несколько строчек. Ее легко сделать таблицами. В TR два TD. В первом TD - label, во втором - INPUT. TR конечно может быть много. И вот в чем заморочка, все input должны выравниваться относительно самого длинного label. Вот как это реализовать на flexbox и возможно ли вообще. На крайний случай гридами.

  • @vitaliitaranik
    @vitaliitaranik 6 лет назад +1

    Атрём,супер,спасибо тебе))

  • @veor2758
    @veor2758 6 лет назад +46

    Урааа, Артем меня услышал) Теперь следующая идея для видео: сделай пожалуйста уроки на тему адаптивной верстки современных нестандартных макетов, не 12 колоночных. Андрей Гаврилов выпустил видео на эту тему,но только одно, а этого мало)

    • @flipper-limon
      @flipper-limon 6 лет назад +2

      думал, что я его задолбал с параллаксом)

    • @3dzbot
      @3dzbot 6 лет назад

      )))

  • @Кирилл-р4й5х
    @Кирилл-р4й5х 6 лет назад

    Идея конечно не своя и взято с другого видео, но здорово, что с объяснениями и комментариями.

  • @Skif0007
    @Skif0007 4 года назад

    полезный контент, автору благодарность

  • @Павел-н6ц1ц
    @Павел-н6ц1ц 5 лет назад

    Стоит записывать дальше!

  • @sxmrxk
    @sxmrxk 4 года назад

    просто комментарий в знак поддержки каналу)

  • @bonusdiez
    @bonusdiez 5 лет назад

    Ну это ж бомбически крутая фича!! Мегажирный лайк, Артем!! Пошел применять на сайтах!! Всем параллакса!!

  • @kowkavn2356
    @kowkavn2356 6 лет назад

    Всё хорошо объяснил , теперь можно и про box-sizing ролик увидеть ))

  • @Джеклондонский-э8х
    @Джеклондонский-э8х 2 года назад

    Спасибо большое, друг

  • @letuchiytapok681
    @letuchiytapok681 2 года назад +1

    Круто, но у меня проблема, то что я не могу теперь на сайт больше ничего добавить, то есть я например пишу текст То у меня почему-то оно появляется сверху, но текста при этом не видно...

  • @РусланЛебешев-ы1е
    @РусланЛебешев-ы1е 6 лет назад

    Краусаувчик !!! 👌Очень круто !💪👍

  • @screech8795
    @screech8795 6 лет назад +2

    Ух ща на ваших уроках научусь делать ах***ные сайты, разбогатею, и с вами поделюсь)

    • @Glo_Academy
      @Glo_Academy  6 лет назад +1

      5469620020676233 - вот на эту карту переводи деньги, как разбогатеешь)

    • @screech8795
      @screech8795 6 лет назад

      @@Glo_Academy принял

  • @vovamriya2084
    @vovamriya2084 6 лет назад

    Спасибо, необычный подход, я бы пошел другим путем.

  • @djnickolay
    @djnickolay 3 года назад

    Просто и понятно, спасибо

  • @metarasta9190
    @metarasta9190 6 лет назад

    Чел ты красавячик)идея супер)то что можно заменить на css,нужно заменить)

  • @andreyatroshchenko5197
    @andreyatroshchenko5197 5 лет назад

    Спасибо! Очень интересно

  • @xDiezz
    @xDiezz 6 лет назад +1

    достаточно изображению на фоне поставить fixed и параллакс готов

  • @j3tyyl1nk19
    @j3tyyl1nk19 6 лет назад

    Спасибо большое Артема! Очень внятно,кратко и понятно объяснил!!!лойсов понаставил бы,но жаль только один можно ставить(( Спасибо

  • @SergeyKostukov
    @SergeyKostukov 6 лет назад

    Артём спасибо за видео. Подскажи пожалуйста на codepen каким сочетанием клавиш ты быстро теги вставляеш?

  • @generalpashon
    @generalpashon 6 лет назад

    Это ооооочень интересно!

  • @eduardkolesnik5819
    @eduardkolesnik5819 6 лет назад +1

    Кстати Filter классный стиль, недавно о нём узнал было бы классно если бы ты снял Фичи с ним)

  • @Nevroll
    @Nevroll 3 года назад +2

    Высота сайта ограничивается высотой картинки. Ниже не скролится. Как исправить?

  • @timmyboy1687
    @timmyboy1687 3 года назад

    Izlojenie materiala nastol'ko ponyatno i doxodchivo! Ogromnoe spasibo! Kuda kidat' donat?

  • @butcherfirewaters
    @butcherfirewaters 6 лет назад

    Артём! Сделай пожалуйста урок по Wordpress'y , как вывести в категориях - подкатегории, а потом уже уже и посты. А чтобы в категориях показывало не только категории, но и посты, которые прикреплены к этой категории, а не подкатегории

  • @dimaburichin7726
    @dimaburichin7726 6 лет назад +2

    Спс за урок но щас чаще просят сделать уже целую страницу с паралакс переходами или в простонародье страница слайдер( с точками скраю для удобства перехода или меню но там можно и якорями).

  • @neopalmiscus57
    @neopalmiscus57 4 года назад

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

  • @mister_robot01
    @mister_robot01 6 лет назад +1

    Артем, сделай сделай урок по верстке Email письма. Уроки хорошие)

  • @alexandrstelmakh73
    @alexandrstelmakh73 6 лет назад

    Поддерживаю TheSijisGame , давай скролл экранами!

  • @angrybeaver3425
    @angrybeaver3425 6 лет назад

    нужно больше видео про анимации, а то их меньше всего на ютубе

  • @СлаваКравцов-т8у
    @СлаваКравцов-т8у 6 лет назад

    Отлично Артем! Спасибо! Подскажи, есть видео со слайдером фото?

  • @АлександрБольшой-л5ы

    Ты лучший!

  • @sergiymolchan8283
    @sergiymolchan8283 6 лет назад

    Артем, красава продовжуй далі рубрику і запиши відео урок по слайдеру.

  • @artem6981
    @artem6981 6 лет назад

    Не знаю, был ли такой уже урок, но было бы интересно узнать что-то о видео на бэкграунде

  • @Eugmaofficial
    @Eugmaofficial 5 лет назад

    Артем, хотел спросить такую вещь, наверняка вы не тестили это с колёсиком мышки. При нажатии его для плавной прокрутки сайта, можно повести курсов правее и тогда появляются куски картинки и грубо говоря портал в нарнию. Если убрать overflow то паралакс сразу не работает, также если убрать из css сразу края удаляются, но вместе с ним и параллакс. Есть идеи что с этим сделать?
    Если не понятно что я имею введу. Загрузите предоставленный Артёмом код, и запустите с ним пробник сайта -> нажимаете на колёсик мышки и ведете курсор в право.

  • @j3tyyl1nk19
    @j3tyyl1nk19 6 лет назад +1

    Привет Артем))Можешь записать видео - есть фиксированное меню и при скролле пункты меню становятся активными, в зависимости в каком разделе мы находимся,например меняет фон или цвет или же подчеркивание появляется?))Буду очень благодарен. Заранее спасибо

  • @Тимур-у8и8к
    @Тимур-у8и8к 5 лет назад

    А может есть пример на реальном сайте лендинге? Или может след уроком реализовать параллакс эффект

  • @1MrGerman
    @1MrGerman 4 года назад

    Пока что для меня это лучший канал для обучения веб-программированию!!)

  • @ДимаСеледкин
    @ДимаСеледкин 6 лет назад +1

    Когда будет марофон верстки на Bootstrap 4? А то остальные марофоны не актуальны для нового Bootstrap.

  • @ДанилДанилин-я5щ
    @ДанилДанилин-я5щ 6 лет назад

    классно !
    очень интересно есть ли способ задать размеры отступов и шрифта относитнльно ширины родителя (не всего экрана), а родителя блока в котором находится элемент. как сделать например "резинову" кнопку которая будет масштабировать я в зависимости от ширины родителя

  • @thesijisgame6590
    @thesijisgame6590 6 лет назад +32

    Давай скрол экранами.

    • @vladimirsolomykin9655
      @vladimirsolomykin9655 6 лет назад +2

      + поддерживаю. Тёма, разбери поблочную прокрутку.

    • @СергейПротос-р1р
      @СергейПротос-р1р 6 лет назад +1

      alvarotrigo.com/fullPage/ru/ вот этот юзаю! Полет нормальный)! Есть еще плагин наз-ся scrollify js projects.lukehaas.me/scrollify/#home тоже самое.

  • @eduardkolesnik5819
    @eduardkolesnik5819 6 лет назад

    GOOO O ЕЩЁ CSS ФИЧИ.

  • @kilirlink.....8012
    @kilirlink.....8012 5 лет назад

    это же прекрасно)

  • @dbuzeninka8005
    @dbuzeninka8005 6 лет назад

    спасибо за паралакс, вот тебе идея на след видео : как делать SVG анимациии через адоб илюстратор и css

  • @ОлегБыков-р3с
    @ОлегБыков-р3с 5 лет назад

    вообще ништяк. тебе тоже пятюнчик

  • @ДеПтах
    @ДеПтах 6 лет назад

    Даешь многоуровневое меню на чекбоксах, чтобы открывался след уровень по клику, но без JS

  • @ЮрийВовчук-ф7е
    @ЮрийВовчук-ф7е 5 лет назад

    Привет. Подскажите, почему не работает transition: 1s когда применяю transform: translateZ(-1px)?
    Спасибо.

  • @tommyversace2540
    @tommyversace2540 5 лет назад +2

    Перенёс все в саблайм , сохранил и в хроме ничего, заголовок даже не сдвинулся. Как был слева, так и остался, что нужно сделать?

  • @vlada3236
    @vlada3236 6 лет назад

    "как видите, ничего сложного")

  • @Seth_Mortensen
    @Seth_Mortensen 5 лет назад +1

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

  • @mrynoplanetashka8988
    @mrynoplanetashka8988 6 лет назад

    Лучше transform-style не задавать inherit, т.к. старые IE его не поддерживают и можно просто так же указать preserve-3d.

  • @diekunstUA
    @diekunstUA 6 лет назад

    За видео спасибо, но звук нужно улучшать!Наверное, субъективно, микрофон с наушниками не слишком хорош для таких видео!

  • @ig0reha_wk
    @ig0reha_wk 6 лет назад

    Атрём, спасибо тебе большое! Давай jQuery фичи !

  • @miklayen_yakim
    @miklayen_yakim 6 лет назад

    Интересно!!!! Фичи мне и поболе!!!

  • @maruf4ik
    @maruf4ik 6 лет назад +4

    Артём вы лысый Супермен или Тор среди веб программистов))))) спасибо за уроки Брооо

  • @ДимаАртюхов-э6щ
    @ДимаАртюхов-э6щ 6 лет назад +24

    Планируешь сделать видео с объяснениями работы box-sizing ?

    • @АлександраКараваева-й6и
      @АлександраКараваева-й6и 6 лет назад +19

      Что, простите, оно делает?!)))
      На самом деле box-sizing меняет правила расчета свойства width у элемента. По умолчанию его значение - content-box, то есть width задает только ширину контента. Меняем на padding-box - в width уже начинают входить паддинги. Меняем на border-box - и бордеры тоже. Предположим, вы хотите сверстать блочок шириной 200 пикселей. Задаете width 200 пикселей. А потом внутри этого блочка вам нужно сделать паддинги по 10 пикселей, чтобы контент не прижимался к краям. Вы их задаете - и они расширяют ваш итоговый блок на 10 пикселей в обе стороны. И вот он уже у вас 220 пикселей вместо 200! Именно для того, чтобы избежать такого поведения, и нужен border-box.

    • @perseveranse
      @perseveranse 5 лет назад

      Александра Караваева лайк, хуле