Emmanuel GautierEmmanuel Gautier

Enneiger votre site avec JavaScript

Dec 26, 2013

Vous l'avez sans doute vu sur certains sites que vous visitez, la période est à la neige (ça ne se voit pas en France en tout cas ^^) ! Je vous présente donc quelques script pour mettre une animation de neige sur votre site et ainsi émerveiller vos visiteurs.

Snowstorm

Voici un script plutôt bien foutu trouvé sur github : https://github.com/scottschiller/snowstorm/ . Pour l'utiliser, il vous suffit d'intégrer le fichier JS dans l'entête de votre page HTML. L'animation se déclenchera toute seule et prendra toute votre page.

Démonstration Snowstorm

HTML5Rock

Un autre script trouvé cette fois dans le code du site HTML5Rock. Vous pouvez trouver ce code à la ligne 652 de la page d'accueil actuellement. En voici le code ci-dessous :

;(function () {
  'use strict'

  var COUNT = 300
  var masthead = document.querySelector('.masthead')
  var canvas = document.createElement('canvas')
  var ctx = canvas.getContext('2d')
  var width = masthead.clientWidth
  var height = masthead.clientHeight
  var i = 0
  var active = false

  function onResize() {
    width = masthead.clientWidth
    height = masthead.clientHeight
    canvas.width = width
    canvas.height = height
    ctx.fillStyle = '#FFF'

    var wasActive = active
    active = width > 600

    if (!wasActive && active) requestAnimFrame(update)
  }

  var Snowflake = function () {
    this.x = 0
    this.y = 0
    this.vy = 0
    this.vx = 0
    this.r = 0

    this.reset()
  }

  Snowflake.prototype.reset = function () {
    this.x = Math.random() * width
    this.y = Math.random() * -height
    this.vy = 1 + Math.random() * 3
    this.vx = 0.5 - Math.random()
    this.r = 1 + Math.random() * 2
    this.o = 0.5 + Math.random() * 0.5
  }

  canvas.style.position = 'absolute'
  canvas.style.left = canvas.style.top = '0'

  var snowflakes = [],
    snowflake
  for (i = 0; i < COUNT; i++) {
    snowflake = new Snowflake()
    snowflakes.push(snowflake)
  }

  function update() {
    ctx.clearRect(0, 0, width, height)

    if (!active) return

    for (i = 0; i < COUNT; i++) {
      snowflake = snowflakes[i]
      snowflake.y += snowflake.vy
      snowflake.x += snowflake.vx

      ctx.globalAlpha = snowflake.o
      ctx.beginPath()
      ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false)
      ctx.closePath()
      ctx.fill()

      if (snowflake.y > height) {
        snowflake.reset()
      }
    }

    requestAnimFrame(update)
  }

  // shim layer with setTimeout fallback
  window.requestAnimFrame = (function () {
    return (
      window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      function (callback) {
        window.setTimeout(callback, 1000 / 60)
      }
    )
  })()

  onResize()
  window.addEventListener('resize', onResize, false)

  masthead.appendChild(canvas)
})()

HTML5Rock

javascript