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

En cliquant sur un bouton, je dois 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 apparaître rond. Le problème est qu’il doit être montré à l’aide d’un masque circulaire animé d’un point au centre de l’image et agrandi pour afficher l’ensemble du “dossier”. Comment créer un masque animé arrondi qui révélera l’image “enregistrée” sans zoom / redimensionnement de 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 de ma part.

Merci.

Vous pourriez peut-être créer un grand PNG blanc (ou de couleur de fond) avec un trou de transparence alpha au centre. Placez-le sur l’image à révéler, puis redimensionnez-la en la maintenant épinglée au centre. Une fois l’image redimensionnée au point où toute l’image sous-jacente se trouve dans le trou transparent, supprimez l’image de couverture.

Je n’ai aucune idée de la façon dont cela fonctionnerait (probablement mal!), Mais c’est une pensée.

En règle générale, HTML se présente sous forme de rectangles. Si vous avez une image transparente, vous pouvez la redimensionner en gardant son centre constant.

Si vous souhaitez que cette option ne puisse être sélectionnée que dans le cercle, vous devez vérifier la coordonnée de la souris pour les opérations de clic afin de voir si elle se trouve dans le cercle, dans son rectangle. Voir: Comment faire que le survol déclenche une animation uniquement sur une zone de cercle dans un div avec une bordure de rayon avec jQuery

@ 6bytes suggéré d’utiliser des coins arrondis.

Chrome et FireFox entourent actuellement les coins arrondis via les atsortingbuts CSS border-radius et -moz-border-radius . Vous pouvez ainsi obtenir un cercle avec un rayon de bordure de 50% . Toutefois, il ne s’agit que d’une différence visuelle sur un rectangle sous-jacent. Les clics dans le rectangle comptent toujours pour le cercle lui-même.

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

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

Vous pouvez mettre du code pour vérifier si des clics sont dans le cercle pour résoudre ce problème.

Démo Circle Clicks: http://jsfiddle.net/rL4BU/4/