Let it Snow!

We are only a few short sleeps away from all the good that Christmas brings. Good food, gifts, and family…but wait! Christmas is hardly Christmas without some snowy landscapes! Now I know not all of you are used to a “White Christmas”, neither am I, but with today’s tutorial, we bring the snowy weather to you with Divi and Particle JS.

Like Ol’ Blue Eyes used to say, 🎢 Let it snow, let it snow, let it snow! 🎢

In this super simple tutorial, we will use the power of Particle JS in combination with some of the relatively new Divi positioning features to make it snow. Adding a little holiday cheer to your site is the perfect way to greet visitors over this Holiday period, it is also one of the only times snow is fun outside of bombing down slopes. Those of you that live in a city with snowy winters will know the joys of sleet, dirt slushies, and scraping ice off your windshield at 6 in the morning.
 
We will stick to the more charming version today, so strap in as we walk you through Adding a Festive Snow Effect with Divi and Particle JS.

Preview:

Divi Snow Effect with Particle.JS

Video Tutorial

Table of Contents

Difficulty

Easy

Time

10 Minutes
Add a Festive Snow Effect to Your Divi Site with ParticleJS

What is Particle JS?

What is particle.js?
Particle JS is the go-to JavaScript library for simple to complex particle effects on websites. It is extremely lightweight so it does not slow sites down too much and it is highly customizable. The library has been used to death in tech company and crypto-project headers with the linking polygon effect, so we will try a different take as we use it in our Divi project.
 
You can learn more about Particle JS and play around with its many settings by clicking the button below.

Setting It Up

To add our snow effect using Divi and Particle JS we will basically be creating a Divi section that is the full size of our browser window, then overlay it on the content that is on the page. Sound complicated? Trust me, it isn’t, and you’ll see how Divi makes this extremely easy to do.
 
You can add this effect to any page in your Divi install, all you need to do is scroll to the bottom of that page and follow the steps below.

Add Section and Code Module

Add a New Section > Add a New Single Column Row > Add a Code Module

Section Settings

Background ColorΒ > Transparent

Sizing

Width > 100%
Height > 100%

Spacing

Margin Top/Bottom > 0px
Padding Top/Bottom > 0px

Section Sizing Settings
Section Spacing Settings

Section Settings > Advanced Tab

CSS ID & Classes

CSS ID > de-snow-effect

Position

Position > Fixed
Location > Top-Center
Vertical Offset > -75px
Z-Index > 1000

Divi Section CSS ID
Divi Section Position Settings

Adding the Code

Ok, the bones are there and we are ready to add the code that will bring this Divi and Particle JS effect come to life. We’ve talked quite a bit in our tutorials about when and where you might want to add code as it can impact the performance of your site quite a bit. Luckily for us, Particle JS is a very lightweight library, so we will only recap two spots.

Code Module

You’ll add code here if it is only used on one specific page. In this tutorial we only want to have the snow effect on the landing page, so we will use this method.

Divi Theme Options

You’d want to use this method if you are going to use the code for the effect on multiple pages. That way the code is loaded only once and not multiple times for each page throughout the site.

With that covered, let’s copy and paste the code below into the Code Module. Make sure to place this code between opening and closing <script> tags.

Code Module > Code

The Details

If you’ve previewed and tested this, you might have noticed that something is a little off. Hover effects are gone and links are no longer working. No need to panic, this is because of something super simple, so let’s take a look at what we did.

We created a new section and we positioned it right over the active viewport in a fixed position. This means that as the user interacts (or not in this case) it is interacting with this new section we added that is overlayed on top of our content. This prevents them from interacting with elements like buttons or other links below it. Whoops!

The fix is easy and only takes one line of code. We need to tell the browser to ignore this overlayed section when the user is interacting with the page.

Let’s take a look at the code below and add it to the section we set up earlier.

Section > Advanced > Custom CSS > Main Element

That’s it! From ZERO to SNOW-CEPTION in 10 minutes…

Conclusion

Well done team! You nailed yet another awesome skill-building tutorial on how to Add a Festive Snow Effect to Your Divi Site with Particle JS. Now, while we think effects like this are awesome, please for the love of UX, use it sparingly when and where it makes sense. We hope you found this helpful and would love to hear from you in the comments below.

Definitely head to our Youtube Channel and subscribe to make sure you don’t miss a single thing because this is going to be valuable for you and your design agency!

Catch you folks next week!