Верстка сайта с parallax 3D анимацией

Друзья, вашему вниманию) верстка сайта с parallax 3D анимацией. Дождались! 😻
Вы научитесь делать крутой и довольно востребованный эффект в ближайшем будущем, мы пройдем все пошагово, я обьясню абсолютно все особенности при верстке таких макетов, поговорим о будущем технологий связаных с html и css, берите кувшин чая, будет очень полезно.
----------------------------------------
Сайт курса по верстке - from0to1.com.ua/
----------------------------------------
----------------------------------------
макет - drive.google.com/file/d/1tqf0...
файлы (начальный html и css) - drive.google.com/file/d/1B1BT...
----------------------------------------
----------------------------------------
Готовая верстка на patreon - / from0to1
Телеграм канал - t.me/from0to1com
----------------------------------------
----------------------------------------
Доп ссылки:
Видео по анимации - • CSS анимация + практич...
Полифил - github.com/flackr/scroll-time...
6 css свойств которые от тебя скрывают - • 6 css свойств которые ...
----------------------------------------
Телеграм канал - t.me/from0to1com

[@user-ub9ik9mn7i]

Вадим, спасибо тебе. Купил твой курс больше года назад. Только руки дошли до него. У тебя самый годный контент по верстке.

[@Francija-Naiznanku]

Красавчик! Спасибо за хороший контент по вёрстке !

[@StonHenge]

новую натяжку на wordpress с wysiwyg редактором пожалуйста!

[@svoy4el]

Поддерживаю!

[@user-th6iz1eb3e]

+++

[@arthurterner3348]

Вадос, спасибо тебе ОГРОМНОЕ за твой труд и знаниями которыми ты делешься P.s. ты красавчик 😉👍

[@vadymprokopchuk]

Благодарю

[@The-Way-of-Life.]

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

[@smotritelyoutube]

Может автор и знает такую фишку, но напишу, сам недавно узнал, что цвету написаному с хешом, тоже можно задавать прозрачность, не обязательно переводить его в rgb. Нужно просто после знаков цвета, еще добавить число от 1 до 100. Например есть черный цвет #000000, то его версия #00000050 - будет на 50% прозрачным, сам недавно узнал и пользуюсь часто, а то реально бесит цвет переводить в rgb для прозрачности, ну и выглядит, как по мне, лучше чем rgb). Ну а так, видос прикольный, лайк, реально полезные вещи узнал)

[@hopelezzhopelezz487]

последние 2 цифры это так называемый alpha- канал, на простом языке это прозрачность , о нем давно известно и все кто хочет юзают его. И автор канала не просто его знает, у него даже есть видео и не одно, по этому поводу, просто в видео не отдельно по альфа каналу, а в рамках какого-то проекта или верстки :) P.S. называется он RGBA , существует с начала 1990х годов :) и кстати в конце видео, когда идёт вёрстка стрелок ( 58:29 ) как раз и используется этот альфа канал для прозрачности фона :)

[@smotritelyoutube]

@@hopelezzhopelezz487 ты не понял о чем я написал, на 58:29 он как раз и юзает rgba, а я писал о том, что прозрачность можно задавать HEX цветам, типа если черный цвет это #000000, то если в конце еще добавить #00000050 то он будет на 50% прозрачным, я как раз и писал о том, что вместо того чтобы писать много букв и цифр в формате rgba, можно просто добавить 2 цифры в формат HEX

[@NightBos]

❤❤❤ Шикарно, как всегда!

[@tatsumasa6659]

Жалко нельзя купить курс, а так с большим интересом прошел бы. Спасибо за видео очень классные информативные ролики

[@user-be8dy2lw3n]

Круто. Буду пробовать 😅

[@user-gk9ll4ub6h]

Вадим!!!СПасибо !!!!!

[@user-gp1vo3yv3m]

Хотелось бы верстку сайта на Tailwind. Только один человек из русского язычного сегмента сделал это. А у тебя Вадим с твоим трудом(талантом) выйдет лучшее учебное пособие

[@artyombelavin3146]

Вот это тема вообще! Жду видос с вёрсткой на препроцессорах)

[@vadymprokopchuk]

Спасибо!

[@candy_front]

Ты лучший 💚🤍💚🤍 Спасибо большое твоя ученица из Узбекистана

[@vadymprokopchuk]

Класс, спасибо

[@user-fh8wi4mo6s]

Спасибо!

[@shurinskiy]

Ооо! Наконец-то посложнее! 😊

[@user-fw9ez9we1c]

Хорошая тема! Видоса для старичков давно не было😊

[@vadymprokopchuk]

Круть!

[@walterwhite4407]

Лайк авансом👍

[@user-uz4yu6qk1r]

Вадим, спасибо за труд и видео!

[@vadymprokopchuk]

Спасибо

[@gvozdeveloper]

Прикольная штука 😀💥👍

[@vadymprokopchuk]

супер

[@hopelezzhopelezz487]

Всё хочу записаться и собраться на курс, но никак не найду время для этого или больше даже не могу собраться с мыслями на это всё, хотя и вопрос финансов сейчас не самый последний в Украине. Но с удовольствием когда-нибудь запишусь и пройду курс. Видео регулярно смотрю :) Вопрос такой, этот курс исключительно вёрствка ( с минималкой по JS ? пару селекторов и всё ? ) или это общий FrontEnd на уровень junior ( или типа pre-junior ?) .

[@candy_front]

Сначала like, потом просмотр 🎉❤❤❤❤❤

[@vadymprokopchuk]

Благодарю

[@progover24]

Первый, спасибо вадос😊

[@vadymprokopchuk]

Спасибо !

[@hpbulbasaur8946]

ох такую бы вечерунку на крупном сайте сделать

[@KIREKSSHOW]

с кайфом

[@vadymprokopchuk]

спасибо

[@TheWhiteFilm-sq6fk]

2, топ видос 😊😊😊

[@user-be9vd1jm7e]

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

[@ringnull]

Let's go на вечеринку )

[@vadymprokopchuk]

Да да да

[@user-xe4be7iq1q]

Ось це Вадим завернув 😁🔥

[@vadymprokopchuk]

Це точно ))

[@yuriykolomytsyn2352]

Это просто праздник какой-то

[@vadymprokopchuk]

Я рад ))

[@ob5804]

Дякую за таку анімацію🙏 А коли буде верстка не для новачків зі збіркою?)

[@vadymprokopchuk]

дякую, та буде, ну просто дуже багато задач і справ маю

[@ob5804]

Вадиме, а хто взагалі підключає рекламу в блог? Це робота верстальника?​@@vadymprokopchuk

[@user-xm1hd8fe9m]

Когда следующие видео будет ? давай по три видео в неделю

[@user-is9nx5je5t]

Нашла ошибку: в background-size у Вас coNer, а не coVer. Ещё, при создании списка с ul у меня вылезли маркеры (чёрные кружочки), я заменила на ol и они пропали.

[@elkazmakaz5870]

Вадим, привет. Курс перенесли на неделю?

[@vadymprokopchuk]

привет, да сместил на 1 неделю, немного не успеваю по задачам начать раньше

[@ringnull]

29:28 на 49 строке опечатка background-size coner -> background-size: cover;

[@vadymprokopchuk]

От зараза)) не заметил

[@master_shifu_epta]

студентов из России принимаете? чет, сайт не окрывает.... :(

[@user-us8eo3dz9p]

ай хищник

[@vadymprokopchuk]

Благодарю ))

[@user-du2nz4lj1d]

@@vadymprokopchuk можно макетик

[@user-xb1jf2ul4w]

Обычно ты даешь ссылку на макет, а в этот раз будет?

[@vadymprokopchuk]

да, в описании под видео все есть

[@user-xb1jf2ul4w]

@@vadymprokopchuk Да, нашел бльшое спасибо. Продолжай делать то что делаешь, самые классные уроки на ютубе))))

[@vadymprokopchuk]

@@user-xb1jf2ul4w спасибо

[@candy_front]

у меня: animation-timeline: scroll() не работает 😟

[@user-cb8fv4kk2o]

аналоично,ты решил проблему?

[@candy_front]

@@user-cb8fv4kk2o нет там показывает что css не поддерживает scroll()

[@user-wq3po9si9i]

А макета нет?

[@vadymprokopchuk]

В описании, под видео

[@user-du2nz4lj1d]

@@vadymprokopchuk нету, или ютуб долго подгружает

[@igorkroshkin9354]

Нихера не работает в файрфоксе, ба-бам, поздравляю

[@vadymprokopchuk]

Ну если бы ты смотрел видео, то там есть об этом информация и варианты реализации

[@igorkroshkin9354]

@@vadymprokopchuk Я к тому, что видео отличное, но НЕЗАКОНЧЕННОЕ. Что мешает (мешало) добавить "варианты реализации"? Может быть потому что и с другими браузерами будет проблема? Я лично так вижу

[@The-Way-of-Life.]

@@igorkroshkin9354 Наверное дело в длительности ролика? Данный функционал можно реализовать на js, тогда будет работать на всех браузерах