J'ai réalisé un CV online que je dois envoyer ce week.
Une page unique en HTML utilisant les CSS3, ce qui me permet de redimensionner automatiquement les images + la page (celles ci s'adaptent en fonction de la largeur de la fenêtre : ça gère du mobile/tablette jusqu'à du big HD, 27"). J'ai 2 systèmes de parallax :
- 1 basé sur 5 images superposées
- 1 autre basé sur 4 PNG, le tout réagissant au passage de la souris
Les images font dans les 300/500 ko, c'est vraiment du très lourd.
Alors, sous Firefox, IE et Opéra, ça déchire sa mère, par contre Sous Chrome et Safari ça mouline tellement que le site n'est plus exploitable dans le sens ou lorsque je fais défiler de haut en bas avec la barre d'ascenseur ça saccade à mort.
Seule solution, virer le parallax (+ jQueryMin), simplifier le CSS et écraser toutes les images superposées ... Là ça va ...
Quelqu'un a déjà eu ce problème avec Chrome ? CSS3 + Parallax + page lourde = saccades
J'ai aussi tenté avec un préloader qui me charge la page entière avant de l'afficher, mais rien à faire.
Fait iech, parce que ça enlève beaucoup de dynamisme à la page PHP.
Par exemple ici, j'avais la partie Murciélago + partie panneau + partie grillage + partie Background qui se déplaçaient sous différent axe ... Maintenant, c'est juste une seule image ...
Dernière modification le 21/03/13 à 12:07 par groove_salad
faudrait voir le code pour voir s'il y a un problème.
as tu fais du responsive design ? genre comme l'asile, et adapter la taille des images sources en fonction de la résolution du terminal.
Oui tout à fait, je ne voulais pas monter un site alternatif via jQuery Mobile en parallèle.
Apparemment ça vient des images très lourdes (en tout dans les 5 mégas) qui en se redimensionnant provoquent un méga lag sous Chrome et Safari ...
Arf, chez CM, ils n'utilisent que Chrome, sont pénibles ces Hollandais :)
Merci mais c'est bon, j'ai tout simplifié. comme dit Gingembre j'ai viré la partie jacky touch.
Ce n'était pas les scripts mais les superpositions de PNG (en 1920 x 1280, 500Ko l'image) ... Chrome n'aime vraiment pas ça :)
Dernière modification le 21/03/13 à 17:18 par groove_salad
Vous en pensez quoi ? Sachant que le Footer + Header sont fixes (c'est à dire que la partie du haut, jusqu'à Much More et la partie du bas, les logos + contacts apparaissent continuellement à l'écran). Tout le reste défile entre ces 2 parties et le tout s'adapte à tous les écrans.
C'est pour un poste de WebDesigner, donc ça reste graphique et orienté sur la marque ...
Capture.
Chaque image redirige vers une Landing Page complète et chaque lien vers des créations. Le logo en rouge en haut contient en fait mon nom et prénom.
Dernière modification le 21/03/13 à 17:37 par groove_salad
Je peux mais je ne suis pas sur que CM apprécie la plaisanterie à sa juste valeur.
J'ai déjà fait une fête avec eux, et je peux te dire que ce ne sont pas des comiques, dans le sens où c'est pas trop le genre à mater des photos et films de boules, à picoler et à chanter des chansons paillardes ...
Ce soir là, nous étions 5 à être bourrasque d'ailleurs ... (5 sur 120 personnes). Il a fallu que je retouche les photos de la soirée sur Paris présentes sur la page, parce que vraiment, ça se voyait que j'avais éclusé comme un porcelet assoiffé !
Dernière modification le 21/03/13 à 17:48 par groove_salad
hOrny Lettuce