Enneiger votre site avec JavaScript
Emmanuel Gautier / December 26, 2013
2 min read
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.
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)
})()
Consulting
Si vous recherchez des solutions à un problème ou avez besoin de conseils, je suis là pour vous aider ! N'hésitez pas à réserver un call avec moi pour une session de consulting personnalisée. Discutons de votre situation et trouvons ensemble la meilleure solution à implémenter.
Articles sur le même sujet
Etendre le type Window avec Typescript
Certaine des propriétés et fonctions du type Window avec Typescript, ne sont pas disponibles. Ce post a pour but d'expliquer comme étendre le type Window avec les propriétés manquantes.
Starter Gatsby + Netlify CMS + TailwindCSS
Avec le nombre de sites web generés avec les mêmes outils, j'essaie au maximum de mutualiser l'effort de maintenance de la stack technique commune. Suivant ce principe, je viens de créer un starter qui vient du développement de mes autres sites.
Comment récupérer la chaine de charactères HTML d'un composant React
Dans plusieurs cas, vous pourriez avoir besoin d'avoir la chaine de charactère représentant le HTML généré plutôt que le composant React. Le moyen le plus simple est d'utiliser la fonction renderToString du package react-dom.
Articles mis en avant
Comment activer la vérification de typage pour Python dans VSCode
Python supporte désormais le [type hints](https://docs.python.org/3/library/typing.html). Dans cet article, nous allons voir comment avoir de l'IntelliSense pour le typage ainsi qu'avoir les erreurs de typage sur Visual Studio Code.
Comment gérer l'internationalisation avec NextJS SSG
Générer statiquement un site avec le framework NextJS pour différentes langues n'est pas si simple.
Utilisateurs et privilèges sous MySQL
L'administration d'une base de données inclue la gestion des utilisateurs et de leurs privilèges. La plupart du temps, une interface graphique, telle que MySQL Workbench ou PHPMyAdmin, est disponible pour réaliser de façon simple les actions liées à cette gestion. Dans ce tutoriel, nous allons voir comment réaliser la gestion des utilisateurs MySQL au moyen de requêtes SQL.