DEV Community

Ahmet İlhan
Ahmet İlhan

Posted on

3 1

Website Snowfall Effect

https://github.com/ahmetilhan24/snow-fall-effect

Snow Fall Effect

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

Insatalation

HTML File
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--import inside head tag-->
    <script src="../dist/index.js" type="module"></script>
  </head>
  <body>
    <!--Call it snowfall here too.-->
    <script type="module" defer>
      import SnowFall from "../dist/index.js";
      new SnowFall();
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
Vue
import SnowFall from "snow-fall"
export default {
  data() {
    return {
      msg: 'foo'
    }
  }
  mounted() {
    new SnowFall();
  }
}
Enter fullscreen mode Exit fullscreen mode

Configuration

Types
{
  sizeRange: [number, number],
  color: string,
  speed: number,
}
Enter fullscreen mode Exit fullscreen mode
new SnowFall({
  sizeRange: [10, 20], // default (min 0)
  color: "#fff", // default
  speed: 10, // default (second)
});
Enter fullscreen mode Exit fullscreen mode

Coded by ahmetilhan

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more