begin process at 2010 02 10 06:54:57
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > TEXTE EN SPIRALE SUR SOURIS

TEXTE EN SPIRALE SUR SOURIS


 Information sur la source

Note :
6,5 / 10 - par 6 personnes
6,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :souris, texte, effet, spirale, suivre Niveau :Expert Date de création :15/10/2005 Vu :7 473
Auteur : beladel

Ecrire un message privé
Site perso
Commentaire sur cette source (14)
Ajouter un commentaire et/ou une note

 Description

Ce code en javascript va vous permettre d'afficher un message en spirale autour de la souris. Intéressant!? Hein?
Peut-être pour certains.

Source

  • Copiez ce code et mettez le à la place de <body>...</body>.
  • -----------------------------------------------------------
  • <SCRIPT LANGUAGE="JavaScript1.2">
  • var msg='http://belaadel.ifrance.com';
  • var font='Verdana,Arial';
  • var size=2;
  • var color='#666666';
  • var speed=.2;
  • var rotation=.2;
  • var ns=(document.layers);
  • var ie=(document.all);
  • var msg=msg.split('');
  • var n=msg.length;
  • var a=size*15;
  • var currStep=0;
  • var ymouse=0;
  • var xmouse=0;
  • var scrll=0;
  • var props="<font face="+font+" size="+size+" color="+color+">";
  • if (ie)
  • window.pageYOffset=0
  • if (ns){
  • for (i=0; i < n; i++)
  • document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
  • }
  • if (ie){
  • document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
  • for (i=0; i < n; i++)
  • document.write('<div id="iemsg" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center;font-weight:regular;cursor:default">'+props+msg[i]+'</font></div>');
  • document.write('</div></div>');
  • }
  • (ns)?window.captureEvents(Event.MOUSEMOVE):0;
  • function Mouse(evnt){
  • ymouse = (ns)?evnt.pageY+20-(window.pageYOffset):event.y;
  • xmouse = (ns)?evnt.pageX+20:event.x-20;
  • }
  • if (ns||ie)
  • (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
  • y=new Array();
  • x=new Array();
  • Y=new Array();
  • X=new Array();
  • for (i=0; i < n; i++){
  • y[i]=0;
  • x[i]=0;
  • Y[i]=0;
  • X[i]=0;
  • }
  • function makecircle(){
  • if (ie) outer.style.top=document.body.scrollTop;
  • currStep-=rotation;
  • for (i=0; i < n; i++){ // makes the circle
  • var d=(ns)?document.layers['nsmsg'+i]:iemsg[i].style;
  • d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15;
  • d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2; // remove *2 for just a plain circle, not oval
  • }
  • }
  • function drag(){
  • scrll=(ns)?window.pageYOffset:0;
  • y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
  • x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
  • for (var i=1; i < n; i++){
  • y[i]=Math.round( Y[i]+=(y[i-1]-Y[i])*speed);
  • x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
  • }
  • makecircle();
  • setTimeout('drag()',10);
  • }
  • if (ns||ie)window.onload=drag;
  • </SCRIPT> 
Copiez ce code et mettez le à la place de <body>...</body>.
-----------------------------------------------------------

<SCRIPT LANGUAGE="JavaScript1.2">
var msg='http://belaadel.ifrance.com';
var font='Verdana,Arial';
var size=2; 
var color='#666666';
var speed=.2;
var rotation=.2;
var ns=(document.layers);
var ie=(document.all);
var msg=msg.split('');
var n=msg.length;
 
var a=size*15;
var currStep=0;
var ymouse=0;
var xmouse=0;
var scrll=0;
var props="<font face="+font+" size="+size+" color="+color+">";
if (ie)
window.pageYOffset=0
	if (ns){
for (i=0; i < n; i++)
	document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
	}
if (ie){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
	for (i=0; i < n; i++)
	document.write('<div id="iemsg" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center;font-weight:regular;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
	}
	(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
	ymouse = (ns)?evnt.pageY+20-(window.pageYOffset):event.y; 
	xmouse = (ns)?evnt.pageX+20:event.x-20; 
}
if (ns||ie)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
y=new Array();
x=new Array();
Y=new Array();
X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
	X[i]=0;
}
function makecircle(){ 
if (ie) outer.style.top=document.body.scrollTop;
currStep-=rotation;
	for (i=0; i < n; i++){ // makes the circle
	var d=(ns)?document.layers['nsmsg'+i]:iemsg[i].style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15;
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2; // remove *2 for just a plain circle, not oval 
}
}
function drag(){ 
	scrll=(ns)?window.pageYOffset:0;
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
	x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
	for (var i=1; i < n; i++){
		y[i]=Math.round( Y[i]+=(y[i-1]-Y[i])*speed);
		x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
	}
makecircle();
	setTimeout('drag()',10);
}
if (ns||ie)window.onload=drag;
</SCRIPT>



 Sources du même auteur

INTÉGRER DU SON CONTRÔLABLE
DÉSACTIVATION DU CLIC DROIT SUR LES IMAGES.
Toutes les sources de beladel

 Sources de la même categorie

Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx
Source avec Zip Source avec une capture [DSI] DÉPLACEMENTS SUR IMAGES par Bul3
Source avec Zip Source avec une capture [ZI] ZOOM (LOUPE) SUR IMAGE par Bul3
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

IMAGE REGARDANT ET SUIVANT LA SOURIS par abder05
Source avec Zip Source avec une capture EFFET D'EXPLOSION SUR TEXTE ET/OU IMAGE par PetoleTeam
Source avec Zip Source avec une capture EFFET D'ONDULATION SUR TEXTE ET/OU IMAGE par PetoleTeam
Source avec Zip Source avec une capture EFFET DE DRAPEAU SUR TEXTE ET/OU IMAGE par PetoleTeam
Source avec Zip ANIMATION DE TEXTES par PetoleTeam

Commentaires et avis

Commentaire de algori le 15/10/2005 17:06:31

Salut,
je trouve l'effet plutôt cool. Mais c'est assez difficile à lire pour une longue chaine de caractères. Dommage...
@++

Commentaire de beladel le 16/10/2005 00:33:26

Salut Algori,
Pour que tu puisse afficher une grande chaine de caractères dont la largeur dépasse ce qui est en haut comme message, t'as 2 solutions plus ou moins identiques.
1- tu remplace la valeur 3.8 à la ligne 56 et à la ligne 57 par une valeur plus grande 4.2 par expl.
2- tu crée une valeur paramétrable: var larg=4.5; puis sur ces lignes tu remplace la valeur de 3.8 par larg et le tour est joué.  Je l'ai tésté, Voila! a+

Commentaire de lamarty le 17/10/2005 09:46:49

Je le trouve trés interessant.
merci.

Commentaire de ken70 le 17/10/2005 19:21:42

L'effet est super sympa...
Merci pour ton code.
Cependant, ça ne semble marcher que pour IE?
Comment faire pour que ça passe sur les autres navigateurs, comme Mozilla, FireFox ou Netscape....? Et je n'ai pas été voir le rendu avec un navigateur Mac...
Merci d'avance, si tu as la solution.

Commentaire de ken70 le 17/10/2005 20:26:38

Ah oui, aussi : on peut gérer la vitesse de défilement du texte avec : var speed=.2;  ...?
Merci @++.

Commentaire de beladel le 18/10/2005 00:07:31

Salut,
Pour la vitesse, il y en deux:
La 1ère: pour que le texte suit la souris, la variable "speed" sert à ça.
La 2ème: pour la rotation elle-même, c'est la valeur de "rotation" qui fait le boulot.
------------------------------------------------------------------
En ce qui concerne les autres navigateurs, je vais essayer de chercher la réponse, je ne l'ai pas pour l'instant, désolé.
a+.

Commentaire de ken70 le 18/10/2005 17:04:51

Ok : j'ai repéré les 2 variables, et testé aussi les autres paramètres...
Merci.
J'attends donc pour les autres navigateurs.
++.

Commentaire de beladel le 19/10/2005 00:36:20

Je vois que le code, il détécte le navigateur (IE ou NS), mais il n'affiche rien sur Netscape (Bizarre!!), je dois chercher encore la solution. A bientôt.

Commentaire de benben90d le 20/10/2005 11:01:03

merci et bravo
j'aimerai que tu m'aide a compiler des codes en java script avec des images dans l'explorateur internet  je suis un amateur qui debute

Commentaire de beladel le 20/10/2005 14:31:10

salut,
Je ne sais pas comment je peux t'aider.

Commentaire de hadrien01 le 30/10/2005 21:43:56

Ce script ne marche pas sur Safari le naviguateur mac

Commentaire de Morpheusyz le 07/12/2005 10:30:05

Ne marche pas sou Firefox 1.0.7 :(

Commentaire de stfou le 11/06/2006 16:58:54

cool! très bel effet^^

Commentaire de astron35 le 01/03/2007 19:18:56

Pareil que Morpheusyz, ça ne marche pas. T'as une solution ?

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Afficher du texte sous le passage de la souris [ par Arnauti ] Bonjour, je voudrais avoir une image qui lorsque la souris passe dessus, l'image change et que ca affiche le texte. Jusque la pas de probl&#232;me&nb Comment on fait pour développer un texte au passage de la souris [ par nessobh ] J'aimerai savoir comment on peut faire (avec ou sans 'OnMouseOver') pour faire qu'un texte se développe au passage de la souris dessus. Effet de texte [ par romain2boss ] Salut,je suis pas un fan de javascript, et je cherche de puis un bon bout de temps un script de défilement de texte qui fasse un peu comme l'intro de Texte défilant avec arrêt souris [ par Jonef ] Salut à tousJ'ai un petit prob car j'aimerais créer un page internet où il y aurait un script java qui ferait défiler un texte horizontalement et qui Texte qui change au passage de la souris [ par swiss_cheese10 ] Tcho tout le monde !Eske qqun pourrait me dire le code à insérer pour que lorsque qu'on passe la souris sur un textge, le texte change ???Merci d'aide Texte changeant de couleur lors du survol souris [ par abdonabil ] bonjour,je veux un petit script qui permetra de changer la couleur d'un texte lors du survol du pointeur , sachant que ce texte est un lien.merci d'av Enlever un focus... [ par Ang3lo ] Boujours &#224; tous,Dans un formulaire, j'ai une fonction qui me met le focus dans le champ de texte survol&#233; par la souris et j'aimerais pouvoir effet de fading [ par spookyz ] Bonjour je voudrais savoir si il est possible et comment faire (je suis debutant ) pour avoir un effet de fading sur la couleur de fond d'un menu et s rollover texte change [ par japower01 ] Bonjour, je cherche a faire un rollover sur un texte pour que celui ci change au passage de la souris Ce script ne marche pas http://www.javascriptfr.


Nos sponsors


Sondage...

Comparez les prix


Archos 5 (250 Go)
Entre 440€ et 440€

Visiter le guide achat

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,718 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)