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

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

Top comments (0)

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay