今週の気になるWEBサイト・アプリUI/UX&デジタル広告・サービス 2016/2.21~2.27

Phive(WEBサイト)

160325_09

http://phive.pt/en/

ポルトガルのトレーニング・フィットネスジムのWEBサイト。インタラクションが非常にリッチ。ローディングも遊び心があってかわいいです。

Snap by Elica(WEBサイト)

160325_02

http://snap.elica.com/it/

イタリアの空気清浄機「elica」のブランドサイト。プロダクトのデザインと合わせたの円形ナビなどに注目しました。

helmade Helmet Designs(WEBサイト)

160325_01

https://www.helmade.com/en/

メットデザイン専門のサービスサイト。ビビッドなグラデーションが気持ちいい。自分好みのカラーデザインを確認するデモページもあります。

SVG clip-path Hover Effect(サンプルソース)

160325_03

http://codepen.io/noeldelgado/pen/PZJGLx

svgのclippathをつかったhoverインタラクションのサンプルソース。マスクが使えると表現力の幅が広がりますね。

Git snippet(プラグイン)

160325_04

https://www.gitsnippet.com/

Github Bitbucket,Github Bitbucket,Gitlabのリポジトリから必要な行だけを抜き取れるプラグイン。URLと開始と終わりの行数を入れるだけ。

Spring/Summer(WEBサイト)

160325_05

http://springsummer.dk/

コペンハーゲンを拠点にしている制作会社サイト。左に固定されたバーがナビ、タイトル、プログレスバーなどの役割に変化。ページ遷移やhoverインタラクションなどにも注目しました。

Polaroid Stack to Grid Intro Animation(サンプルソース)

160325_06

http://tympanus.net/codrops/2016/02/17/polaroid-stack-to-grid-intro-animation/

フォトギャラリー向けのソースサンプル。バラバラにおかれた画像がスクロールでグリッド位置に並ぶアニメーション。IE11以降。

jquery.easypin(プラグイン)

160325_07

http://atayahmet.github.io/jquery.easypin/index.html

レスポンシブなどで使われるリキッドな画像の座標を取得出来るプラグイン。ドラッグで座標を動かしたり、ツールチップ、マーカー機能もあります。

Creative SVG Letter Animations(サンプルソース)

160325_08

http://tympanus.net/codrops/2016/03/02/creative-svg-letter-animations/

svgを使ったアニメーションサンプルソース。svgならではの曲線を上手く使ったフォントアニメーション。

Share

  • このエントリーをはてなブックマークに追加
  • 28

Follow(SNSで定期購読)

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>