私はjavascriptでパーティクルシステムを作成しました。ユーザーがボタンの上を移動するたびに、関数が呼び出され、1つのパーティクルが作成された後、それを不可視divに割り当てます。パーティクルはdivの下部から上部に移動します。問題は、これらの粒子がdivの正方形の形で動くことです。しかし、私はこれらの粒子を多角形にマスクする必要があります。このポリゴンからすべてのパーティクルが移動して、不可視になります。私はその問題を見つけた。適切な例が見つからない。マスクマスクは、CSSマスクを使用してjavascriptで作成されました
1
A
答えて
1
私はあなたを正しく理解しているかどうかは完全にはわかりませんが、私の理解に基づいて次のスニペットを作成しました。赤い四角を動かしてみてください。それは、六角形の形で切り取る必要があります。あなたは簡単にマスクを作成することができますhere。
このコードはCSSのclip-path
プロパティに基づいています。このプロパティを使用すると、HTML要素の内容をクリッピングするマスクとして機能するパスを定義できます。 thisとthisの記事をご覧ください。
私は2 div
を作っています。 1つはコンテナ(#box
)で、2番目はコンテナの子(#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>
関連する問題
- 1. CSS/JQueryでマスクされたギャラリーを作成する
- 2. JavaScript JQUERYまたはCSSを使用してExpandable Top Barを作成する
- 3. JavaScriptを使用して作成された匿名関数eval()
- 4. CSSを使用して背景イメージをマスクできますか?
- 5. CSSまたはJavaScriptを使用してリンクが動作していますか?
- 6. カスタムアタッチされたデータを使用したJavaScriptイベントの作成
- 7. JavaScriptを使用してCSSスタイルシートを作成する
- 8. JavaScriptを使用してCSSセレクタを作成する
- 9. PHPまたはJavaScriptを使用してアプリケーションを作成する
- 10. CSSを使用したドロップダウンメニューの作成
- 11. JavaScriptまたはCSSを使用して隠しボタンを表示
- 12. テキストを使用して図形上にマスクを作成します。
- 13. onclickを使用して作成されたdivの中にjavascriptでonclickを使用して新しいdivを作成しますか?
- 14. CSSマスクがFirefoxで動作しない
- 15. 新しく作成された要素でJavascriptを使用してオートフォーカスする方法はありますか?
- 16. jQueryまたはJavaScriptを使用したURLの作成
- 17. IE9でJavaScriptを使用してGUIDを作成しますか?
- 18. imwriteを使用して作成されたファイルは表示されません
- 19. 異なるサイズの2つの画像を使用してCSSまたはJavascriptでロールオーバーを作成する
- 20. CSS&Javascriptを使用してDivのスクロール行を作成するには?
- 21. msbuildを使用してCSSスプライトを作成しますか?
- 22. JavaScript上でCSS上に問題が発生しました.HTMLオブジェクトが作成されました
- 23. CSSのグラデーションを使用して破線の境界を作成しました
- 24. Flex - Javascriptを使用してArrayCollectionに生成されたXML
- 25. ウェブアプリケーションで作成されたangularjsを使用してウェブアプリケーションを作成
- 26. YARDを使用してメタプログラミングで作成されたドキュメント化メソッド
- 27. ウィザードを使用したVSカスタムテンプレートは作成されません
- 28. Javascriptで生成されたコンテンツはCSSクラスを無視しますか?
- 29. html css javascript jqueryでナビゲーションメニューを作成していますか?
- 30. マスクされた四角形をプログラムで作成する
粒子は、単一の画像です。この関数はイメージ要素を作成し、それをdivのIDの中心に追加します。 – cool
ポリゴンの顔は何ですか?あなたは例を描けますか? – jonathanGB
div内の単純な六角形です。 – cool