effet vague ou drapeau

**SpaceFrog** · 26/01/2010, 10h54

Après l'effet miroir voici un effet vague ou ondulation que l'on peut d'ailleurs associer au premier.

Sous IE il existe des filtres qui permettent directement ce genre d'effet.

la vague:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Miroir mon beau miroir</title>
<style type="text/css">
html, body {height:100%;
            width:100%;
            margin:0;
            padding:0;}
body {
	background-color:#000000;}      
 
#one {position:absolute;
	  top:100px;
	  left:100px;
	  }
 
</style>
 
<script type="text/javascript">
  /*======================================/
 /  Yet another one dreamt by SPaceFrog  /
/ =====================================*/
var tabanim
function reflect(){
var tabmirroir=new Array();
var tabimg=document.getElementsByTagName('img');
var blancstrip=document.createElement('div');
blancstrip.style.height='1px';
blancstrip.style.position='relative';
blancstrip.style.clear='both';
blancstrip.innerHTML=""
blancstrip.display="block";
blancstrip.overflow="hidden";
blancstrip.style.fontSize="0px";
blancstrip.style.lineHeight="0px";
blancstrip.style.border="solid 0px";
blancstrip.style.margin="0px";
blancstrip.style.padding="0px";
blancstrip.style.overflow="hidden";
blancstrip.className="anim";
 
 
var blancholder=document.createElement('div');
 
//recupération des images à traiter
var i=0;
while(tabimg[i] ){
	if (/(^|\W)miroir\d?(\W|$)/.test(tabimg[i].className)){
	 	tabmirroir.push(tabimg[i])
	 	 }
	 i++;	 
}	 
 
//duplication bande par bande
i=0
while(tabmirroir[i++]){
	blancstrip.style.backgroundImage="url('"+tabmirroir[i-1].src+"')";
	var imgtop=tabmirroir[i-1].offsetTop;
	var imgleft=tabmirroir[i-1].offsetLeft;
	var imgwidth=tabmirroir[i-1].offsetWidth;
	var imgheight=tabmirroir[i-1].offsetHeight;
	var reflet=""
	var j=0;
	var holder=blancholder.cloneNode(true);
	holder.style.position='absolute';
	holder.style.top=100+imgtop+"px";
	holder.style.left=imgleft+"px";
 
      var p=1
      var decal=0
	while(j++<imgheight){
		var puzzlestrip=blancstrip.cloneNode(true)
		puzzlestrip.style.width=imgwidth+"px";
		puzzlestrip.style.backgroundPosition="0px -"+j+"px"
		holder.appendChild(puzzlestrip)
 
	}
      	document.body.appendChild(holder)	
  }
animatemiror()	
}
 
function animatemiror(){
	var tabdivs=document.getElementsByTagName('div');
	tabanim=new Array();
	var i=0;
 
	while(tabdivs[i] ){
		if (/(^|\W)anim\d?(\W|$)/.test(tabdivs[i].className)){
	 	tabanim.push(tabdivs[i])
	 	 }
	 i++;	 
	}	 
	i=0;
  		setInterval(function(){animstrip()},50) ;
 
}
 
var steps=new Array(0,0,0,0,0,1,1,1,1,1,2,2,3,3,3,4,4,4,4,4,5,5,5,5,5)
var opac= new Array(7,7,7,7,7,7,7,7.5,7.5,8,8,8.5,9,9,9,9.7,9.8,10,10,10,10,10,10,10,10)
var decal=0
var up=1
function animstrip(){
var i=0
while(tabanim[i++]){
	tabanim[i-1].style.marginLeft=steps[decal+up]+"px";
	tabanim[i-1].style.opacity =  opac[decal+up]/10;
	tabanim[i-1].style.filter = 'alpha(opacity=' + opac[decal+up]*10 + ')';
	up=(decal==steps.length-2)?-1:up;
	up=(decal==1)?1:up;
	decal=decal+up;
	}
}
 
</script>
 
</head>
 
<body onload="reflect()">
<img id="one" src="img/logo.gif" class="miroir anim " />
</body>
 
</html>

le drapeau:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flotte au vent joli drapeau !</title>
<style type="text/css">
html, body {height:100%;
            width:100%;
            margin:0;
            padding:0;}
body {
	background-color:#000000;}      
 
#one {position:absolute;
	  top:100px;
	  left:100px;
	  }
 
</style>
 
<script type="text/javascript">
  /*======================================/
 /  Yet another one dreamt by SPaceFrog  /
/ =====================================*/
var tabanim
function reflect(){
var tabmirroir=new Array();
var tabimg=document.getElementsByTagName('img');
var blancstrip=document.createElement('div');
with(blancstrip){
	style.width='1px';
	style.position='absolute';
	style.float='left';
	style.top=0;
	innerHTML=""
	display="block";
	overflow="hidden";
	style.fontSize="0px";
	style.lineHeight="0px";
	style.border="solid 0px";
	style.margin="0px";
	style.padding="0px";
	style.overflow="hidden";
	className="anim";}
 
 
var blancholder=document.createElement('div');
 
 
//recupération des images à traiter
var i=0;
while(tabimg[i] ){
	if (/(^|\W)miroir\d?(\W|$)/.test(tabimg[i].className)){
	 	tabmirroir.push(tabimg[i])
	 	 }
	 i++;	 
}	 
 
//duplication bande par bande
i=0
while(tabmirroir[i++]){
	blancstrip.style.backgroundImage="url('"+tabmirroir[i-1].src+"')";
	var imgtop=tabmirroir[i-1].offsetTop;
	var imgleft=tabmirroir[i-1].offsetLeft;
	var imgwidth=tabmirroir[i-1].offsetWidth;
	var imgheight=tabmirroir[i-1].offsetHeight;
	var j=0;
	var holder=blancholder.cloneNode(true);
 
	//creation du conteneur des bandes
 	with(holder){
		style.position='absolute';
		style.top=imgtop+"px";
		style.width=imgwidth +"px"
		}
	//creation des bandes		
	while(j++<imgwidth){
		var puzzlestrip=blancstrip.cloneNode(true)
		puzzlestrip.style.height=imgheight+"px";
		puzzlestrip.style.left=imgwidth+ 50 + imgleft+j+"px";
		puzzlestrip.style.top=0;
		puzzlestrip.style.backgroundPosition=-j+"px 0px"
		holder.appendChild(puzzlestrip)
 
	}
      	document.body.appendChild(holder)	
  }
animatemiror()	
}
 
function animatemiror(){
	var tabdivs=document.getElementsByTagName('div');
	tabanim=new Array();
	var i=0;
 
	while(tabdivs[i] ){
		if (/(^|\W)anim\d?(\W|$)/.test(tabdivs[i].className)){
	 	tabanim.push(tabdivs[i])
	 	 }
	 i++;	 
	}	 
	i=0;
  		setInterval(function(){animstrip()},50) ;
 
}
 
var steps=new Array(0,0,0,0,0,1,1,1,1,1,2,2,3,3,3,4,4,4,4,4,5,5,5,5,5)
var opac= new Array(7,7,7,7,7,7,7,7.5,7.5,8,8,8.5,9,9,9,9.7,9.8,10,10,10,10,10,10,10,10)
var decal=0
var up=1
function animstrip(){
var i=0
while(tabanim[i++]){
     with(tabanim[i-1]){
	style.marginTop=steps[decal+up]+"px";
	style.opacity =  (opac[decal+up]/10);
	style.filter = 'alpha(opacity=' + opac[decal+up]*10 + ')';
	}
	up=(decal==steps.length-2)?-1:up;
	up=(decal==1)?1:up;
	decal=decal+up;
	}
}
 
</script>
 
</head>
 
<body onload="reflect()">
<img id="one" src="img/logo.gif" class="miroir anim " />
</body>
 
</html>

et la page de demo drapeau

et la page de demo vague

.

Attention c'est gourmand en ressources

**vermine** · 26/01/2010, 11h47

Il faut dormir la nuit.

Et rêver d'autres choses.

Merci pour ces scripts, en tout cas.

**le_chomeur** · 27/01/2010, 13h47

à quand la mise a jours version souple

**SpaceFrog** · 27/01/2010, 14h50

Faut que je pige comment ça marche avant, je teste après et y'a plus qu'à

**Auteur** · 27/01/2010, 22h19

Envoyé par SpaceFrog

Faut que je pige comment ça marche avant, je teste après et y'a plus qu'à

ces scripts ne sont pas de toi ?

Ou alors as-tu fait ces scripts sans comprendre

?

**SpaceFrog** · 28/01/2010, 08h37

Mouarf non !

Actuellement le code tourne avec un array de positions pour le déplacement. Array que j'ai moi même rempli avec des valeurs suivant la vitesse du vent à travers les barreaux de chaises et la flexibilité de la queue de la vache !
Mon fillot me suggérait d'utiliser un code qui génère automatiquement la suite de coordonnées à base de savant calcul trigonométrique.
Ce script est capable de générer des coordonnées selon un effet désiré (accélération, décélération, trajectoire ...)
SI j'intègre ce générateur de coordonnées dans mon script il permettrait de fluidifier le mouvement
J'essaye de comprendre ce code avant de l'inclure dans mon script

**Auteur** · 28/01/2010, 19h37

Envoyé par SpaceFrog

Array que j'ai moi même rempli avec des valuers suivant la vitesse du vent à travers les bareux de chiases et la flexibilité de la queue de la vache !

visiblement il y a eu aussi un coup de vent sur ton clavier

**SpaceFrog** · 30/01/2010, 12h05

en effet ça faisait un peu pathologie de saison

c'est rectifié

effet vague ou drapeau

Contribuez

Discussions similaires

Partager

Partager