11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour

Je souhaite vos avis concernant une animation à faire sur un site.

En effet, je souhaite mettre en arrière plan d'un site (une sorte de background) une série de petites images qui aléatoirement feraient une sorte de mini zoom pour ce différencier des autres. J'aimerais en plus de ça faire en sorte que ces images s'adaptent à la largeur de la fenêtre et ne provoque pas de scroll droite/gauche, ou ne puisse être dézoomer (un peu comme sur le site meetic et leur background).

Pensez vous qu'en full javascript/jquery ceci soit possible? Est-ce que ceci ne va pas trop consommer de ressource?
La solution du gif en background est elle mieux?

J'ai déjà une bonne idée du script, mais pour le placement des images et l'adaptation à la largeur de l'écran... sachant que ce n'est pas un background-image "normal".

Merci
Bonjour.

Techniquement, ça n'a rien de sorcier : background-position peut être animé en utilisant les pourcentages... Il faut forcément faire intervenir Javascript car je ne pense pas que l'on peut faire quoi que ce soit d'aléatoire en CSS pur.

Le problème est peut-être plutôt sur la pertinence de l'animation : sera-t-elle jouée en continu, sera-t-elle toujours là si l'utilisateur revient sur la page ?

Ce qui est amusant au départ peut vite devenir gonflant...

Smiley smile
Merci pour vos réponses.

Voici l'état des choses maintenant,
En utilisant la propriété background-image (avec 25 images en background) c'est vraiment pas évident de les gérer ensuite une par une car lorsqu'une image est zoomé, toutes les autres bouges.

Ensuite avec des <img>, lorsque je met les 25 balises img et que je les places en position fixed, lors du zoom sur la page les images du haut viennent chevaucher les images du bas.. ce qui pose probléme également...

Aucune solution pour fixer toutes les images ?(chaque images prends 20% de largeur et une hauteur automatique) ce qui donne 5 lignes de 5 images et au zoom du site faire l'effet d'un background attachment fixed (ne pas bouger)