katanaと見て、一体何のサイトだろうと思ったら金融系でした。

というのはさておき。

今回注目したのは、ページ遷移時に刀で一刀両断したような演出とビジュアル・アイデンティティを融合させたアニメーション。

名前の通り「katana」をイメージしたものだということは一目瞭然。かなり独自性の高い演出となっている。

SP版も動きは同様。

複数のSVG画像をtransformやtransitionを使ってアニメーションを制作。

とても珍しい動きに見えるが、実際に使っているオブジェクトや動きはシンプルな構造になっている。