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

**SpaceFrog** · 23/07/2012, 08h21

heu sous firefox 14 c'est tout en vrac ???

sous chrome et IE aussi ...

**typiac** · 23/07/2012, 12h45

Euh...tu veux dire que c'est pas centré je pense! Oui, c'est normal, je m'attarde juste sur les fonctions pour le moment...

Tu as vu cette latence bizarre?

**SpaceFrog** · 23/07/2012, 13h22

J'ai pas de latence , j'ai rien , c'est pas fonctionnel
j'ai une barre d'image à moitié coupées en bas de page un aofnd noir avec des pontillées en biais et des images en biais et pis c'est tout, et ça fait rien

**typiac** · 23/07/2012, 14h46

bon, bon, bon, ça doit venir des proportions, moi ça s'affiche bien, je regarde le css et je reviens!

**SpaceFrog** · 23/07/2012, 15h18

Voilà un screen.
et les liens sont inactifs ..

**typiac** · 23/07/2012, 15h27

Ah voilà, tu m'as fait peur!!!

Oui, c'est pas du tout designé mais si tu survoles les vignettes du bas, ça exécute le script et ça fait bouger les losanges....

**SpaceFrog** · 23/07/2012, 15h33

Ha oui le slide ...

et ? a part le fait que l'image d'origine soit pourrie, je ne vois pas d'aliasing lors du déplacement ...

**thelvin** · 23/07/2012, 15h36

Bon, mais les losanges en question c'est des .gif, pas des .png. C'est normal qu'il y ait un crénelage, puisque .gif c'est soit opaque soit invisible : il n'y a pas de translucide.

Si tu veux garder des .gif, tu n'as pas le choix, il faut garder une couleur de fond qui t'arrange, et que les .gif comptent sur cette couleur de fond.

**SpaceFrog** · 23/07/2012, 15h38

AAAhhhhhhhhhhhh
OK !!! j'étais pas du tout sur cette piste là , mais en effet gif c'est transparent ou pas transparent, pas de semi transparence
=> passe en png ...

**typiac** · 23/07/2012, 17h28

Envoyé par SpaceFrog

Ha oui le slide ...

et ? a part le fait que l'image d'origine soit pourrie, je ne vois pas d'aliasing lors du déplacement ...

Oui, ça me rappelle un peu 3615 Ulla pour ceux qui sont de ma génération! :p

**typiac** · 23/07/2012, 17h31

Envoyé par SpaceFrog

AAAhhhhhhhhhhhh
OK !!! j'étais pas du tout sur cette piste là , mais en effet gif c'est transparent ou pas transparent, pas de semi transparence
=> passe en png ...

je viens de passer les images en png mais je crois que ça ne fait pas avancer le problème. Quand le script fait bouger les images, un crénelage apparaît...

Pourtant, l'image ne pèse que 14Ko! C'est dingue ce truc.

**thelvin** · 23/07/2012, 17h58

~~Depuis que tu es passé en .png je ne vois plus de crénelage...~~

Edit: au temps pour moi, j'avais juste changé d'écran, avec une résolution trop haute pour le voir.
Oui, c'est pas tout de prendre un format d'image dans lequel on peut enlever le crénelage, après il faut effectivement l'enlever. Tes pixels doivent être translucides. Pas opaque noir ou entièrement transparent, mais noir translucide.
En gros tu passes un coup de gomme sur le bord, quoi, enfin bon tu es censé savoir ce que c'est, le crénelage.

C'est quoi que tu appelles un crénelage, au juste ? Parce que ça fait un moment que tu nous parles de la taille des fichiers, et ça a un peu aucun rapport.

**typiac** · 23/07/2012, 18h04

Envoyé par thelvin

Depuis que tu es passé en .png je ne vois plus de crénelage...

C'est quoi que tu appelles un crénelage, au juste ? Parce que ça fait un moment que tu nous parles de la taille des fichiers, et ça a un peu aucun rapport.

Ben partant du principe que le mouvement n'est pas fluide...je me suis dit que ça venait peut-être du poids...

Le crénelage dont je parle est un crénelage de mouvement en quelque sorte. L'image se cisaille lorsqu'elle est en mouvement.

Je reconnais que les mecs qui ont fait ça sont super doués mais c'est super fluide, aucun cisaillement et ça va à fond la caisse!

**thelvin** · 23/07/2012, 18h11

D'accord c'est encore autre chose. Je croyais qu'on parlait du bord de l'image dont on voit les pixels, mouvements ou pas.

Désolé, chez moi je vois ni latence, ni mouvements sauteurs. Tout a l'air fluide, mais en même temps je sais pas à quoi c'est censé ressembler ni comment s'en servir, de cette page. Là il n'y a juste rien.

Et la compression des fichiers n'a pas d'importance. Tu te doutes bien que le navigateur ne projette l'image que sous sa forme décompressée. Et les autres fichiers sont sans importance.

Javascript, images et aliasing

jQuery

Discussions similaires

Partager

Partager