この記事を三行にまとめると
ハーマンパスカードを入れ替える
カードを徐々に消す
この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。
カードを入れ替える
<div style="display:flex;align-items:center;justify-content:center;height:100vh">
<img src="spade.png" id="card" style="max-width:80%" alt="カード" />
</div>
<script>
card = document.getElementById('card');
window.addEventListener('devicemotion', function(event){
if(event.acceleration.x >= 10 || event.acceleration.y >= 10) {
card.src = 'heart.png';
}
})
</script>
カードを徐々に消す
<div style="display:flex;align-items:center;justify-content:center;height:100vh">
<img src="spade.png" id="card" style="max-width:80%;opacity:1" alt="カード" />
</div>
<script>
card = document.getElementById('card');
window.addEventListener('devicemotion', function(event){
if(event.acceleration.x >= 10 || event.acceleration.y >= 10) {
if(card.style.opacity >= 0) {
card.style.opacity -= 0.01;
}
}
})
</script>