ランダムな整数が欲しい!
そんなときはこの処理を使おう!
自分がよく使っている関数です。
const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
なんのこっちゃない処理ですが
ブラウザゲーム作成時によく使います。
rand(1, 10) //1〜10までのランダムな整数を返してくれます
いろいろと応用が効くので使いやすい。
DOM操作時でも、例えばランダムに画面外からやってくる感じを演出するときにも使えます。
element.style.transform = `translate(${rand(-100, 100)}%, ${rand(-100, 100)}%)`
とかってしてやると
縦軸、横軸ランダムな位置に配置することができるので、
css animationと組み合わせてやると
ランダムな位置に発生して所定の位置へ移動してくる動きを要素に与えることができます。
const els = document.querySelectorAll('[class^=devicon-]')
els.forEach(el => {
el.style.transform = `translate(${rand(-100, 100)}%, ${rand(-100, 100)}%)`
el.classList.add('icon-move')
setInterval(() => {
el.style.zIndex = this.rand(-1, 1)
}, this.rand(4000, 8000))
})
4秒から8秒のうちランダムな秒数後にz-indexを上げ下げすることで表示、非表示をコントロールしています。
実際に私のポートフォリオの「study」ページにて使用していますので
ぜひ動きをみてにきてください。