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! 🎶
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:
Video Tutorial
Table of Contents
Difficulty
Easy
Time
What is Particle JS?
You can learn more about Particle JS and play around with its many settings by clicking the button below.
Setting It Up
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 Settings > Advanced Tab
CSS ID & Classes
CSS ID > de-snow-effect
Position
Position > Fixed
Location > Top-Center
Vertical Offset > -75px
Z-Index > 1000
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
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!
I can not click on anything after adding this effect to the page.
Thanks:.)