Masque rond sur une image croissant à partir du centre de cette image

Question

Sur un clic d'un bouton, j'ai besoin de montrer une image d'un disque vinyle. L'image apparaîtra quelque part à côté du bouton et est un png transparent pour le faire paraître rond. Le problème est qu'il doit être affiché à l'aide d'un masque circulaire qui s'anime à partir d'un point au centre de l'image et qui se déplie pour afficher l'ensemble du "dossier". Comment créer un masque animé arrondi qui révélera l'image "record" sans zoomer/redimensionner l'image.

Est-ce que quelqu'un connaît une bibliothèque javascript ou de préférence jQuery capable de quelque chose comme ça?

Si vous connaissez une telle chose dans une langue différente, cela pourrait m'aider à écrire quelque chose qui m'est propre.

Merci.

Answer 1

Peut-être que vous pourriez créer un grand blanc (ou de couleur de fond) PNG avec un trou de transparence alpha dans le centre. Placez-le sur le dessus de l'image à révéler, puis agrandissez-le tout en le gardant épinglé à son point central. Une fois qu'il est mis à l'échelle au point où toute l'image sous-jacente est dans le trou transparent, retirez l'image de couverture.

Je n'ai aucune idée de comment cela fonctionnerait (probablement mal!), Mais c'est une pensée.

Answer 2

En règle générale, le HTML vient en rectangles, si vous avez une image avec transparence, vous pouvez l'agrandir en gardant son centre constant. Si vous avez besoin qu'il soit sélectionnable uniquement dans le cercle, vous devrez vérifier les coordonnées de la souris pour voir si elle se trouve dans le cercle, dans son rectangle. Voir: How to make the hovering trigger an animation only on a circle area in a div with radius border with jquery

---

@ 6bytes a suggéré d'utiliser des coins arrondis. Chrome et FireFox entourent actuellement les coins arrondis via les attributs CSS border-radius et -moz-border-radius, de sorte que vous pouvez obtenir un cercle visuellement avec un rayon de bordure de 50%. Cependant, ceci n'est qu'une différence visuelle sur un rectangle sous-jacent, les clics dans le rectangle comptent toujours comme étant sur le cercle lui-même.

#circle { 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
} 

Basic Rectangle Démo: http://jsfiddle.net/rL4BU/2/

Vous pouvez mettre un peu de code pour vérifier si les clics sont dans le cercle pour résoudre ce problème.

Clics Cercle Démo: http://jsfiddle.net/rL4BU/4/