Including scroll animation to Divi’s background mask and patterns is an invaluable design trick that may convey new lifestyles on your site’s background designs. We’ve already proven you how you can mix Divi’s background choices in ingenious techniques, together with how you can create two layers of background designs. However, lately, we’re including scroll animation to Divi’s background choices.

On this educational, we’re going to display you how you can create and animate background mask and patterns the usage of Divi’s scroll choices (no customized code wanted). To try this, we’ll create a floating background layer the usage of a Divi row (very similar to what we did right here) that we will be able to use to animate the background mask and patterns when a person scrolls via a piece of content material. We expect you’re going to like the end result.

Let’s get began!

Sneak Peek

Here’s a fast representation of what the background scroll animation will appear to be from this educational.

The Thought

The idea that for this design shouldn’t be too arduous to seize. We begin with a piece that has a gradient background.

Then we create a row this is situated (absolute) in order that it utterly covers the phase (like an overlay). We will upload a background trend to the row.

Then we will upload a background masks to the column.

Then we upload scroll results to the row and column (like scale and rotation) which is able to animate the trend and masks one by one inside the phase background.

After we cover the overflow of the phase, all we see is the animation contained inside the phase.

Obtain the Format for FREE

To put your fingers at the structure design from this educational, you’re going to first wish to obtain it the usage of the button under. To realize get admission to to the obtain it is important to subscribe to our Divi Day-to-day e mail listing through the usage of the shape under. As a brand new subscriber, you’re going to obtain much more Divi goodness and a unfastened Divi Format pack each and every Monday! If you happen to’re already at the listing, merely input your e mail deal with under and click on obtain. You are going to no longer be “resubscribed” or obtain further emails.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:earlier than { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:earlier than { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@media simplest display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than { border-top-color: #ffffff !essential; border-left-color: clear !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { shade: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 robust { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}

See also  5 Best Printing Plugins for WordPress

Obtain For Unfastened

Sign up for the Divi E-newsletter and we will be able to e mail you a replica of without equal Divi Touchdown Web page Format Pack, plus heaps of alternative superb and unfastened Divi sources, guidelines and tips. Apply alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely kind for your e mail deal with under and click on obtain to get admission to the structure pack.

DOWNLOAD

You’ve got effectively subscribed. Please test your e mail deal with to verify your subscription and get get admission to to unfastened weekly Divi structure packs!

To import the phase structure on your Divi Library, do the next:

1. Navigate to the Divi Library.
2. Click on the Import button on the height of the web page.
3. Within the portability popup, choose the import tab
4. Select the obtain document out of your laptop (be sure you unzip the document first and use the JSON document).
5. Then click on the import button.

As soon as accomplished, the phase structure will likely be to be had within the Divi Builder.

Let’s get to the academic, lets?

What You Want to Get Began

To get began, it is important to do the next:

1. If you happen to haven’t but, install and activate the Divi Theme.
2. Create a brand new web page in WordPress and use the Divi Builder to edit the web page at the entrance finish (visible builder).
3. Select the choice “Construct From Scratch”.
4. Now have a clean canvas to start out designing in Divi!

How one can Animate Background Mask and Patterns on Scroll with Divi

Designing the Phase Background

First, we’re going to bypass making a row and leap proper into enhancing the prevailing default phase within the builder. To ensure that our background design to fill the browser, we wish to upload some vertical top to the phase. A very simple method to do this is so as to add a min-height to the phase.

Open the settings for the phase. Below the design tab, replace the min-height and take out the padding as follows:

• Min Peak: 50vw
• Padding: 0px height, 0px backside

Design a Background Gradient for the Phase

Now we will upload a customized background gradient to the phase. For this gradient, we’re going to upload 3 gradient shade stops which can be spaced out beautiful calmly. We’re going to stay it easy in order that we will be aware of growing our animated backgrounds at the row.

So as to add the primary gradient stops, be sure to have the phase settings open beneath the content material tab. Then choose the gradient tab and click on so as to add a brand new gradient. This may upload two default gradient colours. Upload the next gradient stops with a colour and a place as follows:

• Gradient Forestall #1: #4158d0 (at 0%)
• Gradient Forestall #2: #c850c0 (at 50%)
• Gradient Forestall #3: #ffcc70 (at 100%)

Then alternate the linear gradient path:

• Gradient Route: 270deg

Upload Rows to the Phase

Now that our Phase is in position, upload a one-column row to the phase. This row will likely be used for our background masks and trend scroll animation.

Subsequent, reproduction the row you simply created. This 2nd (reproduction) row will likely be used for our content material similar to you could possibly usually. Now you will have one height row for the background scroll animation and one row for normal content material.

Customise the Row

Now that our phase background gradient is able, we will flip our consideration to the row we’re going to use for our background scroll animation. Open the settings for the row. Below the Complicated tab, replace the next:

• Place: Absolute

This may permit the row to sit down above (or overlay) the phase with out taking over any exact house within the report. Now, all we wish to do is replace the peak and width in order that it spans the total width and top of the phase. This may create the overlay we’d like and our 2nd layer of background design.

Below the design tab, replace the sizing choices as follows:

• Equalize Column Heights: YES
• Width: 100%
• Max Width: 100%
• Peak: 100%
• Padding: 0px height, 0px backside

Now you would possibly not have the ability to see the row, however it’s now completely covering all of the phase background.

Create a Background Trend for the Row

On this instance, we’re going to upload the Confetti trend because the row background.

Open the settings for the row. Below background choice, choose the patterns tab and replace the next:

• Background Trend: Confetti
• Trend Colour: #f6bef7
• Trend Dimension: Customized Dimension
• Trend Width: 35vw
• Trend Repeate Starting place: Middle

NOTE: The usage of the VW period unit will ensure the trend will scale with the browser, preserving the design constant and responsive.

Upload Scroll Results to the Row

Now that our background trend is in position, we will upload scroll results to the row.

Cross to the Complicated tab. Below the scroll results choices, replace the next:

Make a selection the Horizontal Movement tab and replace the next:

• Allow Horizontal Movement: YES
• Beginning Offset: 0.5 (at 0%)
• Mid Offset: 0 (from 40% to 60%)
• Finishing Offset: -0.5 (at 100%)

This may transfer the row background trend ranging from 50px to the left and finishing at 50px to the precise.

Make a selection the Scale Up and Down tab and replace the next:

• Allow Scaling Up and Down: YES
• Beginning Scale: 150% (at 0%)
• Mid Scalel: 100% (from 40% to 60%)
• Finishing Scale: 150% (at 100%)

This may scale the row background trend from 150% to 100% to 150% on scroll.

Make a selection the Rotating tab and replace the next:

• Allow Rotating: YES
• Beginning Rotation: 10 deg (at 0%)
• Mid Rotation: 0 deg (from 40% to 60%)
• Finishing Rotation: -10 deg (at 100%)

KEY TIP: It would be best to stay the rotation to a minimal otherwise you possibility appearing gaps the place the row doesn’t prolong past the phase. A excellent rule of thumb is to extend the size if you’re going to build up the rotation. This may permit the row to rotate above the phase with out exposing any edges.

Upload a Background Masks with Scoll Results to the Column

With our row completed, we’re able so as to add a background masks with scroll results to the column inside of the similar row. To begin, let’s upload a background masks.

To try this, open the surroundings for the column. Below the mask tab, replace the next:

• Masks: Layer Weblog
• Masks Colour: #ffffff
• Masks Turn out to be: Horizontal Turn, Invert

Upload Scroll Results to the Column

Now that our background masks is in position, we will upload scroll results to the column. Remember the fact that the column already has scroll results inherited from the father or mother row. All we’re going to do is rotate the column in the wrong way of the row to get extra of a separation of masks and trend on the period of the scroll animation.

Cross to the Complicated tab. Below the scroll results choices, choose the Rotating tab and replace the next:

• Allow Rotating: YES
• Beginning Rotation: -15 deg (at 0%)
• Mid Rotation: 0 deg (from 40% to 60%)
• Finishing Rotation: 15 deg (at 100%)

Conceal the Overflow of the Phase

Lately, the row will stay visual on every occasion the scroll animation reasons it to increase past the phase.

To scrub this up, we wish to cover the overflow of the phase. To try this, open the settings of the phase. Below the Complicated tab, replace the visibility choices as follows:

• Horizontal Overflow: Hidden
• Vertical Overflow: Hidden

Now that appears higher.

Including Content material to the Content material Row

At this level, the background masks and trend scroll animation is entire. All we wish to do is upload any content material we need to the row we created previous for content material.

For this case, I’ve added a ridicule headline so we will see what the background animation will appear to be with some static textual content.

You’ll obtain the structure from the academic above if you wish to have to try the settings used for the row and textual content module.

Ultimate Consequence

Let’s check out the general results of our design.

Alternate it Up!

For a distinct glance, you’ll check out other mask and patterns on each and every layer. If you wish to have extra inspiration for how you can use background masks and patterns, take a look at those 12 background mask and pattern designs free for download.

The Gradient Builder can simply create some superb gradient backgrounds for the phase as neatly. You’ll take a look at our live demos of extra background gradient design probabilities.

Ultimate Ideas

It’s superb how simple it’s to create such stunning background designs with Divi’s background choices. And, including scroll animation with Divi’s scroll results brings new lifestyles to these designs.

For extra, you’ll take a look at our an identical educational on how to add two layers of background designs.

Additionally, take a look at our characteristic unencumber posts on the gradient builder and background masks and patterns.

You might also to find it useful to grasp how to use masks and patterns to design a hero section.

I stay up for listening to from you within the feedback.

Cheers!

.inline-code{padding: 0px 4px; shade: pink; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!essential} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);show:block;margin: 0 auto;}

The publish How to Animate Background Masks and Patterns on Scroll with Divi gave the impression first on Elegant Themes Blog.

read more