クリックで色を飛びちらせたい
任天堂ゲーム「スプラトゥーン」のような色の飛び散り具合を表現したいのですが、どのように行えば良いのでしょうか?
index.html
1<div class="box"></div>
style.css
1.box{ 2 width: 700px; 3 height: 466.3px; 4 background: red; 5 position: absolute; 6 left: 50%; 7 -webkit-transform: scale(1) translate(-50%); 8 transform: scale(1) translate(-50%); 9 animation: shake .3s infinite; 10} 11 12.scale{ 13 position: absolute; 14 left: 50%; 15 animation: scale 2s 1; 16} 17 18@keyframes shake { 19 0% { left: 32.2%; transform: translate(-50px, 0px) rotateZ(0deg)} 20 25% { left: 32.2%; transform: translate(-52px, 2px) rotateZ(1deg)} 21 50% { left: 32.2%; transform: translate(-50px, 2px) rotateZ(0deg)} 22 75% { left: 32.2%; transform: translate(-52px, 0px) rotateZ(-1deg)} 23 100% { left: 32.2%; transform: translate(-50px, 0px) rotateZ(0deg)} 24} 25 26@keyframes scale{ 27 0%{ left: 50%; 28 border-radius: 0; 29 transform: scale(1) translate(-50%); } 30 30%{ background: green;} 31 40%{ background: yellow;} 32 100%{ left: 30%; 33 border-radius: 100%; 34 background: blue; 35 transform: scale(0) translate(-50%); } 36} 37
main.js
1$(function(){ 2$('.box').on('click', function(){ 3 $(this).addClass("scale"); 4 }); 5 6 $('.box').on('click', function(){ 7 $(this).delay(2000).queue(function(next){ 8 $(this).removeClass("box"); 9 next(); 10 }); 11 }); 12)};
##ゴール
divで作った四角をクリックしたら、サークル状に収縮していき、絵の具が周囲に弾けてそれが背景になる。
イメージは画像のような感じです。
##試したこと
divで作った四角をクリックしたら、サークル状に収縮していくまではできたのですが、そこから色を飛び散らす処理が思い浮かびません。
どのような方法を取ればいいかご教授願います。
宜しくおねがいします。
あなたの回答
tips
プレビュー