WEB制作ではスプリットスクリーンなどが極端な例ですが、中央線を軸に左右を大胆に振り分けて使う手法が流行の一つになっていますが、今日紹介するのは、異なるものではなく、一つのオブジェクトをミラーリングして表現できるライブラリ「Mirror Effect」です。

Mirror Effect | Demo 3 | Codrops

単純に全く同じものを出現させることもできますし、上記のように背景を切り分けて表示することもできます。いくつかのパターンが公開されていましたので以下からご覧ください。

詳しくは以下

静止画で見るとシンプルな表現ですが、アニメーションやマウスに追従してオブジェクトが動いたりと立体的な動きを加えることでインパクトを与えています。

今までのデザインにはない少し変わった表現を取り入れてみたいという方には良いライブラリだと思います。ソースはGithubで公開されており、個人・商用問わず、無料で利用可能です。

Mirror Effect | Codrops
GitHub – codrops/MirrorEffect: Mirror effect as seen around the Web lately, i.e. on Corentin Fardeau's and Method's website. The idea is to mirror an image and animate it within the context of a slideshow.