Частицы маски, созданные javascript с использованием маски CSS

Question

Я создал систему частиц с javascript. Каждый раз, когда пользователь наводится над кнопкой, вызывается функция, и создается отдельная частица, затем я назначаю ее невидимому div. Частица движется со дна дива в верхнюю. Проблема состоит в том, что эти частицы движутся в квадратной форме div. Но мне нужно скрыть эту частицу до формы многоугольника. Каждая частица выходит из этого многоугольника, становится невидимой. Я искал эту проблему - не повезло найти подходящий пример.

Answer 1

Я не совсем уверен, правильно ли я вас понял, но, основываясь на своем понимании, я создал следующий фрагмент. Попробуйте переместить красный квадрат. Его следует обрезать шестиугольной формой. Вы можете легко создать свои маски here.

Код основывается на свойстве CSS clip-path, которое позволяет вам определить путь, который функционирует как маска, отсекая содержимое элемента HTML. Взгляните на статью this и this.

Я сделал 2 div s. Один представляет собой контейнер (#box), а второй является дочерним элементом контейнера (#polygon). #polygon заполняет все пространство его родителя, и к нему применяется свойство clip-path. Наконец, частица находится внутри #polygon. Оба #polygon и #box имеют свойство CSS overflow: hidden.

$('#particle').draggable()

#box { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: purple; 
 
    margin: 50px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
#polygon { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height:100%; 
 
    -webkit-clip-path: polygon(51% 21%, 79% 35%, 79% 70%, 53% 87%, 25% 72%, 24% 37%); 
 
    clip-path: polygon(51% 21%, 79% 35%, 79% 70%, 53% 87%, 25% 72%, 24% 37%); 
 
} 
 

 
#particle { 
 
    width: 10px; 
 
    height: 10px; 
 
    margin: 50px; 
 
    background: red; 
 
    position:absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 

 

 
<div id="box"> 
 
    <div id="polygon"> 
 
     <div id="particle"></div> 
 
    </div> 
 
</div>