Верстка сайта с parallax 3D анимацией
HTML-код
- Опубликовано: 15 май 2024
- Друзья, вашему вниманию) верстка сайта с 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
![KFF Singapore Badminton Open 2024 | He/Ren (CHN) vs. Alfian/Ardianto (INA) [7] | F](http://i.ytimg.com/vi/an7AykjOaAA/mqdefault.jpg)
Вадим, спасибо тебе. Купил твой курс больше года назад. Только руки дошли до него. У тебя самый годный контент по верстке.
Привет! Скажу честно, я не знаю почему у тебя так мало просмотров, несмотря на все идеи и их разбор, которые ты даешь. Спасибо тебе за все, что ты делаешь!
Красавчик! Спасибо за хороший контент по вёрстке !
Вадос, спасибо тебе ОГРОМНОЕ за твой труд и знаниями которыми ты делешься
P.s. ты красавчик 😉👍
Благодарю
Может автор и знает такую фишку, но напишу, сам недавно узнал, что цвету написаному с хешом, тоже можно задавать прозрачность, не обязательно переводить его в rgb. Нужно просто после знаков цвета, еще добавить число от 1 до 100. Например есть черный цвет #000000, то его версия #00000050 - будет на 50% прозрачным, сам недавно узнал и пользуюсь часто, а то реально бесит цвет переводить в rgb для прозрачности, ну и выглядит, как по мне, лучше чем rgb). Ну а так, видос прикольный, лайк, реально полезные вещи узнал)
последние 2 цифры это так называемый alpha- канал, на простом языке это прозрачность , о нем давно известно и все кто хочет юзают его. И автор канала не просто его знает, у него даже есть видео и не одно, по этому поводу, просто в видео не отдельно по альфа каналу, а в рамках какого-то проекта или верстки :)
P.S. называется он RGBA , существует с начала 1990х годов :) и кстати в конце видео, когда идёт вёрстка стрелок ( 58:29 ) как раз и используется этот альфа канал для прозрачности фона :)
@@hopelezzhopelezz487 ты не понял о чем я написал, на 58:29 он как раз и юзает rgba, а я писал о том, что прозрачность можно задавать HEX цветам, типа если черный цвет это #000000, то если в конце еще добавить #00000050 то он будет на 50% прозрачным, я как раз и писал о том, что вместо того чтобы писать много букв и цифр в формате rgba, можно просто добавить 2 цифры в формат HEX
новую натяжку на wordpress с wysiwyg редактором пожалуйста!
Поддерживаю!
+++
❤❤❤ Шикарно, как всегда!
Жалко нельзя купить курс, а так с большим интересом прошел бы. Спасибо за видео очень классные информативные ролики
Круто. Буду пробовать 😅
Хотелось бы верстку сайта на Tailwind. Только один человек из русского язычного сегмента сделал это. А у тебя Вадим с твоим трудом(талантом) выйдет лучшее учебное пособие
Спасибо!
Ты лучший 💚🤍💚🤍
Спасибо большое
твоя ученица из Узбекистана
Класс, спасибо
Вадим!!!СПасибо !!!!!
Ооо! Наконец-то посложнее! 😊
Хорошая тема! Видоса для старичков давно не было😊
Круть!
Вот это тема вообще! Жду видос с вёрсткой на препроцессорах)
Спасибо!
Всё хочу записаться и собраться на курс, но никак не найду время для этого или больше даже не могу собраться с мыслями на это всё, хотя и вопрос финансов сейчас не самый последний в Украине. Но с удовольствием когда-нибудь запишусь и пройду курс. Видео регулярно смотрю :)
Вопрос такой, этот курс исключительно вёрствка ( с минималкой по JS ? пару селекторов и всё ? ) или это общий FrontEnd на уровень junior ( или типа pre-junior ?) .
Первый, спасибо вадос😊
Спасибо !
Лайк авансом👍
Прикольная штука 😀💥👍
супер
Сначала like, потом просмотр 🎉❤❤❤❤❤
Благодарю
ох такую бы вечерунку на крупном сайте сделать
Let's go на вечеринку )
Да да да
с кайфом
спасибо
Здравствуйте! спасибо за урок! Подскажите, какие кнопки нажать, чтоб было видно падинг и расстояния? я квадратом мерю)
Это просто праздник какой-то
Я рад ))
2, топ видос 😊😊😊
Ось це Вадим завернув 😁🔥
Це точно ))
Вадим, спасибо за труд и видео!
Спасибо
Нашла ошибку: в background-size у Вас coNer, а не coVer. Ещё, при создании списка с ul у меня вылезли маркеры (чёрные кружочки), я заменила на ol и они пропали.
29:28 на 49 строке опечатка background-size coner -> background-size: cover;
От зараза)) не заметил
Дякую за таку анімацію🙏 А коли буде верстка не для новачків зі збіркою?)
дякую, та буде, ну просто дуже багато задач і справ маю
Вадиме, а хто взагалі підключає рекламу в блог? Це робота верстальника?@@vadymprokopchuk
Вадим, привет. Курс перенесли на неделю?
привет, да сместил на 1 неделю, немного не успеваю по задачам начать раньше
Когда следующие видео будет ? давай по три видео в неделю
студентов из России принимаете? чет, сайт не окрывает.... :(
ай хищник
Благодарю ))
@@vadymprokopchuk можно макетик
Обычно ты даешь ссылку на макет, а в этот раз будет?
да, в описании под видео все есть
@@vadymprokopchuk Да, нашел бльшое спасибо. Продолжай делать то что делаешь, самые классные уроки на ютубе))))
@@user-xb1jf2ul4w спасибо
у меня: animation-timeline: scroll() не работает 😟
аналоично,ты решил проблему?
@@user-cb8fv4kk2o нет там показывает что css не поддерживает scroll()
А макета нет?
В описании, под видео
@@vadymprokopchuk нету, или ютуб долго подгружает
Нихера не работает в файрфоксе, ба-бам, поздравляю
Ну если бы ты смотрел видео, то там есть об этом информация и варианты реализации
@@vadymprokopchuk Я к тому, что видео отличное, но НЕЗАКОНЧЕННОЕ. Что мешает (мешало) добавить "варианты реализации"? Может быть потому что и с другими браузерами будет проблема? Я лично так вижу
@@igorkroshkin9354 Наверное дело в длительности ролика? Данный функционал можно реализовать на js, тогда будет работать на всех браузерах