Линия при скролле заполняется, блоки появляются по мере заполнения. Обучение webflow бесплатно
HTML-код
- Опубликовано: 10 сен 2024
- #webflow #вебфлоу
Сегодня сделаем интересный блок, с прогресс баром, (заполняющейся линией сверху вниз + заполнение контрольных точек) параллельно по мере скролла будут появляться текстовые блоки, а слева будет липкий блок, который будет преследовать пользователя на протяжении всего блока.
Так же предусмотрены точки на пути линии, которые как контрольные пункты, заполняются по мере заполнения самой линии, напротив этих точек хорошо ставить текстовые блоки, которые будут появляться по мере прокрутки страницы и параллельного заполнения данной шкалы.
Справа покажу как усилить данный эффект, добавив блок, который будет прилипать к верху окна браузера и преследовать пользователя (всегда быть на виду) по мере прокрутки данного блока.
Когда блок доскроллиться до конца, то блок слева перестанет быть липким и уедет вверх. Вся этак конструкция не сложная в реализации но является универсальным решением для множества ситуаций. Поняв как сделать данную штуку, вы сможете создавать аналогичные в будущем без проблем.
Данный способ оформления применим, когда на сайте нужно показать алгоритм каких-то действий, последовательность, ключевые точки чего-то и т.д. Да хоть преимущества так оформить Способов применения масса. Главное понять логику построения данной анимации и вы сможете применять ее где угодно))
•••••••••••••••••••••••••••••••
- Полезные штуки для webflow freelance-blog...
- Индивидуальное обучение freelance-blog...
•••••••••••••••••••••••••••••••
БЕСПЛАТНЫЕ курсы по webflow:
👉 • Базовый (для новичка) • Трелло для фрилансера,...
👉 • Портфолио для фрилансера (уровень средний) • Курс по созданию портф...
👉 • Портфолио для студии (уровень сложный) • Бесплатный курс по раз...
👉 • Делаем сложный сайт (уровень профи) • Сайт фотографа, беспла...
•••••••••••••••••••••••••••••••
Если вы хотите, зарабатывать те деньги, которые ждут вас через 5 лет самостоятельного роста, буквально телепортироваться в будущее и начать делать профессиональные сайты уже сейчас - тогда я способен вам помочь! freelance-blog...
Нет никакого потока, групп, кураторов. Только вы и я. Прокачиваю именно вас.
•••••••••••••••••••••••••••••••
Моя почта - artstrangers@gmail.com
Телеграм @artstranger
•••••••••••••••••••••••••••••••
👉 • Портфолио - freelance-blog...
👉 • Инстаграм - / artstranger.ru
👉 • Бесплатные плюшки - freelance-blog...
👉 • Материалы для уроков - freelance-blog...
👉 • Индивидуальное обучение - freelance-blog...
•••••••••••••••••••••••••••••••
Как у вас все просто ))
Ага ))
Очень кайфово! ещё бы времени побольше, чтобы по всем вашим видео практиковаться, спасибо за уроки
Пожалуйста 😉 да времени всегда не хватает, скоро попытаюсь сделать что-то типа топа видео, собрав все самое важное, что точно надо посмотреть, для упрощения обучения новичкам
@@freelance-pro Да, будет полезно!
😉
Очень пригодится, спасибо большое!
Пожалуйста 😉
Спасибо. Как всегда, все очень детально и понятно. У меня вопрос - мне нужна такая появляющаяся при скроле полоса горизонтальная, для этого принцип анимации отличается от вертикального появления? Вертикально у меня за вами получилось, а горизонтально не получается.
Нет принцип тот же, у меня на портфолио такая полоска есть, приходите на обучение покажу как делать такое и вообще сайты
есть примери интернет магазинов
для Украины с оплатой ?
Да, но их дорабатыыал программист зачем их хлеб отбирать
На бесплатной версией такое сделаю?
Да, но вам нужно будет это freelance-blog.com/webflow/
в горле запершило...
Выпейте водички