今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 2016/2.21～2.27
Phive(WEBサイト)
ポルトガルのトレーニング・フィットネスジムのWEBサイト。インタラクションが非常にリッチ。ローディングも遊び心があってかわいいです。
Snap by Elica(WEBサイト)
イタリアの空気清浄機「elica」のブランドサイト。プロダクトのデザインと合わせたの円形ナビなどに注目しました。
helmade Helmet Designs(WEBサイト)
メットデザイン専門のサービスサイト。ビビッドなグラデーションが気持ちいい。自分好みのカラーデザインを確認するデモページもあります。
SVG clip-path Hover Effect(サンプルソース)
http://codepen.io/noeldelgado/pen/PZJGLx
svgのclippathをつかったhoverインタラクションのサンプルソース。マスクが使えると表現力の幅が広がりますね。
Git snippet(プラグイン)
Github Bitbucket,Github Bitbucket,Gitlabのリポジトリから必要な行だけを抜き取れるプラグイン。URLと開始と終わりの行数を入れるだけ。
Spring/Summer(WEBサイト)
コペンハーゲンを拠点にしている制作会社サイト。左に固定されたバーがナビ、タイトル、プログレスバーなどの役割に変化。ページ遷移やhoverインタラクションなどにも注目しました。
Polaroid Stack to Grid Intro Animation(サンプルソース)
http://tympanus.net/codrops/2016/02/17/polaroid-stack-to-grid-intro-animation/
フォトギャラリー向けのソースサンプル。バラバラにおかれた画像がスクロールでグリッド位置に並ぶアニメーション。IE11以降。
jquery.easypin(プラグイン)
http://atayahmet.github.io/jquery.easypin/index.html
レスポンシブなどで使われるリキッドな画像の座標を取得出来るプラグイン。ドラッグで座標を動かしたり、ツールチップ、マーカー機能もあります。
Creative SVG Letter Animations(サンプルソース)
http://tympanus.net/codrops/2016/03/02/creative-svg-letter-animations/
svgを使ったアニメーションサンプルソース。svgならではの曲線を上手く使ったフォントアニメーション。
Related posts
