プログラミング

JavaScriptでパラパラまんがをつくってみた

こんにちは、アヤカルです。

みなさんも一度は描いたことがあるのではないでしょうか?ぱらぱら漫画。

ほら、日本史の教科書の片隅に、あ、世界史にも、国語にも、あら生物の教科書にも…(描きすぎ=集中してないw)

そんなことを思い出し、こんなものを作ってみました。スクロールに合わせて画像が動きます。

原理は本当にあのパラパラ漫画と同じ。
画像をぱらぱらさせたいだけ用意して、次々と表示させています。

せっかくなので、コードについてもまとめておこうと思います。

1使用した画像

adobe の illustratorを使用して描いてみました。

え?illustratorつかって?これ?

というツッコミは無視です。画像ファイルのタイトルは”image3″のように”image” +”数字”というような形式にしました。この数字を元に画像を変えて行こうという魂胆。

2 HTMLとJavaScript

HTMLはこれだけ。この<div id=”root”>にjavascriptから画像をはめ込む感じになります。

<divclass=”container”>
   <h1>ParaPara anime</h1>
   <p>Mochi jumps to your scroll.</p>
   <divid=”root”></div>
</div>

Jacascriptはこんな感じ。

<script>
// 下ごしらえ
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で全てのコードを見ることができるので、もしよろしければ。

ではまた〜

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です