こんにちは、アヤカルです。
みなさんも一度は描いたことがあるのではないでしょうか?ぱらぱら漫画。
ほら、日本史の教科書の片隅に、あ、世界史にも、国語にも、あら生物の教科書にも…(描きすぎ=集中してないw)
そんなことを思い出し、こんなものを作ってみました。スクロールに合わせて画像が動きます。
原理は本当にあのパラパラ漫画と同じ。
画像をぱらぱらさせたいだけ用意して、次々と表示させています。
せっかくなので、コードについてもまとめておこうと思います。
1使用した画像
adobe の illustratorを使用して描いてみました。
え?illustratorつかって?これ?
というツッコミは無視です。画像ファイルのタイトルは”image3″のように”image” +”数字”というような形式にしました。この数字を元に画像を変えて行こうという魂胆。
2 HTMLとJavaScript
HTMLはこれだけ。この<div id=”root”>にjavascriptから画像をはめ込む感じになります。
Jacascriptはこんな感じ。
// 下ごしらえ
let countUp = 0;
let y = 0;
// imgタグをつくっています
const img = document.createElement(‘img’);
img.setAttribute(‘alt’, ‘motchi’);
// スクロールによる動作を設定しています
window.addEventListener(‘scroll’, function () {
y = window.pageYOffset;
countUp = Math.round(y / 100) %12; //
document.getElementById(‘root’).appendChild(img);
img.setAttribute(‘src’, `./images/image${countUp}.svg`);});
</script>
window.addEventListener(’scroll’, function())
スクロールをトリガーとした動作をセットすることができます。
この’scroll’をclickやkeydownにするとクリック時の動作やキーを押したときの動作を設定できます。
window.pageYOffset
これでトップから現在地までのスクロール量を計っています。
ここで取得した数値によって画像が入れ替わるようにしています。
ただそのままの数値だと使いにくいので、100で割って数を小さくし、Math.roundで小数点以下を四捨五入しました。
そして今回、目から鱗だったのがこれ!%12!これが無限パラパラを可能にしてくれています。
というのも、これは「12で割った数のあまりの値」を返しているのですが、これによって数値がつねに0~11の間に収まるんです!言われてみれば「なるほどね!」という感じです。アハ!
と脳を刺激しつつ、おわってみればこんなにあっさりとしたコードに。
わたしのGitHubで全てのコードを見ることができるので、もしよろしければ。
ではまた〜