Recreating Givingli - Background Color Change on Scroll (Part 1) | Wix Fix

Hey there, web design enthusiasts! Welcome back to another tutorial here at NewForm. Get ready to dive into some exciting web design magic using Wix Studio. Today, we're tackling something pretty slick—recreating an eye-catching background color change on scroll effect from the super cool website, Givingli.

In case you haven't stumbled upon their site yet, Givingli focuses on eGift cards, and their homepage is nothing short of captivating! Over the next few posts, we're going to bring some of that pizzazz to life on our own pages. But first, let's zero in on a neat trick: making the background colors change as you scroll down. Intrigued? Stick around, and you'll be flaunting this effect in no time.

Before we jump into the nitty-gritty, here's a friendly reminder—whether you're just tuning into Wix Fix for the first time or you’re a seasoned pro, there are always new tricks to learn. At NewForm, we’re all about honing your design skills, helping you find opportunities in the marketplace, and connecting you with industry leaders. We offer monthly web design challenges with cash prizes, weekly skill-building events, and exclusive monthly guest sessions featuring top professionals in web design. Here, you get to learn directly from the best, access invaluable resources, and build cool things online.

So, if you’re ready to take your skills to new heights and join a community of like-minded creatives, now’s the time! Without further ado, let’s dive into today’s post—and don’t forget to join NewForm afterward for more amazing opportunities!

Why Start with Background Colors?

You might be wondering: Why begin with changing the background colors instead of jumping straight into building those snazzy sections? Simple! Because in Wix Studio, the typical workflow involves building one section at a time. With this background effect, we need to construct all the sections within a single container—getting this part right will set us up nicely for everything that follows.

Step-by-Step Guide

1. Start with a Section

Open your Wix Studio workspace and select the desired section on your webpage that will exhibit the magic of changing colors. Instead of adding multiple sections for each change, we streamline this by using a single section divided into four parts with Advanced CSS Grid.

2. Use Advanced CSS Grid

Access the Advanced CSS Grid options to organize your single section into four distinct parts, allowing individual segments to host different background colors.

1. Apply CSS Grid: Click on `Apply` within the grid menu and set it to four rows.

2. Prepare the Containers: Navigate to the `Add` panel, grab a `Container`, and place one in each grid cell, stretching them to fit. You’ll repeat this for every row since each will display a different background color.

3. Set the Stage with Colors

We’re gonna channel our inner Picassos and splash some colors:

1. Container 1 & 4: Set the background to that striking blue.

2. Container 2: Change this baby to a warm beige.

3. Container 3: Go for a light purple hue.

4. Name the Layers

Naming layers might sound dull, but trust me, it makes life a whole lot easier:

1. Color 1: Blue

2. Color 4: Add blue again at the end (to smoothly transition into the footer)

3. Color 2: Beige

4. Color 3: Purple

5. Achieving a Smooth Transition

Alright, here comes the suave part—making these colors blend nicely as you scroll:

1. Avoid Sharp Lines: Overlap your grid cells with each container, using the `Shift` key to make sure each color occupies partially both the section above and below it.

6. Animate the Transition

For seamless transitions, let's add some scroll-based finesse:

1. Go to `Animation and Effects` and click on `Scroll` > `Add` > `Fade`.

2. Adjust each animation to start precisely as you want your new color section to peek through—the key is in timing; it should start as users approach the transition.

7. Preliminary Preview

Fire up the `Preview`, scroll through, and make necessary adjustments to ensure everything transitions smoothly without frizz and jitter.

8. Position and Hide Content Wisely

Don’t mistreat the layout! Store your content outside the colored containers that change on the scroll to prevent unwanted fade effects. Assemble your content directly on the grid section.

Wrapping Up

And there you have it! You've just mastered the art of changing background colors on scroll using Wix Studio 🎨. This effect gives your web design a dynamic and professional vibe that can make any project stand out.

Remember, this is just the beginning—over the next few posts, we will dive deeper into recreating Givingli's homepage, section by section. But until then, explore this effect and imagine how it can transform your creativity into real, functional webpages.

If you’re eager for more insights, tips, and community interactions head over to NewForm. Engage with fellow design enthusiasts, participate in our exciting challenges, and accelerate your learning curve by rubbing shoulders with seasoned professionals. Let’s create something amazing, together. Until next time, happy designing!