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

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

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

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

Спасибо.

Ответ 1

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

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

Ответ 2

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

Если вам нужно, чтобы его можно было выбирать только внутри круга, вам нужно будет проверить координату мыши для операций щелчка, чтобы увидеть, находится ли она внутри круга, внутри которой содержится прямоугольник. Смотрите: Как сделать зависающий триггер анимацией только в области круга в div с границей радиуса с jquery

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

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

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

Основная демонстрация Rectangle: http://jsfiddle.net/rL4BU/2/

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

Круг кликов Демо: http://jsfiddle.net/rL4BU/4/