Rechercher : dans
Par :

[Javasript] étoiles tombent du curseur

Dernière réponse le 18 fév 2009 à 17:32:18 K_Bahamut, le 20 déc 2007 à 12:04:36 
 Signaler ce message aux modérateurs

Bonjour,
J'ai vu une fois, sur un site, un truc que je voudrais reproduire (mais je trouve plus le site).
Il y avait des petites étoiles de toutes le couleurs (caractère "+") qui tombaient depuis la position du curseur et qui disparaissaient petit à petit (totalement au bout de 300 ou 400 px ).
Est-ce que vous savez comment je pourrais faire ça ? (à la rigueur, une seule couleur pour les étoiles :p)
Un code source serait le bienvenue ^^

Merci beaucoup

S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (proverbe Shadok)
--{[コンピュータ]}--

Meilleures réponses pour « [Javasript] étoiles tombent du curseur » dans :
Changer l'aspect du curseur en CSS VoirLa propriété cursor permet de changer l'aspect du curseur sur un élément d'une page web. Le client affichera automatiquement le curseur de son ordinateur qui correspond au type de curseur que vous aurez choisi. Exemples Liste des attributs...
Oracle - Cycle de vie des curseurs VoirLa bonne compréhension du cycle de vie et du fonctionnement des curseurs, permet d’optimiser les applications exécutant des requêtes SQL. Les étapes lors de l’exécution d’un curseur sont les suivantes : Ouverture d’un curseur : une structure...

1

pashmina, le 20 déc 2007 à 12:08:55
  • +1

J'ai pas trouvé mais peut etre que ca peut t'aider ca
http://acestgratuit.free.fr/scripts_dhtml/
Qui vole un boeuf est vachement costaud

Répondre à pashmina

2

Christounet, le 20 déc 2007 à 12:10:13

Bonjour,

J'ai trouvé un site qui mets des étoiles sous le curseur et le code se trouve également sur le site:

Etoile curseur

A plus

Répondre à Christounet

3

Christounet, le 20 déc 2007 à 12:15:46
  • +3

Rebonjour,

En cherchant encore un peu plus, j'ai trouvé un site contenant du code qui permet de faire tomber des étoiles à partir du curseur:

Autre exemple

A plus

Répondre à Christounet

4

K_Bahamut, le 20 déc 2007 à 15:35:17

 MERCI !! 

:DDDDD
Chu content ^^
a++
S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (proverbe Shadok)
--{[コンピュータ]}--

Répondre à K_Bahamut

5

ludovicdu91, le 16 avr 2008 à 10:47:10

Comment tu as fait pour collé le script sur ton site ? Car moi, je le collle au début de ma page mais cela ne marche pas !! Peux tu m'aider ?

Répondre à ludovicdu91

6

Tsubaki-chin, le 3 nov 2008 à 21:32:57

Bonjour a tous!

Bon avec 5 ou 6 mois de retard ça peut toujours servir non?

ludovicdu91, as-tu bien fait attention à mettre le code dans le html de ton site et non pas dans le CSS ? Si ce n'est pas le cas, alors ce code se met dans le html en premier, pas dans la classe body ou autre, dès le début. Du moins pour ma part, moi ça a marcher, parce que je ne suis pas une pro de l'informatique (encore) xD

Bizoux!! =)

Tsub'

Répondre à Tsubaki-chin

7

Fire-W@ll, le 4 nov 2008 à 13:20:06

Bonjour!

Il faut faire attention à bien mettre le code entre les balises <head> et </head> car c'est du JavaScript.
Si tu mets le code dans ton HTML, ça ne marchera pas.

Cordialement,
Fire-W@ll

Répondre à Fire-W@ll

8

Tsubaki-chin, le 4 nov 2008 à 13:31:17

Bonjour! ^^

Ah bon? pourquoi ça a marché sur le mien? Oo T'inquiète pas c'est pas que je ne veuille pas te croire je suis mal placée pour te contredire je pense, mais c'est bizarre que ça marche chez moi, non? mon site qui en fait est un blog : www.mangafanz.canalblog.com

Soreja! =D

Répondre à Tsubaki-chin

9

Fire-W@ll, le 4 nov 2008 à 14:11:07

Salut!

Excuse moi effectivement tu as raison je me suis trompé.
Le code JS tu doit le mettre dans le HTML mais les variables il faut les déclarer dans le header (enfin il me semble)

Cordialement,
Fire-W@ll

Répondre à Fire-W@ll

10

causette, le 21 nov 2008 à 11:40:12

Pouvez vous s'il vous plait indiquer le chemin pour placer ce script ?
en passant par le ftp
merci infiniment

Répondre à causette

11

bribri, le 27 nov 2008 à 15:52:58

J'aimerai aussi pouvoir l'insérer dans mon blog, sur canalblog, mais les données il faut les copier où ?!!
merci

Répondre à bribri

14

 Tsubaki-chin, le 18 fév 2009 à 17:32:18

Recoucou!

Brirbi, tu as un blog canalblog et tu veux mettre le curseur avec les etoiles qui tombent, c'est ça?

Eh bien tu va faire comme moi :

Deja, si ce n'est pas fait, tu vas passer ton blog en mode avancé. Attention! cette action est irreversible! Pour ce faire, tu vas dans "apparence" et tu coche la case "basculer en mode avancé".

Ensuite, toujours dans "apparence", tu clique su "éditer les fichiers de ce modèle"
Tu arrives sur une page ou se trouve un cadre avec du html dedans et un menu déroulant. Dans ce menu, tu vas dans "page d'accueil" (normalement tu y es déjà mais on sais jamais).

Dans le cadre il y a quelque chose comme " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> "

Eh bien avant cette ligne, tu vas inserrer ce code : (pour les étoiles ;D )

<script type="text/javascript">
// <![CDATA[
var colour="#808";
var sparkles=50;
/****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.co.uk/rv *
* DON'T EDIT BELOW THIS BOX *
* topcode adapté *
****************************/
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>




Et voila! Le tour est joué!
Si tu as un quelconque probleme, fais moi signe, je pourrais peut-etre t'aider! ^^

Bye!
Tsubiii x)

Répondre à Tsubaki-chin

12

kitkatboudin, le 16 fév 2009 à 13:21:39

Euhh je crois que je suis bete mais bon je ne sais toujours pas ou mettre le code que vous nous fournissez !
Moi j'aimerais le mettre sur blog (skyrock ) !
merci d'avance de votre aide

Répondre à kitkatboudin

13

Tsubaki-chin, le 18 fév 2009 à 17:19:10

Yoo!

Kitkatboudin, sur skyblog il est à ma connaissance impossible de faire cela tout simplement parce que skyblog ne propose pas de modifier les fichiers html css etc.. du blog. Mais je me trompe peut-etre, je ne suis pas allée sur skyblog depuis longtemps alors peut-etre y a-t-il eu des changements.

Bizoux les geons! =3

Tsubaki-chin, pour vous servir xD

Répondre à Tsubaki-chin