Ressources pour les transitions

**Friksstyle** · 28/05/2013, 22h35

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 !

**Pandapi** · 05/06/2013, 14h40

Bonjour,

Juste une remarque par rapport à ce que tu dis, moi j'ai déjà essayé ce dont tu parles et je n'ai pas eu de soucis (mais ce n'était pas avec du floutage).
Je vois mal du CSS faire ramer un ordi de maintenant (à la limite, du Javascript pourrait le faire).
Après, peut-être que les déplacements et transitions que tu utilises ne vont pas ensemble et rendent un effet saccadé ou peu fluide qui donne cette impression.

**Friksstyle** · 12/06/2013, 17h40

Je suis d'accord avec toi Pandapi,
Comment du CSS pourrait faire "ramer" un PC.
Mais je pense qu'une page avec plein d'effet HTML5 , CSS3 arriverait à surcharger le navigateur (peut-être) et de ce fait donner l'impression que ça rame

Mais ce qui me dérange dans mon code c'est le fait de supprimer/commenter les transitions annule ce problème....
Et dès que je remets cette règle le problème revient.

D'où mon interrogation.
Toujours est-il que je cherche une solution à mon problème sans résultat convaincant...

**Bovino** · 12/06/2013, 22h47

Bah non, Pandapi a tort...

Une transition CSS, ça peut engendrer beaucoup de traitements pour le navigateur.
Il ne faut pas croire qu'une animation, une transition ou autre, c'est uniquement un élément qui se déplace, ça veut aussi et surtout dire qu'à chaque trame, le navigateur doit recalculer les positions et dimensions de tous les éléments !
Bon, j'exagère un peu car il ne s'agit pas de tous les éléments et les navigateurs savent de mieux en mieux optimiser tout ça, mais il n'en reste pas moins que beaucoup de calculs sont nécessaires à chaque frame d'une animation ou d'une transition.
En revanche, si tu as une table HTML en jeu, alors ne te pose plus de question, c'est le rendu le plus complexe.

Pour finir, renseigne-toi sur les repaint et reflows pour en savoir plus.

Reflows & Repaints: CSS Performance making your JavaScript slow?

Ressources pour les transitions

CSS

Vue hybride

Discussions similaires

Partager

Partager