BLOG
ブログ

チルチルミチルからのお知らせ・日々の出来事・
アウトプットの場所として日々更新しております。
時々地元クリエイターとのコラボブログもやってます!

2019.03.05

jQueryで作るパラパラ漫画(コマアニメーション)

6

こんにちは、梶原です。
画像が一定の速度で切り替わるパラパラ漫画のような表現のアニメーションをjQueryで作成してみました。

how to make

①まずは1コマ分のイラストが等間隔で並んだ1枚の画像を用意します。

②画像と1コマ分サイズのdivにpositionを指定し、
divの外側は非表示にして1コマ分のイラストのみ表示されるようにします。

③jQueryで画像の位置を一定の時間間隔で動かしてパラパラ漫画風のアニメーションを演出します。
今回はボタンをクリックするとアニメーションがスタートするようにしました。

preview

赤いボタンをクリックしてみてください。

See the Pen Moon Walk by Airi Kajihara (@kajihara) on CodePen.0


…手作り感が満載なっ…、実に味のある動きに仕上がりました!笑
もっと、こ〜、私の中ではかっこよくムーンウォークしてくれるイメージでいたんですけどね(・ω・)
タイトルは「ムーンウォークをしたかった人」にしましょう。
ちなみにムーンウォークは、頭の高さを固定して、かかとを地面につけたまま後ろに動かし、ステップを切り替える直前でかかとを上げるのがコツです。
わかっていても実際に歩くのはもちろんパラパラ漫画ですら、あのキレのある動きは難しいですね。

結論、マイケル・ジャクソンは素晴らしいです。

<参考>
jQuery 仕事の現場でサッと使える! デザイン教科書

ヨカね!

この記事が面白かったらポチッってください!

Contact