design

画像をドラッグ&ドロップでコピーしてトッピング


画像をドラッグ&ドロップでコピーしてトッピング



パソコン内の動作でもメジャーな動作のドラッグ&ドロップ。
WEBサイト上でも画像を掴んで移動できるように作れば、
色々なアイデアが実現します。

例えば美味しいパンケーキに、楽しくトッピングしていくようなページを作ることも出来ます。

【怖くないJavaScript + jQuery】ドラッグで要素を移動させる
http://blog.8bit.co.jp/?p=9875

スタイリングや部屋のインテリア…PC上でシュミレーションすれば
ユーザーが楽しみながらコンテンツを知ることが出来ます。

カテゴリー: design | コメントをどうぞ

パンの形をしたサムネイルがふんわりと現れる画像リスト


パンの形をしたサムネイルがふんわりと現れる画像リスト



最近は店舗や会社でもブログを更新することが増えています。
みなさんはどんなデザインのブログを使っていますか?

ページを読み込んで画像が表示される際に、
ふんわりと焼きたてのパンのように
アクションをして現れます。
マウスオーバー時もアクションが起こります。

画像表示時アクション wow.js
http://coliss.com/articles/build-websites/operation/javascript/js-wow.html

マウスオーバー時アクション Hover.css
http://ianlunn.github.io/Hover/


ブログの記事一覧や商品リストなど画像が並ぶことは多いですが、
サムネイルをちょっと違った形やアクションにするだけで、とても印象的になります。

カテゴリー: design | コメントをどうぞ

背景スライドショーで見せる動画ギャラリー


背景スライドショーで見せる動画ギャラリー



動画を背景でギャラリーとして見せることで
閲覧され辛い動画というコンテンツをユーザーに届け易くなります。
また、1つ1つではコンテンツとして弱い動画でも、
全体の雰囲気を感じてもらえるような印象的な演出として使うことができます。
今回はbigvideo.jsというjsを使用しています。

http://tympanus.net/codrops/2012/09/19/fullscreen-video-slideshow-with-bigvideo-js/

データ元
bigvideo.js

空間の全体・お店の営業風景からイメージビデオまで
様々なシーンで応用できる動画ギャラリーです。

カテゴリー: design | コメントをどうぞ

流れ星の振る天体グラフィック

iPhoneなどスマートフォンの普及により、FLASHが減ってきました。
代わりに台頭したjs、jqueryなどで作れるグラフィックやページを紹介を始めます。


流れ星の振る天体グラフィック



今回は回転する天体に流れ星が降り注ぐグラフィック。
ふたつのjsを使用しています。

夜空に流星を流すjQueryプラグイン『shootingstar.js』
画像を回転させるjQueryプラグイン「jQueryRotate.js

画像・流れ星の色も変更することが出来るので
傘の上に雨が降るグラッフィックなど、かんたんに応用が出来ます。

カテゴリー: design | コメントをどうぞ