Верстка сайта с 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
Пікірлер: 72
Вадим, спасибо тебе. Купил твой курс больше года назад. Только руки дошли до него. У тебя самый годный контент по верстке.
новую натяжку на wordpress с wysiwyg редактором пожалуйста!
@svoy4el
20 күн бұрын
Поддерживаю!
@user-th6iz1eb3e
13 күн бұрын
+++
Красавчик! Спасибо за хороший контент по вёрстке !
Привет! Скажу честно, я не знаю почему у тебя так мало просмотров, несмотря на все идеи и их разбор, которые ты даешь. Спасибо тебе за все, что ты делаешь!
Может автор и знает такую фишку, но напишу, сам недавно узнал, что цвету написаному с хешом, тоже можно задавать прозрачность, не обязательно переводить его в rgb. Нужно просто после знаков цвета, еще добавить число от 1 до 100. Например есть черный цвет #000000, то его версия #00000050 - будет на 50% прозрачным, сам недавно узнал и пользуюсь часто, а то реально бесит цвет переводить в rgb для прозрачности, ну и выглядит, как по мне, лучше чем rgb). Ну а так, видос прикольный, лайк, реально полезные вещи узнал)
@hopelezzhopelezz487
14 күн бұрын
последние 2 цифры это так называемый alpha- канал, на простом языке это прозрачность , о нем давно известно и все кто хочет юзают его. И автор канала не просто его знает, у него даже есть видео и не одно, по этому поводу, просто в видео не отдельно по альфа каналу, а в рамках какого-то проекта или верстки :) P.S. называется он RGBA , существует с начала 1990х годов :) и кстати в конце видео, когда идёт вёрстка стрелок ( 58:29 ) как раз и используется этот альфа канал для прозрачности фона :)
@smotritelyoutube
14 күн бұрын
@@hopelezzhopelezz487 ты не понял о чем я написал, на 58:29 он как раз и юзает rgba, а я писал о том, что прозрачность можно задавать HEX цветам, типа если черный цвет это #000000, то если в конце еще добавить #00000050 то он будет на 50% прозрачным, я как раз и писал о том, что вместо того чтобы писать много букв и цифр в формате rgba, можно просто добавить 2 цифры в формат HEX
Вадос, спасибо тебе ОГРОМНОЕ за твой труд и знаниями которыми ты делешься P.s. ты красавчик 😉👍
@vadymprokopchuk
20 күн бұрын
Благодарю
Жалко нельзя купить курс, а так с большим интересом прошел бы. Спасибо за видео очень классные информативные ролики
❤❤❤ Шикарно, как всегда!
Хотелось бы верстку сайта на Tailwind. Только один человек из русского язычного сегмента сделал это. А у тебя Вадим с твоим трудом(талантом) выйдет лучшее учебное пособие
Круто. Буду пробовать 😅
Вот это тема вообще! Жду видос с вёрсткой на препроцессорах)
@vadymprokopchuk
20 күн бұрын
Спасибо!
Спасибо!
Вадим!!!СПасибо !!!!!
Ты лучший 💚🤍💚🤍 Спасибо большое твоя ученица из Узбекистана
@vadymprokopchuk
20 күн бұрын
Класс, спасибо
Хорошая тема! Видоса для старичков давно не было😊
@vadymprokopchuk
20 күн бұрын
Круть!
Прикольная штука 😀💥👍
@vadymprokopchuk
20 күн бұрын
супер
Ооо! Наконец-то посложнее! 😊
Лайк авансом👍
ох такую бы вечерунку на крупном сайте сделать
Let's go на вечеринку )
@vadymprokopchuk
20 күн бұрын
Да да да
Вадим, спасибо за труд и видео!
@vadymprokopchuk
20 күн бұрын
Спасибо
с кайфом
@vadymprokopchuk
19 күн бұрын
спасибо
Это просто праздник какой-то
@vadymprokopchuk
20 күн бұрын
Я рад ))
Ось це Вадим завернув 😁🔥
@vadymprokopchuk
20 күн бұрын
Це точно ))
Сначала like, потом просмотр 🎉❤❤❤❤❤
@vadymprokopchuk
20 күн бұрын
Благодарю
Всё хочу записаться и собраться на курс, но никак не найду время для этого или больше даже не могу собраться с мыслями на это всё, хотя и вопрос финансов сейчас не самый последний в Украине. Но с удовольствием когда-нибудь запишусь и пройду курс. Видео регулярно смотрю :) Вопрос такой, этот курс исключительно вёрствка ( с минималкой по JS ? пару селекторов и всё ? ) или это общий FrontEnd на уровень junior ( или типа pre-junior ?) .
Здравствуйте! спасибо за урок! Подскажите, какие кнопки нажать, чтоб было видно падинг и расстояния? я квадратом мерю)
Первый, спасибо вадос😊
@vadymprokopchuk
20 күн бұрын
Спасибо !
Дякую за таку анімацію🙏 А коли буде верстка не для новачків зі збіркою?)
@vadymprokopchuk
20 күн бұрын
дякую, та буде, ну просто дуже багато задач і справ маю
@ob5804
14 күн бұрын
Вадиме, а хто взагалі підключає рекламу в блог? Це робота верстальника?@@vadymprokopchuk
Нашла ошибку: в background-size у Вас coNer, а не coVer. Ещё, при создании списка с ul у меня вылезли маркеры (чёрные кружочки), я заменила на ol и они пропали.
Вадим, привет. Курс перенесли на неделю?
@vadymprokopchuk
20 күн бұрын
привет, да сместил на 1 неделю, немного не успеваю по задачам начать раньше
Когда следующие видео будет ? давай по три видео в неделю
29:28 на 49 строке опечатка background-size coner -> background-size: cover;
@vadymprokopchuk
20 күн бұрын
От зараза)) не заметил
2, топ видос 😊😊😊
студентов из России принимаете? чет, сайт не окрывает.... :(
ай хищник
@vadymprokopchuk
20 күн бұрын
Благодарю ))
@user-du2nz4lj1d
20 күн бұрын
@@vadymprokopchuk можно макетик
Обычно ты даешь ссылку на макет, а в этот раз будет?
@vadymprokopchuk
19 күн бұрын
да, в описании под видео все есть
@user-xb1jf2ul4w
19 күн бұрын
@@vadymprokopchuk Да, нашел бльшое спасибо. Продолжай делать то что делаешь, самые классные уроки на ютубе))))
@vadymprokopchuk
19 күн бұрын
@@user-xb1jf2ul4w спасибо
у меня: animation-timeline: scroll() не работает 😟
@user-cb8fv4kk2o
13 күн бұрын
аналоично,ты решил проблему?
@candy_front
13 күн бұрын
@@user-cb8fv4kk2o нет там показывает что css не поддерживает scroll()
А макета нет?
@vadymprokopchuk
20 күн бұрын
В описании, под видео
@user-du2nz4lj1d
20 күн бұрын
@@vadymprokopchuk нету, или ютуб долго подгружает
Нихера не работает в файрфоксе, ба-бам, поздравляю
@vadymprokopchuk
19 күн бұрын
Ну если бы ты смотрел видео, то там есть об этом информация и варианты реализации
@igorkroshkin9354
19 күн бұрын
@@vadymprokopchuk Я к тому, что видео отличное, но НЕЗАКОНЧЕННОЕ. Что мешает (мешало) добавить "варианты реализации"? Может быть потому что и с другими браузерами будет проблема? Я лично так вижу
@The-Way-of-Life.
19 күн бұрын
@@igorkroshkin9354 Наверное дело в длительности ролика? Данный функционал можно реализовать на js, тогда будет работать на всех браузерах