CSS фичи #10 ➤ Параллакс эффект на CSS | Parallax Effect CSS without JS
HTML-код
- Опубликовано: 11 июл 2018
- Сегодня мы разбираем с вами параллакс эффект на чистом CSS! Научимся делать эффект parallax на сайте без использования JS. Ссылка на исходники тут: codepen.io/Aislam23/pen/ajbbXM
Подпишитесь на канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Получить нужные материалы для любого веб-разработчика - taplink.cc/glo_web_academy
Получить консультацию куратора - bit.ly/2Ym5SqS
Связаться с автором: aislam23 telegram: t.me/aislam23
Мой блог: islamov_blog
Больше контента в нашей группе Вконтакте
glo_academy
Присоединяйтесь к нашему сообществу Discord
/ discord
Мой канал в telegram "Лысый из браузера"
tele.click/baldfrombrowser
Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
vk.me/glo_academy
#параллакс #эффект #паралакс #чистом #сделать #пример #фон #фичи #css #parallax #without #js #pure #using #effect #css3 #jquery #scrolling #tutorial
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/billing/pl.php?... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma2html
ttttt.me/figma_start
ttttt.me/figmatamplates
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codepen_js
ttttt.me/css_features
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkforwork 
Развлечения
![PIECE BY PIECE - Official Trailer [HD] - Only In Theaters October 11](http://i.ytimg.com/vi/7Bc6trBc1kc/mqdefault.jpg)
я учусь всему сам и сижу на многих каналах, читаю много материала и много практикуюсь, но не видел ни разу что-бы кто-то настолько хорошо, четко и правильно излагал материал, продолжай нас удивлять, ты хороший парень, спасибо тебе большое
из видоса не понятно за счет какого свойства эффект. Вы поняли - объясните мне.
@@sergeyermolaev270за счёт смещения картинки по оси Z, то есть вглубь. Это когда вы едет на машине, и дальние объекты движутся медленнее, чем передние. Точно так же и тут, мы отдалили заднюю картинку, и она стала дальше, и из-за этого создался эффект разной скорости прокрутки
Господи, это настолько полезно и понятно. Всегда все эти вещи казались сложными, но вы буквально за десять минут объяснили все так четко и понятно. Большое вам спасибо за ваш труд!
Просто превосходные уроки, все очень понятно и наглядно! Спасибо за труд, продолжайте в том же духе
Всё гениальное просто! Спасибо Артем за фичу
Спасибо, Артем! Нереально крутой материал! Жду продолжения. )
Нигде еще не видел, чтобы человек все так подробно объяснял, спасибо огромное тебе за то, что ты существуешь.
Очень интересно, спасибо. Держи пятюню)
Спасибо ! Благодаря вам, я не стою на одном месте. Каждый ваш урок полезен !
Ты серьезно? Не интересно?
Вот пора прекращать с такими мыслями. Я во фронтенде живу уже, а ты показываешь такие фишки, которые я бы даже не начал учить. Спасибо тебе! Продолжай дальше
100%
Артем, спасибо вам за уроки. Благодаря им, я начал немного понимать HTML + CSS.
Ты настоко круто все рассказываешь, что открывая видос я сходу луплю лукас, а потом только смотрю) спасибо за контент
Искал этот эффект несколько дней, а тут сенсей взял и выложил!!! Спасибо!!!:)
Спасибо большое за такие видео)
Что то учу, что то понимаю, что то освежаю в памяти с такими объяснениями!)
Ты нереально круто объясняешь! Спасибо!!!
Четко по делу. Спасибо тебе большое!
Это просто гениально. СПАСИБО!
Молодец, хорошо преподносишь(доносишь в плане скорости и в плане понимания) материал!!! Спасибо.
Это очень здорово! Я только вхожу в профессию, однако это именно то, что так мотивирует идти дальше!)
Все круто. Главное объясняешь круто! Спасибо большое!)
Отличное видео. Объяснил все обстоятельно и понятно. Однозначно лайк.
Атрём,супер,спасибо тебе))
Урок очень интересный. Спасибо!
Ну это ж бомбически крутая фича!! Мегажирный лайк, Артем!! Пошел применять на сайтах!! Всем параллакса!!
Замечательно и доступно все объяснил. 5 баллов
Приветствую автора видео! Благодарю вас за очень подробное объяснение! Желаю вам всех благ!
Вообще редко спускаюсь в комментарии, но ради такого контента, с радостью.
Спасибо Артем, пили ещё
а этот лысый умеет убедить поставить лайк, и по моему только он на этом канале обладает той харизмой из-за которой, помимо интересного контента, хочется смотреть ролики, хотя эта фича больше напоминает костыль, но учитывая все предыдущие уроки - Артём молодец, рекламой не кормит, только себя и свою контору продвигает (не в этом видео)
Еще больше CSS ФИЧ!!!!!!!!
Это круто и интересно)))
Просто на easy обьяснил) 10 из 10, like поставил и подписался на подобные фичи💭👏👀
Краусаувчик !!! 👌Очень круто !💪👍
круто объясняешь, спасибо
спасибо)) ждал твоего решения этой проблемы) подходов много оказывается.
Может теперь вертикальный слайдер на CSS)
Спасибо за урок я долго искал способ сделать паралакс для сайта и это видео помогло мне научиться делать паралакс
полезный контент, автору благодарность
Супер, спасибо за такое видео, ты красава. Давно хотел узнать как делать это, но даже не знал как называется эта штука)
вот это действительно круть!
Спасибо! Очень интересно
Это ооооочень интересно!
Очень круто! Была бы очень интересна тема с плавным скроллом)
это же прекрасно)
Спасибо огромное!
По больше таких уроков, часто использованных фичей js на CSS
Просто и понятно, спасибо
просто комментарий в знак поддержки каналу)
Чел ты красавячик)идея супер)то что можно заменить на css,нужно заменить)
Спасибо большое, друг
Ты лучший!
Было бы интересно такую же рубрику с js- фичами, и можно было бы что-нибудь про React.js послушать, просто ты так доступно объясняешь, заходит)
Всё хорошо объяснил , теперь можно и про box-sizing ролик увидеть ))
Спс за видос.
Такой параллакс эффект прикольно использовать в середине страницы сайта)
супер)
Спасибо большое Артема! Очень внятно,кратко и понятно объяснил!!!лойсов понаставил бы,но жаль только один можно ставить(( Спасибо
Очень крутой урок! Безумно приятно смотреть. Все по делу, все четко, ёмко и понятно. Спасибо за такое высокое качество ролика. Этого прям не хватает у многих других каналов)
круто!
Оптимальную тему для следующего урока ты уже сам назвал. Box-sizing. Для меня он в свое время стал открытием, которое спасло меня от кучи геморроя. Свойство простое, но просто адски полезное.
Артём вы лысый Супермен или Тор среди веб программистов))))) спасибо за уроки Брооо
Круто
Урааа, Артем меня услышал) Теперь следующая идея для видео: сделай пожалуйста уроки на тему адаптивной верстки современных нестандартных макетов, не 12 колоночных. Андрей Гаврилов выпустил видео на эту тему,но только одно, а этого мало)
думал, что я его задолбал с параллаксом)
)))
то чувство когда я верстальщик но по ходу я многое чего еще не знаю) афигенная фича. Как то я все ровно мало въехал в механизм работы. и зависимость между текстом и фоном.... Давай еще че нибудь.
вообще ништяк. тебе тоже пятюнчик
Спасибо, необычный подход, я бы пошел другим путем.
Спасибо!!!
Кстати Filter классный стиль, недавно о нём узнал было бы классно если бы ты снял Фичи с ним)
Прикольно
Все инструкции НА ВЕСЬ ЭКРАН!
А сделать параллакс в отдельном блоке на странице - совсем другая история, и естественно, таких вариантов хрен найдешь на чистом css.
Если делать как автор видео - нифига не выйдет, картинка расползется, оверфлоу хидден задать нельзя - параллакса не будет.
Кто-то из "лайкеров" хоть что-то пробовал из этих видосов в других условиях, а не в "чистых на новой странице на весь экран"?
Совершенно верно. Данный пример подойдет для тренировок, но в продакшн-проектах не найдет применения.
Офигенский а если в отдельный контейнер сам параллакс вставить, как джамботрон в бутстрапе, не получиться?
ля, если ты такой умный зачем тогда смотришь эти видео? Автор тут хотел показать пример того какие манипуляции можно делать при помощи transform и показал интересный пример, а как дальше будут это использовать - это уже личное дело каждого
Да, голову ломаю, как убрать еще один появившейся скролл справа, судя по идее, он наверно там нужен. Пыталась сдеать в отдельной секции с div-ами. Но этот вариант подходит только для чистого body. Ищу дальше. Как информация - полезно. Остальное - самим.
Да это касается 99,9% обучающего контента на Ютубе. Никто за бесплатно раскрывать секреты профессии никогда не станет, всё нужно постигать самому либо нанимать ментора за $30+/час.
Мне понравилось. Продолжай развивать front-end! Хотелось бы увидеть темы вёрстки. Например, куча роликов в ютубе про то, "как сверстать из PSD макета", но нету конкретных правил "хорошей/правильно вёрстки". Как правильно группировать блоки, именование классов, div или h1 и т.д. Вот такого бы плана ролик!
за этим вам на интенсивы html-академии)) Они там очень подробно все объясняют. Если цены кусаются и вы не стесняетесь пиратить - все есть на торрентах. Ни к чему не призываю, просто информирую))
Благодарю за совет)
GOOO O ЕЩЁ CSS ФИЧИ.
Лайк
Ух ща на ваших уроках научусь делать ах***ные сайты, разбогатею, и с вами поделюсь)
5469620020676233 - вот на эту карту переводи деньги, как разбогатеешь)
@@Glo_Academy принял
Поддерживаю TheSijisGame , давай скролл экранами!
Пока что для меня это лучший канал для обучения веб-программированию!!)
Артем, сделай сделай урок по верстке Email письма. Уроки хорошие)
чётко
Это очень ,крутой эффект ,но по итогу придется использовать bacground-attachmend , поскольку в дальнейшем вы столкнетесь с проблемами) Особенно когда начнете работать с Js
.
спс
Отлично Артем! Спасибо! Подскажи, есть видео со слайдером фото?
полезно.
Артём спасибо за видео. Подскажи пожалуйста на codepen каким сочетанием клавиш ты быстро теги вставляеш?
Атрём, спасибо тебе большое! Давай jQuery фичи !
спасибо) очень полезно)
давай svg-sprites)
Стоит записывать дальше!
класс ты ваше креативный я бы совсем не додумался бы . Круче нечего не видел
Like =)
нужно больше видео про анимации, а то их меньше всего на ютубе
Артем, красава продовжуй далі рубрику і запиши відео урок по слайдеру.
отличный материал, отжаривай тему))))
Когда будет марофон верстки на Bootstrap 4? А то остальные марофоны не актуальны для нового Bootstrap.
Интересно!!!! Фичи мне и поболе!!!
спасибо за паралакс, вот тебе идея на след видео : как делать SVG анимациии через адоб илюстратор и css
Izlojenie materiala nastol'ko ponyatno i doxodchivo! Ogromnoe spasibo! Kuda kidat' donat?
Спс за урок но щас чаще просят сделать уже целую страницу с паралакс переходами или в простонародье страница слайдер( с точками скраю для удобства перехода или меню но там можно и якорями).
👏👏👏👏
Идея конечно не своя и взято с другого видео, но здорово, что с объяснениями и комментариями.
достаточно изображению на фоне поставить fixed и параллакс готов
Не знаю, был ли такой уже урок, но было бы интересно узнать что-то о видео на бэкграунде
хотелось бы узнать как делать горизонтальный параллакс, чтобы когда скролишь страницу вниз то текст как бы выезжал слева на право, в зависимости от того, насколько ты проскролил
классно !
очень интересно есть ли способ задать размеры отступов и шрифта относитнльно ширины родителя (не всего экрана), а родителя блока в котором находится элемент. как сделать например "резинову" кнопку которая будет масштабировать я в зависимости от ширины родителя
"как видите, ничего сложного")
Вот интересная фича, я думаю. Нужна форма, которая выглядит так - label: input. И так несколько строчек. Ее легко сделать таблицами. В TR два TD. В первом TD - label, во втором - INPUT. TR конечно может быть много. И вот в чем заморочка, все input должны выравниваться относительно самого длинного label. Вот как это реализовать на flexbox и возможно ли вообще. На крайний случай гридами.