Une pluie d'objets à l'arrière-plan de votre site

Je vous propose un script qui va animer l'arrière-plan de votre site en y faisant pleuvoir une image. La navigation des visiteurs n'est pas altérée, puisque les images pleuvent seulement en arrière-plan, contrairement à ce que propose le script de ce tutoriel : pluie d'images sur vos pages.

 

Vous pouvez utiliser ce script pour marquer 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é... ) L'installation est aisée, d'autant que je l'ai assorti d'une galerie d'images prêtes à être utilisées mais vous pouvez choisir votre propre image à faire pleuvoir.

Démonstration

Vous en avez une sur mon site de démonstration. Comme je ne sais pas si je laisserai le script longtemps en place, voici une capture d'écran du résultat :

Les coeurs ne tombent qu'en arrière-plan du site
Les coeurs ne tombent qu'en arrière-plan du site

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

Installation du script dans Jimdo

Où insérer le code ?

 Copiez-collez le code ci-dessous 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 

Le code

Copiez-collez le code en n'oubliant pas de modifier la ligne graphic : 'http://' : notez l'adresse URL de l'image à faire pleuvoir. (Les autres lignes de configuration n'ont pas besoin d'être changées).

<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/3347790973941088/BD_snow.js">
</script>

<script type="text/javascript">
//<![CDATA[

BD_snow.config= {
     graphic: 'http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-black-star.png' // Ecrivez l'adresse de l'image à faire pleuvoir
    ,amplitude: 20 // Ne changez pas cette ligne
    ,interval: 6 // Ne changez pas cette ligne
    ,speed: 50 // Vitesse : plus la valeur est grande, plus les objets tombent lentement
    ,snowontop: false // Les objets pleuvent en arrière-plan seulement
}

//]]>
</script>
Flèche vers le haut

Suggestions d'objets à faire pleuvoir en arrière-plan

Voici une galerie d'images prêtes à l'emploi. Ecrivez l'adresse URL associée à l'image de votre choix sur la ligne graphic: 'http://' du code. Vous pouvez aussi utiliser votre propre image, mais veillez à ce qu'elle soit transparente (de préférence au format .png) et de moins de 48 pixels en largeur et en hauteur. Plus l'image est petite, mieux c'est pour ce script.

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

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-yellow-star-2.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-black-heart.png

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

http://sd-1.archive-host.com/membres/images/3347790973941088/Falling-stuff/falling-red-white-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-mauve-butterfly.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-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.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-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

Je vous écoute

Écrire commentaire

Commentaires : 6
  • #1

    mecabam (samedi, 30 mars 2013 22:30)

    Bonjour,


    Comment fais tu augmenter les encarts lors du survol de la souris

    Ex :
    C'est parti !
    Démonstration
    Installation du script dans Jimdo
    Galerie d'objets à faire pleuvoir
    Merci

  • #2

    Isa (dimanche, 31 mars 2013 16:55)

    Bonjour,

    J'utilise une propriété CSS3 pour créer une classe "sommaire" dans ma CSS :

    .sommaire {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    }

    Puis je colle ce code dans un Widget/HTML :

    <div class="sommaire">Ici mon sommaire</div>

    A bientôt !

    Isa

  • #3

    Isa (dimanche, 31 mars 2013 16:56)

    Zut, j'ai oublié la moitié du code CSS :

    .sommaire:hover {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=2, M12=-0, M21=0, M22=2);
    }

    Désolée pour le double post !

  • #4

    Cécile Chalon-Chevrault (samedi, 25 janvier 2014 16:36)

    Bonjour, merci pour ce sympathique tuto (et pour ce site tout entier d'ailleurs), il m'est d'un grand secours.
    Je souhaite savoir si il est possible de faire en sorte que les objets ne tombent que pendant un certain temps, par exemple, une vingtaine de seconde.
    Merci d'avance pour votre réponse.

    Cécile

  • #5

    Isabelle (jeudi, 06 février 2014 09:31)

    Bonjour Cécile,
    Merci pour votre commentaire fort sympathique !
    Pour répondre à votre question, il devrait être possible d'ajouter une sorte de "timer" dans le script, mais je ne sais pas le faire hélas ;( Je ne peux donc pas vous aider sur ce coup-là...
    A bientôt !
    PS : Vos cupcakes "Jungle" sont adorables !!!

  • #6

    Cécile Chalon Chevrault (vendredi, 07 février 2014 17:48)

    Bonjour Isabelle,

    Merci d'avoir pris le temps de me répondre, je l'utiliserai ponctuellement pour animer le site sans trop le surcharger.
    Bon week end.

    Cécile

Ruban