Fabrizio Van Marciano

available for hire

How to add Snowfalling Effect using custom CSS in Oxygen Builder


In this tutorial, we will have fun creating a cool snowfalling effect for your WordPress site, using some custom CSS inside Oxygen Builder. Let’s dive right in.

Oxygen Builder on its own is a fantastic website-building tool. Combine it with something like WPCodeBox and ACSS, and you have all the tools you need to smash out amazing websites.

Oxygen comes with a stylesheet manager, however, you’re limited in what you can do. WPCodeBox is a code snippet plugin that allows you to create custom stylesheets, but moreover, it will compile SCSS for you, which is what we’ll need to create this snowfall effect.

Check out the short video below for an example –

OK, so before you start, ensure you have the WPCodeBox plugin installed and activated, and you have created a code snippet for executing SCSS. If you don’t have this plugin installed, get a copy here.

Important: Please also back up your website should anything go wrong. If you choose to use the code snippets below without backing up, please do so at your own risk.

Step one: Add the following HTML snippet

From inside of the Oxygen editor. Drop a Code Block element at the top of your page. For example, if you want to add this to your homepage, it should be inside at the very top of your first page section (hero section).

Next, click on the PHP & HTML tab in your code block element, and paste the following HTML code:

<!-- You will need to add a total of 200 lines of the code below -->

<div class="letitsnow"></div>
<div class="letitsnow"></div>

Important: You will need to add 200 lines of the code above. Each div class represents a single snowflake falling.

Be sure to save the changes you make in the code snippet, then exit the admin area and navigate to WPCodeBox.

Step two: Copy and paste the CSS code snippet

The next step is to copy and paste the following CSS code snippet into your WPCodeBox stylesheet.

@function random_range($min, $max) {
  $rand: random();
  $random_range: $min + floor($rand * (($max - $min) + 1));
  @return $random_range;
}

.letitsnow {
  $total: 200;
  position: absolute;
  top: -50px;
  left: 0;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;

  @for $i from 1 through $total {
    $random-x: random(1000000) * 0.0001vw;
    $random-offset: random_range(-100000, 100000) * 0.0001vw;
    $random-x-end: $random-x + $random-offset;
    $random-x-end-yoyo: $random-x + ($random-offset / 2);
    $random-yoyo-time: random_range(30000, 80000) / 100000;
    $random-yoyo-y: $random-yoyo-time * 100vh;
    $random-scale: random(10000) * 0.0001;
    $fall-duration: random_range(10, 30) * 1s;
    $fall-delay: random(30) * -1s;

    &:nth-child(#{$i}) {
      opacity: random(10000) * 0.0001;
      transform: translate($random-x, -10px) scale($random-scale);
      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
    }

    @keyframes fall-#{$i} {
      #{percentage($random-yoyo-time)} {
        transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
      }

      to {
        transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
      }
    }
  }
}

Containing the snow falling in the viewport

You may find after saving and previewing the effect on the front end, that the snow effect is carried off the viewport and creates a white space on the right-hand side of the screen. To fix this problem, you will need to do the following –

Navigate back to the Oxygen Builder editor and for the section where you have the HTML code block added, you need to navigate to Advanced > Layout, and under the Overflow option, you’ll need to select Hidden. This is for the section, not the code block.

Save your changes and preview again.

Did this code work for you? I’d love to get your feedback. Or if you need assistance implementing a code into your website, get in touch with me.

Get access to my courses and expert tutorials!

Everything you need to design your website with WordPress, Oxygen, Bricks Builder, Bricks Builder, plus over 100 video tutorials, code snippets, templates, Discord Community, and more.

Join Van Marciano Pro

FREE WEB DESIGN LESSON

SIGNUP FOR MY FREE 40-MINUTE OXYGEN BUILDER COURSE TASTER