Création d'un effet d'image en mosaïque/en mosaïque avec jquery

Question

Y a-t-il un moyen de créer l'image principale shown here on msi.com? Bien que fait en flash, je préférerais le faire avec jquery. J'ai aussi essayé avec des 'générateurs de mosaïque', mais je n'ai pas réussi à reproduire correctement l'effet, mais l'utilisation d'un générateur avec js serait également acceptable.

[edit] J'ai omis de mentionner, je ne m'intéresse qu'à émuler l'aspect mosaïque/mosaïque de l'effet, pas l'animation. Je souhaite qu'une grande image (par exemple 400 pixels par 300 pixels) séparée par des espaces (ou des bordures personnalisables en couleurs) soit divisée en 9 blocs ou carreaux de taille égale chacun.

Bien que je souhaite appliquer un effet de survol individuel à chaque image, en donnant à chacune l'effet qu'elles sont des entités distinctes, je n'ai pas nécessairement besoin d'autre animation.

Les coins arrondis ne sont pas importants ou souhaités. [/ edit]

Answer 1

Il serait très intéressant de le faire avec jquery. Vous auriez une table d'images, chacune avec un événement de survol qui a basculé une animation lors de la mise sous et hors tension de la souris. La logique n'est pas trop dure; obtenir des images et une animation plus belles serait un peu plus difficile, mais pas irréversible. Cela dépend de combien vous voulez reproduire l'effet. : D

éditer: vous voulez juste une mosaïque d'images? vous pouvez simplement utiliser une table pour positionner toutes les images, et utiliser js pour les événements. De quoi d'autre voulez-vous ou avez-vous besoin pour js? : D

Answer 2

Voici une idée. Chargez une grande image dans un DIV. Décidez de la taille de vos fenêtres et créez un fichier PNG avec transparence où vous souhaitez que les fenêtres soient. (Opaque aux bordures avec épaisseur pour contrôler la largeur des espaces.) Pour créer l'effet, utilisez trois couches. L'image sur la couche inférieure (que vous pouvez échanger au besoin). La couche médiane et la couche supérieure seront répétées le long des axes x et y et contrôlées individuellement par jQuery. Le calque du milieu aura le PNG avec transparence et en plus, le calque supérieur avec juste une couleur solide (correspondant à l'arrière-plan de votre page pour "sembler" invisible?). Pour créer des effets «jolis», vous pouvez ajuster l'opacité ou animer la couche supérieure des boîtes séparées pour afficher/masquer l'image sur le calque inférieur qui sera visible à travers la zone transparente de la couche intermédiaire dans le PNG.

Espérons que mon explication était claire. Avec un codage intelligent, cela peut être empaqueté et réutilisé partout où vous le souhaitez.