刀でズバッと斬るようなアニメーションをHTML・CSS・JS（jQuery）で実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近とある案件で「刀でズバッと切る感じのアニメーションを入れる」ってことになって、実装してみました。ゲームなどでよくある表現ですね。 やってみると、ポイントを押さえれば意外とシンプルに実装できたので、その方法をご紹介したいと思います。 はじめに 今回はこちらの画像を使いたいと思います。 我らが広報ヨシキさんです。 垂直か水平にズバッと斬るアニメーションなら比較的簡単なんですが、このような表現においてよく使うのは�斜めにズバッと斬るアニメーションだと思うので、そっちにしてみます。 素材となる画像を用意する まずはPhotshopで画像をつくります。 ズバッと斬るアニメーションを実装するには、元の画像から3つの画像をつくる必要があります。 上半分の画像 まずは上半分の画像をつくります。 では早速やってみまし

[ENJILOG]

もうちょっと他に無かったんだろうか。竹とかさ。

[younari]

めもる

[z1a2nh]

このタイミングをまってた

[hedeyoshi]

“※ヨシキさんへの悪意はありません ”

[Fushihara]

Macで書いたんだろうなと伝わるタイトルだ

[minonet]

刀でズバッと斬るようなアニメーションをHTML・CSS・JS（jQuery）で実装する方法 こんにちは。フロントエンドエンジニアのせいとです。 最近とある案件で「刀でぶったぎる感じのアニメーションを入れようぜ」って