begin process at 2012 02 09 19:14:08
  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 :8 751
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 Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600
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
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


Samsung LE26B350 LCD
Entre 359€ et 417€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Green Energy Solutions With Light Bulb Morphed Into LandscapePhoto Saintes Maries de la Mer vue du ciel (13)
Photo Bright Beautiful Daisy and Grass Field 

Visiter la photothèque
 
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 : 7,238 sec (4)

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)