Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
3 janvier 2016 7 03 /01 /janvier /2016 15:17

Suite à la demande de certains de mes visiteurs, je vous donne ici le code HTML pour faire apparaître une pluie d'étoiles au bout de votre curseur (ou de votre souris).

 

Particularités du code HTML de la pluie d'étoiles

 

La particularité de ce code est qu'il se suffit à lui-même :

 

- Il ne nécessite pas de charger des photos d'étoiles, comme on peut en trouver sur certains forums. Le code fourni alors ne fonctionne pas si vous n'avez pas les photos (format gif) qui correspondent au code, et enregistrés dans le même répertoire.

 

- Pas besoin non plus d'aller bidouiller dans votre CSS !

 

- Il n'est en aucun cas prévu seulement pour les blogs sur Over-blog. C'est un code HTML, dont, à utiliser où bon vous semble

 

Code HTML de la pluie d'étoiles qui suit le curseur

 

 

 

<script type="text/javascript">
_uacct = "UA-994360-1";
urchinTracker();
</script><script type="text/javascript">
var colour="#7C5B1A";
var sparkles=50;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

 

 

Ou mettre ce code HTML de pluie d'étoiles

 

Il est à recopier, en mode avancé, HTML, pour votre blog:

 

- dans un article si vous ne le voulez actif que sur un article

 

- en pied de page de votre blog (accueil ET mise en page articles) pour qu'il soit valide partout

 

Limitation du code HTML pour la pluie d'étoiles

 

Ce code étant en Javascript, il ne sera pas accepté par les blogs Over-blog en mode confiance !

 

 

A lire aussi :

Faire tomber des objets en fond d'article sur votre blog

Changer le curseur de la souris sur un article

 


 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

Partager cet article

Repost 0

commentaires

Audrey le Coookie 17/12/2014 11:21

Hey, salut, c'est vraiment super tout ce que tu fais ! Mais comment le faire avec le "nouveau" Overblog parce que perso', je vois pas ce que c'est le mode avancé HTML quand je rédige :$ Si tu pouvais m'aider, ce serait génial, parce que c'est vraiment cool ce petit truc :) Merci d'avance

magnetix 29/04/2014 12:30

A shower of stars that follows your cursor is a good share with the detailed information about the program codes for the cursor creativity and all i can say is that the article is interesting. i have saved the link for more of such updates and creativity.

marie 19/02/2014 06:43

SALUT?j aimerai mettre la pluie étoile sur omd,est ce que c'est possible?

Maïté 28/12/2013 21:28


Je vous remercie pour vos précieux conseils et vous souhaite une très très bonne fin d'année. A très bientôt sur votre blog pour d'autres trucs et astuces.

Domi 27/10/2013 19:47


Bonjour,


Est-il possible d'avoir un script pour avoir en fait des étoiles + "blanches" au bout du curseur ? Merci bien d'avance pour votre réponse...cordialement, Dominique.

Aurelie 29/10/2013 11:53



désolée, je n'ai que celui là



MERLIN 02/01/2013 19:17


Bien le bonjour, tout d'abord je tiens à te féliciter pour ton blog car s'est génial la foule d'informations que l'on y trouve (surtout pour une débutante comme moi )


Je souhaiterais mettre ton script (script relatif à la pluie d'étoile) sur mon blog cowblog mais je ne comprend pas ou il faut le mettre (je souhaiterais le mettre en pied de page) mais je n'y
arrive pas et le mettre dans chaque article diable quel boulot.


Peux tu m'aiguiller ou si tu préfére je te passe mes identifiants cowblog en e-mail et tu me l'installe.Merci d'avance de l'aide apportée. A très vite


 

Aurelie 14/01/2013 09:50



Aller dans Configurer/Mise en page/Article et là, tu le colles dans un des "moduless" définis pour tes articles, celui du pied de page étant celui tout en bas, qui est surement de type "texte
libre". Tu prends le module, clic sur le amrteau, puis HTML, et coller



Hélène 29/11/2012 11:35


Bonjour ,où trouver le mode HTML  et estce qu'il faut recopier tout les codes que vous avez mis dessous.


Merci pour votre aide  Hélène

Aurelie 01/12/2012 16:19



Tout est dit ici, avec une copie d'écran


http://faireunblog.over-blog.com/article-html-c-est-quoi--39086603.html



Clara Ln 08/10/2012 21:45


MERCIIII


 


http://clara-ln.blogspot.fr/

Evinne 30/08/2012 23:26


Bon, je suis définitivement nul! Même ca je n'arrive pas a le faire.

Demore Christine 14/07/2012 23:20


Bonsoir, J'ai suivi votre conseil pour mettre une pluie d'étoiles qui suit mon curseur, mais elles sont de la même teinte que le fond du blog donc invisibles... comment puis-je procéder pour
changer la couleur de ces étoiles ? (ex : vert clair comme les écritures où autre de mon choix). Je vous remercie de votre aide ...

Aurelie 16/07/2012 11:41



ce script est intégral, non changeable, désolée



Présentation

  • : Faire un blog
  • Faire un blog
  • : Ce blog vous aide à vous lancer pour faire votre blog : plateforme, mise en page, décoration, gadgets...
  • Contact

Vous Cherchez Quoi ?

Bienvenue !

 

PancarteSmiliz.pngCe blog a pour objet de vous aider à faire votre blog. C'est facile, et possible sans être informaticien !

J'ai 2 autres blogs très différents, et je souhaite mettre mon expérience à votre service. N'hésitez pas à me déposer vos commentaires et questioxxns. 
Si vous débutez, commencez par l' Index des articles , rubrique "Pour bien démarrer". 

 

Inscrivez votre site sur ma Top Liste et améliorez votre référencement.  

Mon logo sur votre site

Si j'ai contribué à l'amélioration de votre blog, merci d'y mettre mon logo :
Site Faire Un Blog

Code à coller :

<a href="http://faireunblog.over-blog.com/" target="_blank"><img height="65" width="85" src="http://sd-1.archive-host.com/membres/up/42016049459753927/PancarteSmiliz.png" alt="Site Faire Un Blog" /></a>

 

 

Date du jour

 

 

 

Géolocalisation

formation