Kunitaka Kawashimo アートディレクター・デザイナー・フォトグラファー。株式会社クリーム代表取締役。グラフィックデザイン／Webデザイン／撮影の仕事のご相談・ご質問は、お気軽に以下までご連絡ください。info@creamu.co.jp

ページ上のボタンやテキストなどにclassを追加するだけで、簡単にソーシャルメディアのボタンをかっこよく設置できるjQueryのプラグインを紹介します。 #50C1AL #50C1AL -GitHub #50C1ALの特徴 #50C1ALのデモ #50C1ALの使い方 #50C1ALの特徴 主要なソーシャルディアを簡単にウェブページに設置できます。 46種類のかっこよくデザインされたアイコンを用意。 ページへの設置は、classを書くだけ！ 同じページに複数の設定を設置可能。 アニメーションやブラーなど多彩なオプション。 #50C1ALのデモ デモでは、ページ内に2つの設定を配置しています。 まずは、ボタンの方から。 テキスト選択で表示 #50C1ALの使い方 Step 1:外部ファイル まずは、head内に外部スタイルシートを配置します。 <link rel="stylesheet" h

jsMovie - jquery plugin - for image - sequence animation - without flash html5 アニメGIFでもHTML5でもFlash動画でもない動画を実装できる「jsMovie」 JSで連番の画像を切り替えて再生する方式の動画実装ライブラリ。 再生、停止、一時停止、リピート等のボタンも付けられ、まるで従来の動画のように使えますが実際は 001.jpg といった連番画像。 複数の画像があって、これを動画のように再生したい、という場合に使えそうですね 関連エントリ 動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン 動画以外を暗転させて動画を見やすくしてくれるjQueryプラグイン「Allofthelights.js」 Youtube動画とSlideshareのスライドを同期して再生できる「Presen

Textualizer | K. Risk - JavaScript Refined 面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」 テキストが歯抜けの状態から、アニメーションしながらテキストが埋められたり、既存アルファベットから別の文字列に変化させたりと、面白いテキストアニメーションが実現可能。 実際にデモを見ていただくのが一番分かりやすいです。 スピード等もオプションで指定可能。 $(element).textualizer( param ); で簡単に実現 テキストアニメーションならFlash、というような時代もありましたが、JavaScriptの方がお手軽でいいな、という時代になった気がします。 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 テキストを部分的にカッコよくアニメーショ

地図や動画、なんでも重力を付けてしまえるjQueryプラグイン「box2d-jquery」 2012年12月19日- franzenzenhofer/box2d-jquery GitHub 地図や動画、なんでも重力を付けてしまえるjQueryプラグイン「box2d-jquery」。 一見普通のサイトに重力を与えることでサイトが崩壊し面白いエフェクトをかけられるjQueryプラグインです。 box2dというライブラリは数年前に話題になりましたが、そのjQuery版がgithubにて公開されています。 重力によってアイテムが崩壊していき、それぞれドラッグ＆ドロップが可能。 デモで面白いのは、地図や動画がマウスで投げられるところ。 動画にも重力。動画は問題なく再生されています。 ゲームに活用したり、エイプリルフールネタや、キャンペーンサイトにインパクトを与えたりと、覚えておけば使えそうですね 関

BackgroundImageでスプライトアニメーションさせるjQueryプラグイン「AniDG」 2012年11月30日- jQuery Plugin for Cartoon-like Background Image Sprite Animation ? AniDG ? (alernative to animated Gif) HTML, HTML5, CSS, CSS3, JQuery, Flash, Photoshop, mobile, iphone & ipad web application BackgroundImageでスプライトアニメーションさせるjQueryプラグイン「AniDG」。 １枚の画像をJavaScript を使い、背景画像を順番に切り替えていくことでアニメーションさせられます background-image の書き換えなので、要素の中に何か入っていてもよい

equalize.js 高さや幅が不揃いのDOM要素を同じ高さ・幅にします。 height, width, outer-, inner- に対応

どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」 2012年11月21日- any list scroller - jQuery scrolling plugin by musings.it to scroll any list with any content - musings.it web design and development どんなリストも横スクロールさせられるjQueryプラグイン「any list scroller」。 <ul><li>なリストを初期化すれば次のようなスクロールするUIに変化するみたい。 表示アイテム数の他、アイテムの間隔など細かい所もオプションやCSSで制御できるようです 動作原理は以下のようになっているらしい。 このてのスクロール系ライブラリは豊富にありますが、１つの選択肢として覚えておいてもよさそう。

jQuery Burn テキストを燃え上がらせられるjQueryプラグイン「jQuery Burn」。 テキストに次のようにグラデーションのアニメーションをかけてテキストを燃焼させられます。 <h1 class="burning">I'm on fire!</h1> というマークアップに対して以下のように初期化するだけです <script> $('.burning').burn(); </script> アニメーションも細かなカスタマイズが可能 燃え上がんれ、燃え上がんれ、ガンダム 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 テキストを部分的にカッコよくアニメーションさせつつ切替え可能にするjQueryプラグイン「dynamo.js」 faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Fa

Baraja: A Plugin for Spreading Items in a Card-Like Fashion | Codrops カードを華麗に動かすアニメーションの実装ｊQueryプラグイン「Baraja」。 カードをシャッフルしたり広げたり、自在に操るアニメーションエフェクトを作成できるjQueryプラグイン。 こんなアニメーション機能が、ほとんどのブラウザでも使えたらまさに次世代になったなぁと実感できるのかも。 将来的はWEBはもっともっとリッチになっていそうです 関連エントリ アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」 クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」 ２Dゲームが作れそうなアニメーションjQueryプラグイン「Motio」

ZyngaScroller by TimHeckel ブラウザ上でスマホ風スクロールを実現できる「ZyngaScroller」。 ブロック内をスマホ風にスクロールできつつ、更に２個ブラウザを開くいて１個操作すると、それぞれが動くというデモを実現するjQueryプラグインです。 デモページ スマホ風スクロールは便利そうですね。 ブラウザの同期部分の使い所はちょっと考えましたがよく思いつかなかったものの、面白かったのでご紹介。 関連エントリ アイテムベースのスクロールを実現できるjQueryプラグイン「Sly」 使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」 スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」 スクロールすると巻物風にコンテンツが回転するUIを作れる「FoldSc

Motio - jQuery plugin ２Dゲームが作れそうなアニメーションjQueryプラグイン「Motio」 矢印で移動したりスペースキーでジャンプしたりとデモが面白い。 実際の実装においても、サンプルコードを見る限りでは分かりやすいコードの実装が出来るみたいです サイトのトップにあるような絵に置き換えてみても面白そうですし、簡単なゲームをつくってみるのも楽しそうです 関連エントリ アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」 クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」 ターミナルに文字を打ってるアニメーションエフェクトが作れるjQueryプラグイン「Typist」

ホバーすると、アニメーションで階段状に次々にアイテムが浮き上がるナビゲーションを実装するjQueryのプラグインを紹介します。 一応プラグインですが、エフェクトの要はCSS3です。 階段の反応する数が三つと四つ 実装 HTML HTMLはシンプルで、a要素でアイテムを実装しnav要素で内包します。 <div> <h2>One Step</h2> <nav id="example-one"> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Na

Sly - jQuery plugin アイテムベースのスクロールを実現できるjQueryプラグイン「Sly」。 通常スクロールバーを動かすとブラウザがスクロールしますが、Slyで初期化したエレメント上でホイールを動かすとアイテムが横にスクロールする、みたいなUIが作れます。 ホイールだけではなくて、横に長いコンテンツのスクロールやページ送り、アイテムの追加等ができます。 応用して面白いインタフェースが作れそうです。 文書を入れてみた例。自動でスクロールさせたり、メインのコンテンツをハイライトしたりすることも出来るみたい 関連エントリ スクロールすると巻物風にコンテンツが回転するUIを作れる「FoldScroll」 ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ラ

jQuery Responsive Tile Galleryは、レスポンシブレイアウトに対応した画像ギャラリーです。 ブラウザサイズを変更すると、すっとアニメーションしながらレイアウトが変更されます。 jQuery Responsive Tile Gallery

Hot Studio : Touchy スマホタッチでくるくる回転させられるjQueryプラグイン「Touchy」。 スマホで移動とかはよくあるのですが、このライブラリを使えば要素をくるくる回転させることができるみたい。 とりあえず、何らかのUIに使うことができそう また一つWEBの進化を見られましたね。 関連エントリ jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タッチ可能でレスポンシブなスライダー実装「RoyalSlider」

Approach: a jQuery plugin that allows you to animate CSS properties based on distance to an object マウスを近づけると徐々にアニメーションする効果を作るjQueryプラグイン「Approach」。 特定のエレメントへのマウスカーソルとの距離によってアニメーション効果を付けられるjQueryプラグインです。 単なるアニメーションではなくて、位置によってエレメントの属性が変わります。近いほど赤く大きくなる、という効果が実現可能。 注目を集めたい部分がカーソルが近くなると大きくなっていくというような演出を盛り込めます 実装コード例。超簡単ですね 関連エントリ カレンダーやDateピッカー関連のjQueryプラグイン20 プロダクト画像を360度回転させられるようにするjQueryプラグイン５つ 色々