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

ある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。
エンジニア速報は Twitter の@commteで配信しています。
背景色に合わせて、テキスト色をリバースさせる
DOM要素の重なりを指定するCSS3のブレンドモードmix-blend-mode: difference
を使って、背景色と同時にテキストカラーを反転させていく方法。CSSだけでこれができるのは驚き。
進捗を示すプログレスバーなどで使うと、コントラストがはっきりするので見やすくなりそうです。
mix-blend-modeの「 difference」についてはCSS3のブレンドモードが素敵! 新プロパティmix-blend-modeを使いこなそう - ICS MEDIAに詳しく書かれてます。

対応状況:Can I use
3D Mall Map
SVGでインタラクティブな3D地図。モールや病院など、階層が複数ある地図を示したチュートリアル。現在位置をクリックで拡大表示後、クリックしたピンの詳細を表示。
弾けるようなモーショングラフィック
心地よいモーショングラフィックを作るならこれ!こちらではJavaScriptライブラリであるmo.jsを使って、弾けるようなアニメーションを表現。簡単なコードでDOM要素を複雑にアニメーションできるので要チェックです。使い方は、tutorialsで。
バブル
クリックすることによって、泡が弾けるバブルのようなアクションがおこり、レイヤーが画面全体に広がります。音注意。
サーチボックス
サーチ系アイコンをクリックするとサーチボックスを展開するトリッキーなエフェクト。シンプルながらも、少ないスペースで変化を楽しめるモーフィング。閉じる時のアニメーションもおさまりがよくて綺麗です。
See the Pen morphing search input by Gregor Adams (@pixelass) on CodePen.
背景画像とカーソルを連動
ユーザーのマウスカーソルを感知し、背景画像を動かすオブジェクト。
SVGメニューを美しく動かす
グラフやアイコンの拡大・縮小などの要素にはSVGを使うと美しく見えます。
こちらは、今までに無かったハンバーガーメニューの動きを表現するためのチュートリアル。SVGのアニメーションを実現するsegmentを使って、メニューアイコンを実装する方法。
SVGをいろいろ動かす
SVG画像をアニメーションさせながら描写する「DrawSVG」。画像を少しづつ露出させるマスクや、スクロール量を感知しアニメーションさせるDraw on scrollなど面白い動きを演出できます。
スクロールで波を作る
画像をドラッグして持ち上げると、背景画像が波打ちながら切り替わります。こういったエフェクトは今まで見たことがなかったので新鮮でした。リンク先はcss-tricksによるチュートリアルです。
チルト
mousemoveイベントを使い、マウスの動きを感知して、テキストに傾きを与えるシンプルなスニペット。

カーブ
スクロールによって曲線の角度を変化させていく方法。この変化を使っているサイトがまだ少なそうだったのでメモ。
スポンサード リンク
関連記事
- 今どきのプログラマー向け社内共有ツール
- Mac初心者おすすめ!フロントエンドやコーダー向け初期設定
- CSSだけでOK!レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー
- デベロッパーにおすすめのATOM開発系ダークテーマ
- CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10
- モダンなフォームを作るために覚えておきたいCSSの擬似クラス
- object-fit・currentColor・will-change・image-renderingなどマイ...
- CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ
- 聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能
- スクロールした時に面白いエフェクトを出すためのアイデアまとめ
Leave a Comment