Рет қаралды 1,630
#webflow #вебфлоу
Эффект параллакса относительно друг друга и внутри себя для картинок или блоков, текста или чего угодно. И сделаем анимацию прокрутки картинки внутри себя при кроле. Это сделать достаточно просто если знать как это реализовать. Сегодня я все это покажу, в отличии от видео которое было раньше, не нужны картинки с прозрачным фоном (png-шки или webp), а подойдут обычные jpg или любой объект.
Покажу как сделать движение картинок с разной скоростью относительно скорости скролла и собственного движения, а так же как сделать прокрутку картинки внутри себя при скролле. И все это на нашей любимой платформе вебфлоу!
•••••••••••••••••••••••••••••••
- Полезные штуки для webflow freelance-blog.com/webflow/
- Индивидуальное обучение freelance-blog.com/study/
- Блог про фриланс и вебфлоу freelance-blog.webflow.io
•••••••••••••••••••••••••••••••
❓❓❓ Что такое этот вебфлоу? Почему это НЕ конструктор? Как на нем зарабатывать больше денег, чем остальные? • Что такое webflow и ка...
БЕСПЛАТНЫЕ курсы по webflow:
👉 • Базовый расширенный (для новичка) • Курс для новичка по we...
👉 • Базовый ускоренный, для новичка который спешит • Трелло для фрилансера,...
👉 • Портфолио для фрилансера (уровень средний) • Курс по созданию портф...
👉 • Портфолио для студии (уровень сложный) • Бесплатный курс по раз...
👉 • Делаем сложный сайт (уровень профи) • Сайт фотографа, беспла...
•••••••••••••••••••••••••••••••
Если вы хотите, зарабатывать те деньги, которые ждут вас через 5 лет самостоятельного роста, буквально телепортироваться в будущее и начать делать профессиональные сайты уже сейчас - тогда я способен вам помочь! freelance-blog.com/study/
Нет никакого потока, групп, кураторов. Только вы и я. Прокачиваю именно вас.
•••••••••••••••••••••••••••••••
Моя почта - artstrangers@gmail.com
Телеграм @artstranger
•••••••••••••••••••••••••••••••
👉 • Портфолио - freelance-blog.com/
👉 • Инстаграм - / artstranger.ru
👉 • Бесплатные плюшки - freelance-blog.com/webflow/
👉 • Материалы для уроков - freelance-blog.webflow.io/
👉 • Индивидуальное обучение - freelance-blog.com/study/
•••••••••••••••••••••••••••••••
Таймкоды:
00:00 Вступление
00:28 Делаем структуру секций
02:11 Создаем блок внутри которого будет анимация параллакса
03:30 Добавляем картинки которые будем анимировать
08:28 Прописываем анимацию параллакса картинок относительно друг друга
16:40 Делаем анимацию прокрутки картинки внутри себя при кроле
18:43 Смотрим на результат
19:38 Выводы