snowfall ~ chute de neige

Afficher selon certaines conditions : date, utilisateur, langage, mobile ...

Cette action est réalisée à l'aide du script (légerement modifié) JQuery-Snowfall de loktar00.

Quoi de mieux pour les grands événements, que d'ajouter une animation à la page.
Par exemple, en fin d'année une chute de neige est du plus bel effet.

Les flocons qui tombent sur le fond de cette page sont affichés par ce très simple shortcode :

{up snowfall}

Utiliser d'autres images

L'argument de l'option principale snowfall peut contenir :

• une image : si le chemin n'est pas indiqué, elle sera cherchée dans le dossier img de l'action
• un dossier : toutes les images PNG de ce dossier seront utilisées.

Plusieurs images ou dossiers peuvent être indiqués en les séparant par des points-virgules.
exemple : snowfall=snow-04.png; images/icon-noel; images/icons/test.png

Les images disponibles dans le dossier /plugins/content/up/actions/snowfall/img sont :

snow-01.png

snow-01r.png

snow-02.png

snow-02r.png

snow-03.png

snow-03r.png

snow-04.png

snow-04r.png

Pour vos images, utilisez des images PNG sur fond transparent de 64x64px. C'est un bon compromis entre souplesse et taille du fichier

Emplacement des chutes

Sans indication, les images occupent la totalité de la fenêtre du navigateur. Si du contenu est spécifié entre le shortcode ouvrant et fermant, les chutes seront limitées à ce bloc.

{up snowfall=images/actions-demo/snowfall/noel 
  | size=10/40 
  | Speed=1/2 
  | nb=2 
  | class= minh200 bd-blanc bg-rougeFonce 
  | center=fs400 t-blanc b tc
}
<p>SUPER C'EST NOEL</p>
{/up snowfall}

{up snowfall=images/actions-demo/snowfall/halloween 
  | size=20/64 
  | Speed=1/2 
  | nb=2 
  | class= minh200 bd-blanc bg-grisFonce 
  | center=fs400 t-blanc b tc
}
<p>ARGHH C'EST HALLOWEEN</p>
{/up snowfall}

Les icônes utilisées pour la démonstration sont téléchargeables ci-dessous.

• icones-halloween.zip 33.65 ko

• icones-noel.zip 42.74 ko

Les autres options

nb

il s'agit du nombre d'images identiques affichées en même temps dans une zone de 1200px de large. Si le bloc fait 600px, ce nombre sera divisé par 2. Cela permet de réduire la quantité 'alléger l'affichage sur les petits écrans. C'est une adaptation du script d'origine par UP.

Dans l'exemple ci-dessus, il est normal que le nombre d'images soit inférieur à la valeur demandée, car il est proportionné à la largeur du bloc

size

Indiquez la taille minimale et maximale d'une image sous la forme mini/maxi. exemple : size=10/40

speed

Indiquez la vitesse minimale et maximale d'une image sous la forme mini/maxi. exemple : speed=10/40

selector

Cette option permet d'indiquer le sélecteur CSS du bloc dans lequel simuler les chutes d'images. Ce bloc doit être en position absolute avec un parent en position relative. Sauf le construire expressément, il est peu probable que vous l'utilisiez ainsi. Elle prend tout son sens pour mettre des options différentes au images d'un même bloc.

Une petite démonstration pour comprendre !

{up snowfall=images/actions-demo/snowfall/noel/pere-noel.png
  | id=anim-noel
  | size=40/64
  | speed=1/2 
  | nb=2 
  | class= minh200 bd-blanc bg-rougeFonce
  | center=fs400 t-blanc b tc
}
<p>Démonstration de l'option selector</p>
{/up snowfall}

{up snowfall=images/actions-demo/snowfall/noel/paquet.png
  | selector=#anim-noel
  | size=10/20
  | speed=3/6
  | nb=20
}

Astuce : limiter automatiquement la période

Si vous avez peur d'oublier de mettre ou de retirer l'animation, vous pouvez utiliser l'option filter comme ceci :

{up snowfall | filter=period:1224,010310}

L'action snowfall sera exécutée tous les ans du 24 décembre au 3 janvier à 10h.

ATTENTION : il ne faut pas inclure l'action snowfall dans une action filter. En plus d'un beau message indiquant que l'action filter n'a pas de contenu, le filtre serait inopérant.