Javascript, images et aliasing

**typiac** · 22/07/2012, 07h08

Bonjour,

Je suis en train de créer un menu avec Jquery dont le principe est assez simple et inspiré du menu de ce maginifique site:

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
<!DOCTYPE html>
<html>
<head>
<script src='js/jquery-1.7.2.min.js'></script>
<link type="text/css" rel="stylesheet" href="css/styles.css"/>
 
<title>En cours</title>
</head>
<body>
 
 
		<div id="divbout"><img src="image.png" class="logo">
			<div id="m0" class="space"><img src="image.png"></div>
        	<div id="m1" class="space"><img src="image.png"></div>
        	<div id="m2" class="space"><img src="image.png"></div>
        	<div id="m3" class="space"><img src="image.png"></div>
        	<div id="m4" class="space"><img src="image.png"></div>
        	<div id="m5" class="space"><img src="image.png"></div>
        	<div id="m6" class="space"><img src="image.png"></div>
        </div>
           <div id="div2">
            <ul id="da-thumbs" class="da-thumbs">
					<li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
             </ul>
             </div>
</body>
</html>

Au survol de chaque image, les balises <li> sont décalées via le script transit.js via ceci:

Code :

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

1
2
3
4
5
6
$(document).ready(function() {
$('#m0').mouseenter(
function (e) {
$('#div2').transition({ x: '0px', duration: '750ms' }, 'linear');
});
});

mes fichiers images sont tous des .png ultra-compressés. Jquery et mon code javascript ainsi que le fichier css qui est encore tout maigre sont également tous compressés.

Pourtant, lors du mouvement du menu, mes images (des carrés gris foncés pour le moment) subissent un gros crénelage!

J'ai été jusqu'à mettre un background en noir pour que les carrés gris foncés ne créent pas un gros contraste mais ça ne fait que limiter les dégâts.

Est-ce que j'ai oublié quelque chose? Que dois-je faire?

**SpaceFrog** · 22/07/2012, 09h07

à l'aveugle ?

**typiac** · 22/07/2012, 09h30

comment ça?

**SpaceFrog** · 22/07/2012, 11h07

ben on n'a pas tes images... il faudrait au moins que l'on puisse voir une version, hébergée avec tes images pour visualiser ...

**typiac** · 22/07/2012, 19h26

Ah, autant pour moi, je n'avais pas compris!

Voici la page juste ICI

Pour pousser un peu mon étude, j'ai repris le même style de background notamment parce que l'aliasing est plus faible lorsque:

- L'image est à peu près dans la même teinte que le background
- Le Background possède des pointillés et non des lignes

Les images sont des gifs ou des png, tous optimisés. J'ai tenté une compression css et javascript mais rien n'y fait. Ca rame, ca saccade un peu et j'ai de l'aliasing...

**typiac** · 22/07/2012, 19h44

je précise que j'utilise ce plugin

Javascript, images et aliasing

jQuery

Vue hybride

Discussions similaires

Partager

Partager