Snow Fall Effect

It provides a realistic snowfall effect to your site to make your websites look more aesthetic during the winter months.

Demo: https://www.iksirsi.com/

Installation

Vue

import SnowFall from "snow-fall-effect"
export default {
  data() {
    return {
      msg: 'foo'
    }
  }
  mounted() {
    const snowFall = new SnowFall();
    snowFall.init();
  }
}

Nuxt

snow-fall.plugin.js

import SnowFall from "snow-fall-effect";

export default ({ app }, inject) => {
  inject(
    "snowFall",
    (() => {
      const snowFall = new SnowFall({
        color: "#82deed",
        density: 1,
        sizeRange: [5, 25],
      });
      return snowFall;
    })()
  );
};

nuxt.config.js

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [{ src: '~/plugins/snow-fall.plugin.js', mode: 'client' }],

layout.vue

export default {
  name: "layout.vue",
  data() {
    return {
    }
  }
  mounted() {
    this.$snowFall.init();
  },
  destroyed() {
    // For performance
    this.$snowFall.stopTheSnowing()
  },
}

React

import { useEffect } from "react";
import SnowFall from "snow-fall-effect";
function App() {
  useEffect(() => {
    const snowFall = new SnowFall();
    snowFall.init();
    return () => {
      snowFall.stopTheSnowing()
    };
  }, []);
  return <div className="App"></div>;
}

export default App;

HTML File

Imports into html are not supported. :(

Configuration

Types

{
  sizeRange: [number, number],
  color: string,
  speed: number,
  density: number;
}

new SnowFall({
  sizeRange: [10, 20], // default (min 0)
  color: "#fff", // default
  speed: 10, // default (second)
  density: 0.5; // default (recomended)
});

Declare

SnowFall {
    config: ConfigType;
    interval: ReturnType<typeof setInterval>;
    constructor(_config: ConfigType);
    get cordinate(): {
        left: number;
        top: number;
    };
    get width(): number;
    get icon(): string;
    get globalStyle(): string;
    injectGlobalCSS: () => void;
    get styles(): {
        svg: string;
        subContainer: string;
    };
    createContainer: () => void;
    get container(): HTMLDivElement;
    remove: (id: string) => void;
    createSubContainer: () => HTMLElement;
    createSnow: () => void;
    snowingInterval: () => void;
    makeItSnow: () => void;
    init: () => void;
    clear: () => void;
    stopTheSnowing: () => void;
}

Coded by ahmetilhan