こんにちは、アヤカルです。
みなさんも一度は描いたことがあるのではないでしょうか？ぱらぱら漫画。
ほら、日本史の教科書の片隅に、あ、世界史にも、国語にも、あら生物の教科書にも…（描きすぎ＝集中してないw）
そんなことを思い出し、こんなものを作ってみました。スクロールに合わせて画像が動きます。
原理は本当にあのパラパラ漫画と同じ。
画像をぱらぱらさせたいだけ用意して、次々と表示させています。
せっかくなので、コードについてもまとめておこうと思います。
１使用した画像
adobe の illustratorを使用して描いてみました。
え？illustratorつかって？これ？
というツッコミは無視です。画像ファイルのタイトルは”image3″のように”image” +”数字”というような形式にしました。この数字を元に画像を変えて行こうという魂胆。
２ 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で小数点以下を四捨五入しました。
そして今回、目から鱗だったのがこれ！％１２！これが無限パラパラを可能にしてくれています。
というのも、これは「１２で割った数のあまりの値」を返しているのですが、これによって数値がつねに0~11の間に収まるんです！言われてみれば「なるほどね！」という感じです。アハ！
と脳を刺激しつつ、おわってみればこんなにあっさりとしたコードに。
わたしのGitHubで全てのコードを見ることができるので、もしよろしければ。
ではまた〜
