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: / discord
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: / 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
