Une pluie d'images pour votre site

Je vous propose un script qui permet de faire pleuvoir une image répétée en plusieurs exemplaires sur votre site, et ce à plusieurs fins : marquer graphiquement un événement (Halloween, l'arrivée du printemps, les fêtes de Noël, etc... ) ou signaler une occasion spéciale sur votre site (les soldes, une promotion dans la boutique, une nouveauté... ) Le script s'installe facilement, d'autant que je l'ai assorti d'une galerie d'images prêtes à être utilisées, et il se personnalise aisément : vous pouvez d'ailleurs choisir votre propre image à faire pleuvoir.

Démonstration

Vous en avez une sur cette page : une pluie d'étoiles rouges !

Flèche vers le haut

Recommandations

Prenez le temps de lire ce quelques recommandations liminaires.

Ne gênez pas vos visiteurs !

Ce script peut gêner la navigation des visiteurs si vous ne faites pas attention à quelques points :

  • Ne chargez pas la page avec un déluge d'images ! Une mini-averse suffit amplement à attirer l'oeil de vos visiteurs et à marquer le coup.
  • N'utilisez pas d'images trop massives ou encombrantes : plus elles sont petites et discrètes, mieux c'est.
  • Réglez le "timing" du script afin que l'averse ne dure que quelques secondes. Vos visiteurs ont le temps de la voir, de l'apprécier et le plaisir de la voir disparaître ;)

N'abusez pas !

Ce script peut être agaçant à long terme. Ne le laissez pas tourner trop longtemps sur votre site sous peine de lasser les utilisateurs. Utilisez-le ponctuellement pour marquer un événement ou une occasion spéciale. Installez-le pour une journée, quelques jours tout au plus, puis enlevez-le.

Flèche vers le haut

Mode d'emploi

Il vous suffit de copier-coller le code donné après l'avoir configuré. Selon l'effet que vous cherchez à obtenir, l'insertion se fait à un endroit différent.

Faire pleuvoir sur toutes les pages

Pour que l'image pleuve sur tout le site, copiez-collez le code paramétré dans la fenêtre de saisie qui apparaît quand on clique, en mode admin, sur Paramètres > Modifier le Head :

Pour valider vos changements, n'oubliez pas de cliquer sur le bouton 

Faire pleuvoir sur une page en particulier

Si vous voulez qu'il ne pleuve que sur une page précise, copiez-collez le code paramétré dans la fenêtre de saisie qui apparaît quand on ajoute un élément Widget/HTML. Placez ce widget dans le contenant principal de votre page (c'est-à-dire pas dans la colonne latérale de navigation, ni dans le footer) et tout en haut de la page, en premier.

Ajouter un widget/HTML dans Jimdo

Cliquez sur le bouton  pour valider l'installation du script.

Quand vous allez cliquez sur le bouton d'enregistrement du Widget/HTML, votre image va pleuvoir, mais votre page derrière va devenir blanche. Pas de panique ! Rechargez la page et tout rentre dans l'ordre :)
Flèche vers le haut

Une pluie d'image configurable

Avec ce code, vous faites pleuvoir une image de votre choix sur votre site :

Feuilles qui tombent sur Jimdo

Code à copier-coller

Voir le code

Configurer le script

Le script est configurable au début du code à travers 4 paramètres :

  • var image="http://" : écrivez le chemin de l'image à faire pleuvoir. Je vous en propose une trentaine prêtes à l'emploi dans la galerie, mais vous pouvez utiliser n'importe quelle image.
  • var no = 5 : indiquez le nombre d'images à afficher simultanément sur la page. Allez-y mollo pour ne pas gêner la navigation de vos visiteurs ! Si l'image est très petite (moins de 15px), vous pouvez en mettre jusqu'à 15. Si l'image est assez grande, restez dans une fourchette de 5 à 10. Si l'image est plus grande, pas plus de 5 images sur la page.
  • var time = 0 : si vous laissez à zéro, les objets tombent perpétuellement sur la page. Pour éviter de lasser vos visiteurs, vous pouvez limiter le temps pendant lequel les objets tombent à quelques secondes.
  • var speed = 30 : indiquez la vitesse à laquelle les objets doivent pleuvoir. Plus la valeur est petite, plus la vitesse est grande.
Flèche vers le haut

Variante : une pluie d'images associées à un lien

Avec ce code, vous faites aussi pleuvoir une image de votre choix sur votre site, mais cette fois, chaque image est associée à un lien qui pointe vers une page de votre site ou un site externe. Cette variante peut être utile si vous annoncez une promotion : ajoutez alors un lien vers l'article en soldes.

Pluie d'images cliquables sur Jimdo

Code à copier-coller

Voir le code

Configurer le script

Le script est configurable au début du code à travers 5 paramètres :

  • var image="http://" : écrivez le chemin de l'image à faire pleuvoir. Je vous en propose une trentaine prêtes à l'emploi dans la galerie, mais vous pouvez choisir n'importe quelle image.
  • var pagelink ="http://" : écrivez le lien vers lequel pointent les images qui pleuvent. Ce lien peut-être interne (une page de votre site) ou externe (un autre site).
  • var no = 5 : indiquez le nombre d'images à afficher simultanément sur la page. Allez-y mollo pour ne pas gêner la navigation de vos visiteurs ! Si l'image est très petite (moins de 15px), vous pouvez en mettre jusqu'à 15. Si l'image est assez grande, restez dans une fourchette de 5 à 10. Si l'image est plus grande, pas plus de 5 images sur la page.
  • var time = 3 : si vous laissez à zéro, les objets tombent perpétuellement sur la page. Pour éviter de lasser vos visiteurs ou de les gêner dans leur navigation (dans la mesure où les images sont cliquables), vous avez intérêt limiter le temps pendant lequel les objets tombent à quelques secondes.
  • var speed = 30indiquez la vitesse à laquelle les objets doivent pleuvoir. Plus la valeur est petite, plus la vitesse est grande.
Flèche vers le haut

Suggestions d'objets à faire pleuvoir

Voici une galerie d'images prêtes à l'emploi. Ecrivez l'adresse URL associée à l'image dans le code sur la ligne var image="http://". Vous pouvez aussi utiliser votre propre image, mais veillez à ce qu'elle soit transparente et de préférence au format .png.

Promotions et soldes

Offre spéciale

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-offre-speciale.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-promo-bleu.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-promo-green.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-promo-orange.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-reduc-20.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-reduc-50.png

Etoiles

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-yellow-star-2.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-black-star.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-blue-star.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-red-star.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-yellow-star.png

Eléments festifs

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-birthday-cupcake.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-blue-balloon.png

Saint-Valentin

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-red-white-heart.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-black-heart.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-grey-heart.png

Noël

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-present.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-pink-candy.png

Halloween

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-orange-pacman-ghost.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-pink-pacman-ghost.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-transparent-ghost.png

Saisons : printemps / été

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-transblack-bird.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-pink-butterfly.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-violet-butterfly.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-mauve-butterfly.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-red-flower.png

Saisons : automne / hiver

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-cloud.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-green-leaf-2.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-green-leaf.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-feather.png

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-yellow-feather.png

Fête de la musique

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-black-musicnote.png

Divers

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-green-invader.gif

Let it rain, people ! ;)

Un souci ? Une question ?

Écrire commentaire

Commentaires : 2
  • #1

    demoiselleslibellules (dimanche, 17 mars 2013 19:20)

    Merci pour ces techniques !! Ca me paraît un peu compliqué mais je vais essayer à tête reposée ....
    A très vite et bravo !!

  • #2

    demoiselleslibellules (lundi, 18 mars 2013 20:45)

    Je n'arrive pas à faire la manipulation ! ca ne marche pas !!
    Sûrement que je n'aies pas tout compris ....
    Dommage
    Merci quand même
    Nadine

Ruban