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 html : 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
<!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 : 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
/*****************
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 !