Wix Studio Scroll Effect | Background Color Change for an Agency Portfolio Website

Ryan from Wix Fix will be teaching you how to implement a captivating scroll-triggered background color change effect on your website. Elevate user engagement and enhance the visual appeal of your web pages. In this workshop, we will be using Velo and Interactions. Want to follow along? Download the assets from our community: https://discord.com/channels/943239798905270282/1163494673038463067/1166031107154784356 View more by Ryan (Wix Fix): @wixfix Join Our Discord Community: ️️ https://www.editorx.tv/ ️Build Websites in Minutes Using Editor X Today for FREE: ️️ https://bit.ly/EditorXDailyChallenge Follow Brandon Groce: - Instagram: https://www.instagram.com/brand0ngr0ce/ - Linkedin: www.linkedin.com/in/brandon-groce - Website: https://www.editorx.tv/ --- 00:00 INTRO 01:11 Beginning 02:04 Ryan Website Explanation 03:14 Tutorial Starts / Setting Main Section 04:23 Splitting Main Section in 5 Grid Cells 05:19 1st Section Starts 05:43 Tip: Advanced Sizing 06:48 1st Section Continues / Setting up Texts 09:07 Adding Videos / Video Behavior 10:26 Adding Color Filter on Video Boxes 11:20 1st Section Final Tweaks 11:38 2nd Section Starts 12:39 Setting up Grids & Gaps 13:07 Pixels vs Percentage Explanation 16:16 Adding Vectors, Texts and Buttons 19:48 Setting Sticky Vector Art 24:46 Scroll Color Fade Effect 27:58 3rd Section Starts 28:44 Scroll Color Fade Effect 29:46 Animation Area Explanation 31:36 Fixing Sections Proportions 33:00 4rt Section Starts / Flexboxes 35:44 Navigation Arrows for Flexboxes 36:35 5ft Section Starts / Setting the CTA 41:28 Why use "VW" Measurements for Height? 44:48 Scroll Effect Variant 49:37 Webpage Finished / Final Tweaks 55:30 Ryan's Final thoughts 55:55 Q&A Ryan's inspiration for his content 57:45 OUTRO --- #wixstudio #wix #scroll #design