これは凄い！Web制作が捗るモーフィング系の最新スニペットまとめ

• 作成：2016/04/25
• 更新：2016/06/29
• Web制作 >

ある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。

エンジニア速報は Twitter の@commteで配信しています。

背景色に合わせて、テキスト色をリバースさせる

DOM要素の重なりを指定するCSS3のブレンドモードmix-blend-mode: differenceを使って、背景色と同時にテキストカラーを反転させていく方法。CSSだけでこれができるのは驚き。

進捗を示すプログレスバーなどで使うと、コントラストがはっきりするので見やすくなりそうです。

mix-blend-modeの「 difference」についてはCSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう - ICS MEDIAに詳しく書かれてます。

• CSS-Tricks

対応状況：Can I use

3D Mall Map

SVGでインタラクティブな３D地図。モールや病院など、階層が複数ある地図を示したチュートリアル。現在位置をクリックで拡大表示後、クリックしたピンの詳細を表示。

• Interactive 3D Mall Map | Codrops

弾けるようなモーショングラフィック

心地よいモーショングラフィックを作るならこれ！こちらではJavaScriptライブラリであるmo.jsを使って、弾けるようなアニメーションを表現。簡単なコードでDOM要素を複雑にアニメーションできるので要チェックです。使い方は、tutorialsで。

• Icon Animations Powered by mo.js | Codrops
• mo · js

バブル

クリックすることによって、泡が弾けるバブルのようなアクションがおこり、レイヤーが画面全体に広がります。音注意。

• ·•● Bubble • Layout ●•·

サーチボックス

サーチ系アイコンをクリックするとサーチボックスを展開するトリッキーなエフェクト。シンプルながらも、少ないスペースで変化を楽しめるモーフィング。閉じる時のアニメーションもおさまりがよくて綺麗です。

See the Pen morphing search input by Gregor Adams (@pixelass) on CodePen.

• morphing search input

背景画像とカーソルを連動

ユーザーのマウスカーソルを感知し、背景画像を動かすオブジェクト。

• peachananr/interactive_bg
• jQuery Interactive BG by Pete R

SVGメニューを美しく動かす

グラフやアイコンの拡大・縮小などの要素にはSVGを使うと美しく見えます。

こちらは、今までに無かったハンバーガーメニューの動きを表現するためのチュートリアル。SVGのアニメーションを実現するsegmentを使って、メニューアイコンを実装する方法。

• Animating an SVG Menu Icon with Segment | Codrops

SVGをいろいろ動かす

SVG画像をアニメーションさせながら描写する「DrawSVG」。画像を少しづつ露出させるマスクや、スクロール量を感知しアニメーションさせるDraw on scrollなど面白い動きを演出できます。

• jQuery DrawSVG

スクロールで波を作る

画像をドラッグして持ち上げると、背景画像が波打ちながら切り替わります。こういったエフェクトは今まで見たことがなかったので新鮮でした。リンク先はcss-tricksによるチュートリアルです。

• Creating Wavescroll | CSS-Tricks

チルト

mousemoveイベントを使い、マウスの動きを感知して、テキストに傾きを与えるシンプルなスニペット。

• 3D hover plane effect

カーブ

スクロールによって曲線の角度を変化させていく方法。この変化を使っているサイトがまだ少なそうだったのでメモ。

• Curved Cut