In this special winter tutorial, you will learn how to create a snow effect in WordPress.

Best Snow Effect for WordPress without plugins

Create Snow Effect in WordPress without plugins

Before we start, note that the snow effect will not be seen on pages with a white background, and you should use it on pages with a colored background.

Step 1.Add The Following Code to the functions.php File

In the WordPress dashboard, go to Appearance ➡ Theme File Editor and copy the following code into the theme’s functions.php file and save it.

You must create a child theme before making any changes to functions.php file. Otherwise, the applied changes will be lost after each update.
Create child theme in WordPress step by step [without plugin]

As an alternative method, you can use the Code Snippets plugin to insert your codes into WordPress.

add_action( 'wp_footer', function () { if (!is_admin()) { ?>

<style>
canvas#canvas{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  pointer-events: none;
  width: 100%;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function(){
setTimeout(function() {
var canv = `<canvas id="canvas"></canvas>`;
document.body.insertAdjacentHTML("beforeend", canv);    
var body = document.body,
htmlElement = document.documentElement;
var height = body.offsetHeight ;
document.querySelector("#canvas").style.height = height + "px"
function startAnimation() {
  const CANVAS_WIDTH = window.innerWidth;
  const CANVAS_HEIGHT = height;
  const MIN = 0;
  const MAX = CANVAS_WIDTH;
  const canvas = document.querySelector("#canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;
  function clamp(number, min = MIN, max = MAX) {
    return Math.max(min, Math.min(number, max));
  }
  function random(factor = 1) {
    return Math.random() * factor;
  }
  function degreeToRadian(deg) {
    return deg * (Math.PI / 180);
  }
  class Circle {
    radius = 0;
    x = 0;
    y = 0;
    vx = 0;
    vy = 0;
    constructor(ctx) {
      this.ctx = ctx;
      this.reset();
    }
    draw() {
      this.ctx.beginPath();
      this.ctx.fillStyle = "rgba(255,255,255,0.8)";
      this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
      this.ctx.fill();
      this.ctx.closePath();
    }
    reset() {
      this.radius = random(2.5);
      this.x = random(CANVAS_WIDTH);
      this.y = this.y ? 0 : random(CANVAS_HEIGHT);
      this.vx = clamp((Math.random() - 0.5) * 0.4, -0.4, 0.4);
      this.vy = clamp(random(1.5), 0.1, 0.8) * this.radius * 0.5;
    }
  }
  let circles = [];
  for (let i = 0; i < 300; i++) {
    circles.push(new Circle(ctx));
  }
  function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }
  let canvasOffset = {
    x0: ctx.canvas.offsetLeft,
    y0: ctx.canvas.offsetTop,
    x1: ctx.canvas.offsetLeft + ctx.canvas.width,
    y1: ctx.canvas.offsetTop + ctx.canvas.height
  };
  function animate() {
    clearCanvas();
    circles.forEach((e) => {
      if (
        e.x <= canvasOffset.x0 ||
        e.x >= canvasOffset.x1 ||
        e.y <= canvasOffset.y0 ||
        e.y >= canvasOffset.y1
      ) {
        e.reset();
      }
      e.x = e.x + e.vx;
      e.y = e.y + e.vy;
      e.draw();
    });
    requestAnimationFrame(animate);
  }
  animate();
}
startAnimation();
window.addEventListener("resize", startAnimation);
}, 500);	
});
</script>

<?php } });

Done! You will now see the snow effect on all your pages.

Step 2.Show snow effect on certain pages

To display the snow effect on certain pages, it is enough to use the conditional tags of WordPress.
For example, to display the snow effect on pages with ID 4 and 5, it is enough to replace the first line of the code with the following code:

add_action('wp_footer', function () { if (!is_admin() && is_page([4, 5]) ) { ?>

If this article is difficult for you to read in text, you can watch the video version below.

Share this post
Maya
Maya

Hi, my name is Maya and I’m a WordPress plugin developer. I created this website to share some of the helpful codes that I’ve used in my own projects.
If you’re looking for a custom plugin for your website, you can contact me by clicking on Hire a developer in the menu. I’d love to hear from you.

Articles: 56

Leave a Reply

Your email address will not be published. Required fields are marked *