Ressources pour les transitions
Bonsoir à tous,
Je suis en train de développer une idée qui me trottait dans la tête depuis un moment.
Le concept: Je déplace des éléments Div floutée en CSS dans ma page en fonction de l'emplacement de la souris. Lorsque celle-ci passe sur l'élément, l'élément en question ne devient plus flou.
Tout se passe à merveille sauf que depuis que j'ai mis en place la règle transition en CSS mon déplacement est plus lent. On pourrait même avoir l'impression d'avoir des lag.
D'où ma question: est-ce que le fait de mettre une transition sur un élément en mouvement prend de la ressource?
Quelqu'un aurait-il une idée? Une alternative?
J'essaye en vain de trouver une solution mais je n'arrive à rien.
Et je souhaite vraiment garder mon déplacement ainsi que ma transition de flou à non flou...
Voici mon code pour vous aider:
HTML & SCRIPT
Code:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<link rel="stylesheet" media="screen" href="./css/style.css" />
<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
var windowHeight = document.documentElement.clientHeight;
var windowWidth = document.documentElement.clientWidth;
$('#main').css({
'left' : windowWidth/2 - $('#main').width()/2,
'top' : windowHeight/2 - $('#main').height()/2});
$('#right').css({
'left' : windowWidth - $('#right').width()*2,
'top' : 0});
$(document).mousemove(function(e){
$('#status').html(e.pageX +', '+ e.pageY);
var midX = windowWidth/2 - e.pageX;
var midY = windowHeight/2 - e.pageY;
$('#status2').html(midX +', '+ midY);
$('#main').css({
'left' : windowWidth/2 - $('#main').width()/2 + midX/2 ,
'top' : windowHeight/2 - $('#main').height()/2 + midY/2});
$('#right').css({
'left' : windowWidth - $('#right').width()*4 + midX/4 ,
'top' : 0 + midY/4});
});
});
// -->
</script>
</head>
<body>
<h2 id="status">
0, 0
</h2>
<br />
<h2 id="status2">
0, 0
</h2>
<div id="vignetting"></div>
<div id="main">TEST MAIN</div>
<div id="right">TEST RIGHT</div>
</body>
</html> |
CSS:
Code:
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
| /*****************
STRUCTURE
*****************/
*
{
margin : 0;
padding : 0;
}
body
{
font-size:14pt;
font-family: 'Sintony', sans-serif;
}
#vignetting
{
width:100%;
height:100%;
-webkit-box-shadow: inset 0px 0px 250px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0px 0px 250px rgba(0,0,0,0.4);
box-shadow: inset 0px 0px 250px rgba(0,0,0,0.4);
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
content: "";
z-index:1;
}
#main
{
position:absolute;
z-index:2;
text-shadow: 0 0 2px #000 !important;
color: transparent !important;
background-image: none !important;
-webkit-transition : all 0.5 ease-in;
-o-transition : all 0.5 ease-in;
-moz-transition : all 0.5s ease-in;
}
#main:hover
{
text-shadow: 0 0 0px #000 !important;
color: black !important;
background-image: none !important;
-moz-pointer-events: none !important;
-webkit-pointer-events: none !important;
pointer-events: none !important;
}
#right
{
position:absolute;
z-index:2;
} |
Je suis preneur de toute idée, analyse, critique, conseil, ......
Merci d'avance !
