Parallax Animation On Scroll - Webflow Interaction And Animation Tutorial
3.6 هزار بار بازدید -
پارسال
-
Dive into the world of
Dive into the world of parallax animation within Webflow. This tutorial addresses the frequent requests for introductions to animations in Webflow, emphasizing the psychological elements behind them. Parallax animation isn't merely a plug-and-play; it requires skillful manipulation of images and layers to craft the illusion of perspective in a 2D space. Stay tuned till the end to witness a captivating example from a real estate website, showcasing the magic of parallax. Master the art of creating depth and dimension in your web designs. Don't miss out!
--------- VIDEO RESOURCES ---------
🏆 - Webflow Pro Group - Facebook: webflowpros
🖥️ - Webflow - https://webflow.grsm.io/32uj35qwa88a
🎥 - Loom - https://loom.grsm.io/t4o9kknlq7kf
--------- STAY CONNECTED ---------
🖥️ - Website - https://www.legacydesignagency.com/
📷 - Instagram - Instagram: legacydesign.agency
✉️ - Email - [email protected]
🎬 - Edited with Gling: https://gling.ai
--------- TIME STAMPS ---------
0:00 - Introduction to Animation Insights
1:00 - Introduction to Parallax Effect in Webflow
1:30 - Psychology Behind Animations
2:00 - Demonstrating Parallax on Queensland Properties Site
3:00 - Breaking Down the Parallax Animation
4:00 - Setting Up the Parallax in Webflow
5:00 - Importance of Image Optimization for Parallax
6:00 - Using TinyPNG for Image Compression
7:00 - Setting Up Images in Webflow
8:00 - Adjusting Image Sizes for Parallax Effect
9:00 - Setting Up Scroll Animations in Webflow
10:00 - Adjusting Image Speeds for Parallax
11:00 - Fine-Tuning the Parallax Animation
12:00 - Tips for Better Parallax Effects
13:00 - Reviewing the Completed Parallax Animation
14:00 - Join the Facebook Community for More Tips
15:00 - Upcoming Course Announcement
16:00 - Conclusion and Thank You
🏆 - Webflow Pro Group - Facebook: webflowpros
🖥️ - Webflow - https://webflow.grsm.io/32uj35qwa88a
🎥 - Loom - https://loom.grsm.io/t4o9kknlq7kf
🖥️ - Website - https://www.legacydesignagency.com/
📷 - Instagram - Instagram: legacydesign.agency
✉️ - Email - [email protected]
🎬 - Edited with Gling: https://gling.ai
0:00 - Introduction to Animation Insights
1:00 - Introduction to Parallax Effect in Webflow
1:30 - Psychology Behind Animations
2:00 - Demonstrating Parallax on Queensland Properties Site
3:00 - Breaking Down the Parallax Animation
4:00 - Setting Up the Parallax in Webflow
5:00 - Importance of Image Optimization for Parallax
6:00 - Using TinyPNG for Image Compression
7:00 - Setting Up Images in Webflow
8:00 - Adjusting Image Sizes for Parallax Effect
9:00 - Setting Up Scroll Animations in Webflow
10:00 - Adjusting Image Speeds for Parallax
11:00 - Fine-Tuning the Parallax Animation
12:00 - Tips for Better Parallax Effects
13:00 - Reviewing the Completed Parallax Animation
14:00 - Join the Facebook Community for More Tips
15:00 - Upcoming Course Announcement
16:00 - Conclusion and Thank You
پارسال
در تاریخ 1402/05/17 منتشر شده
است.
3,616
بـار بازدید شده