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.

➠ snowfall : Simule des chutes de neige ou autres ...

Cliquer pour lire la documentation

suite description
syntaxe {up snowfall=image}
author LOMART version 1.0 license GNU/GPLv3 credit Script JQuery-Snowfall de loktar00
  • snowfall=snow-01.png: image ou dossier
  • nb=20: cible pour 2e snowfall
  • size=20/40: cible pour 2e snowfall
  • speed=1/5: cible pour 2e snowfall
  • selector=body: cible pour 2e snowfall
  • center: style et classe pour centrage vertical du contenu entre shortcodes
  • z-index=99: z-index des images
  • class: classe(s) pour bloc
  • style: style inline pour bloc

    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.

    SUPER C'EST NOEL

    {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}
    

    ARGHH C'EST HALLOWEEN

    {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.

    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.

    non spécifié
    20 par défaut
    nb=4
    nb=18
    nb=36

    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
    non spécifié
    10/40 par défaut
    size=5/10
    size=5/50
    size=32/64

    speed

    Indiquez la vitesse minimale et maximale d'une image sous la forme mini/maxi. exemple : speed=10/40
    non spécifié
    1/5 par défaut
    speed=1/2
    speed=1/10
    speed=5/10

    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 !

    Démonstration de l'option selector

    {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
    }
    

    Pour l'exemple, nous voulons peu de gros Pères Noël lents avec beaucoup de paquets rapides

    Le premier shortcode avec le contenu texte définit son id. Il est préférable de la forcer, car l'id fourni par UP peut changer en cas d'ajout ou de suppression d'actions UP dans la page. Les autres options sont le "peu de gros Père Noël lent" et l'habillage du bloc et du texte.

    Le second shortcode indique par l'option selector sa relation avec le premier shortcode. Ne pas oublier le # devant, puisque l'on cible un ID. Il nous reste à mettre beaucoup de paquets rapides.

    Et voilà !!!

    Astuce : limiter automatiquement la période

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

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

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

    A partir de la version 1.5 de UP, l'option period de l'action filter accepte comme argument des périodes récurrentes.
    Il suffit de ne pas préciser l'année, elle sera remplacée par l'année en cours. Dans notre exemple, en 2018, 1224 est compris comme 201812240000. Si non précisée, l'heure est mise à zéro. 010310 est compris comme le 3 janvier suivant le 24 décembre, soit en 2018 : 201901031000.