Круглая маска на изображении, растущем из центра этого изображения

Question

Нажав на кнопку, мне нужно показать изображение виниловой пластинки. Изображение появится где-то рядом с кнопкой и станет прозрачным png, чтобы он выглядел кругом. Проблема заключается в том, что она должна отображаться с использованием круговой маски, анимации из точки в центре изображения и расширения, чтобы показать всю «запись». Как создать закругленную анимированную маску, которая откроет «запись» изображения без масштабирования/масштабирования изображения.

Кто-нибудь знает JavaScript или желательно библиотеку jQuery, способную на что-то подобное?

Если вы знаете о такой вещи на другом языке, это может помочь мне написать что-то свое.

Спасибо.

Answer 1

Может быть, вы могли бы создать большой белый (или фон цвета) PNG с альфа-прозрачностью отверстием в центре. Поместите это поверх изображения, которое будет показано, затем увеличьте его, удерживая его в центральной точке. После того, как он масштабируется до точки, где все базовое изображение находится в прозрачном отверстии, удалите покрывающее изображение.

Я понятия не имею, как это будет выполняться (возможно, плохо!), Но это мысль.

Answer 2

HTML поставляется в прямоугольниках, как правило, если у вас есть изображение с прозрачностью, то вы можете масштабировать его, сохраняя его постоянным по центру.

Если вам нужно, чтобы его можно было выбирать только в пределах круга, вам нужно будет проверить координату мыши для операций щелчка, чтобы увидеть, находится ли он внутри круга, внутри которого находится прямоугольник. См: How to make the hovering trigger an animation only on a circle area in a div with radius border with jquery

---

@ 6bytes предложил использовать закругленные углы.

В настоящее время Chrome и FireFox окружают круглые углы с помощью атрибутов CSS border-radius и -moz-border-radius, поэтому вы можете получить круг визуально с радиусом границы 50%. Однако это только визуальная разница в базовом прямоугольнике, клики внутри прямоугольника по-прежнему считаются находящимися на самом круге.

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

Basic Прямоугольник Demo: http://jsfiddle.net/rL4BU/2/

Вы можете поместить код, чтобы проверить, если щелчки в пределах круга, чтобы исправить это.

Circle Переходы Демо: http://jsfiddle.net/rL4BU/4/