これは凄い！Web制作が捗るモーフィング系の最新スニペットまとめ
ある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。
Sponsored Link
背景色に合わせて、テキスト色をリバースさせる
DOM要素の重なりを指定するCSS3のブレンドモードmix-blend-mode: differenceを使って、背景色と同時にテキストカラーを反転させていく方法。CSSだけでこれができるのは驚き。
進捗を示すプログレスバーなどで使うと、コントラストがはっきりするので見やすくなりそうです。
mix-blend-modeの「 difference」についてはCSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう - ICS MEDIAに詳しく書かれてます。
対応状況：Can I use
3D Mall Map
SVGでインタラクティブな３D地図。モールや病院など、階層が複数ある地図を示したチュートリアル。現在位置をクリックで拡大表示後、クリックしたピンの詳細を表示。
弾けるようなモーショングラフィック
心地よいモーショングラフィックを作るならこれ！こちらでは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イベントを使い、マウスの動きを感知して、テキストに傾きを与えるシンプルなスニペット。
カーブ
スクロールによって曲線の角度を変化させていく方法。この変化を使っているサイトがまだ少なそうだったのでメモ。
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
この後によく読まれている記事
Comments
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
Leave a Comment