calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

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

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

Sponsored Link

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

mix-blend-mode

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

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

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

blend-caniuse

対応状況：Can I use

3D Mall Map

map

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

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

mojs

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

バブル

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

サーチボックス

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

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

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

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

cursorbg

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

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

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

svg_menu

SVGをいろいろ動かす

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

drawsvg

スクロールで波を作る

dragbg

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

チルト

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

tilt

カーブ

curved

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

スポンサード リンク

この記事を書いた人
投稿者：commte

株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。