[CSS]デモが楽しい！要素にclassを与えるだけでさまざまなCSS3アニメーションを適用するスタイルシート -Magic
Slide, Math, Tin, Bomb Magicの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="yourpath/magic.css"> </head> Step 2: 要素にアニメーションを指定 アニメーションはmagic.css単体で動作しますが、jQueryと組み合わせることでユーザーのさまざまなアクションをトリガーにすることができます。 まずはjQueryのセレクタで要素を指定し、例えばホバー時にアニメーションさせる時はこんな感じに。 $('.yourdiv').hover(function () { $(this).addClass('magictime puffIn'); }); 特定の時間、ループでアニメーションさせる時はこんな感じ。 setInt
レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント
先日エントリーした「ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」」の続きで、レスポンシブWebデザイン制作にjQuery Masonryプラグインを利用するための重要なポイントについて詳しく解説します。 サンプル（リンクは２項） 手前味噌ですが、jQuery MasonryによるレスポンシブWebデザインの記事は他にも多く存在する中、実用レベルまで踏み込んでいるのはおそらくこのエントリーだけだと思います。 なお、jQuery Masonryプラグインの基本的な設定方法については割愛してますので、上記のエントリーを参照してください。 １．はじめに このエントリーでは「NHKスタジオパーク」のサイトを参考に、次の内容について解説します。 NHKスタジオパーク まず、カラムレイアウト全体をセンタリングさせるためのCSSの設定について紹介します。 ま
[JS]パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できるスクリプト -Gridster
CSS3アニメーションのかっこいいエフェクトを伴って、パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できるjQueryのプラグインを紹介します。 パネルはグリッドに沿って、カラムをまたいでも移動できます。移動した際に他のパネルは指定した縦列・横列数とマージンを維持します。 他のパネルも移動可能です。 対応ブラウザ Internet Explorer 9+ Firefox Chrome Safari Opera Gridsterの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="libs/jquery.js"></script> <script type="text/javascript" src="jquery.gridster.js"></scri
レスポンシブデザインに使えるjQueryプラグイン集 – creamu
「20 Useful jQuery Plugins for Responsive Web Design」という記事で、レスポンシブデザインに使えるjQueryプラグインが20個まとまっています。 上記はPHOTO SWIPE。スマートフォン用に、スワイプできるスライドショーを作ることができます。 isotope アニメーションでオブジェクトの位置が変更されます ResponsiveSlides.js シンプルなクロスフェードタイプのスライドショー The Heads-Up Grid オーバーレイでグリッドラインを表示 jQuery Masonry fluidなレイアウトが実現できる scrolldeck 矢印キーでページ移動、動きのあるプレゼンテーションを可能にする Elastislide ウィンドウサイズの変更に対応した、レスポンシブなカルーセルギャラリー AUTOMATIC IMAGE
パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル:phpspot開発日誌
Recreating the Nikebetterworld.com Parallax Effect パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル。 単なるスライダーではなく背景とコンテンツが別々に動くスライダーが作れます。 パララックス効果を使うことで奥行きを出せて画面が切り替わるインパクトも強くすることができますね 見本は nikebetterworld.com というnikeのサイトです。インパクト重視なサイトを作りたい場合に使えそうですね 関連エントリ ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル サイト利用のインタラクティブなチュートリアルをリストで定義するだけで超
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
jQueryで実現するレスポンシブレイアウトプラグイン集「25 jQuery Plugins to help with Responsive Layouts」
TOP > WebDesign > jQueryで実現するレスポンシブレイアウトプラグイン集「25 jQuery Plugins to help with Responsive Layouts」 様々な端末がリリースされている昨今、それぞれの端末に併せてレイアウトを組んでいくというのは非常に面倒で非効率的です。そこで最近は端末のWide幅に応じて、レイアウトを最適化するレスポンシブな組み方が主流になってきつつあります。今日紹介するのはjQueryプラグインで実現するレスポンシブレイアウトプラグインを集めたエントリー「25 jQuery Plugins to help with Responsive Layouts」です。 Response.js 様々なタイプのレスポンシブレイアウトを可能にしてくれるjQueryが集められていますが今日はその中からいくつか気になったものを紹介したいと
ギャラリー等を面白く見せられるjQueryプラグイン「Minimit」:phpspot開発日誌
Minimit Gallery Plugin - Download ギャラリー等を面白く見せられるjQueryプラグイン「Minimit」 このギャラリー他にはない感じで次のように要素をCSS3のプロパティなんかを駆使して変形、アニメーションさせながら切り替える等のインタフェースを提供します。 デモを見てみるのが一番速いですが、とても面白いです トランプのカードを拡大するような（？）。ちょっと動きを見ていただくのが一番速そう。 リストもマウスに応じてクネクネ動きます。 クネクネ。 マウス位置に応じて拡大。 CSS3とjQueryを組み合わせることで、もっといろんなことができそうですね。 数年後にはこうしたライブラリはCSS3等を応用しまくっていて、ちょっとソース見ただけだとどうやって実装しているか、よく分からないなんていう状態になっていそうな気がします 関連エントリ PCでもスマホでもスワ
Apple.comの新スライダーエフェクトを実装するjQueryプラグイン:phpspot開発日誌
like Apple’s New Slide effect | jQuery Plugins Apple.comの新スライダーエフェクトを実装するjQueryプラグイン apple.com のページ上部にある製品一覧ウィジェット。かなり良い感じで動きますが、これを再現するjQueryプラグインが出ました。 説明しづらいのでデモを見てみてください。 apple.com の例 ヘッダーの製品部分の動きを見てみてください 今回紹介するプラグインのデモ ほぼ同じ動きですね。 なんというかappleってこういう細部にもこだわっていてその動き方とかにもセンスを感じるっていうところは本当にさすがだなぁと思いますね。 関連エントリ jQueryベースの画像スライダー３０まとめ 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 divを並べた後、たった１行でオシャレなス
様々なホバー表現を可能にしてくれるjQueryプラグイン「Hoverizr」
WEBではインターフェース的にもデザイン的にも欠かすことができない、マウスオーバーした時のホバー処理。ちょっとしたギミックですが、全体のクオリティに影響する部分だと思います。今日紹介するのはわずか2.5KBと非常に軽量ながら、様々なホバー表現を可能にしてくれるjQueryプラグイン「Hoverizr」。 このプラグインではcanvasを利用して、白黒からカラーだったり、ぼかしからぼかしを取ったりと通常のホバー表現とは一味違った表現を簡単に可能にしてくれます。 詳しくは以下 実装方法は非常に簡単で、jQuery本体とHoverizrを読み込ませ、マウスオーバーさせたい部分のイメージのクラスもしくはIDを指定するだけです。様々なオプションが用意されており、使い方によっては面白い表現が可能になるかと思います。 jsのダウンロード、詳しい実装方法、サンプルなどは「Hoverizr – A resp
○○の歴史を分かりやすくタイムラインにできるjQueryプラグイン「Timelinr」:phpspot開発日誌
jQuery Timelinr ○○の歴史を分かりやすくタイムラインにできるjQueryプラグイン「Timelinr」。 次のような年をインデックスとしたスライダーを作ることができるjQueryプラグイン。 会社の歴史とか、PHPの歴史とかなんでもいいのでタイムラインをちょっと雰囲気を持たせながら表示させたい場合に使えそうです 年部分をクリックするとかっこよくアニメーションしながらスライドしてくれます。 すべての内容は１個のHTMLに入れられて作るのも楽そうです。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」 RSSやATOMフィードを読み込んで表示できるjQueryプラグイン「FeedEk」
ドラッグできる地図実装ライブラリのまとめ:phpspot開発日誌
ドラッグできる地図実装ライブラリのまとめ。 この手のライブラリは色々とあるのですが過去に紹介したものと新発見の物をまとめてご紹介。 Google MapのAPIを利用したものも入れます mobily.pl - playground - MobilyMap 拡大機能はありませんが、ドラッグ＆ドロップで移動させたりピンを立てる機能があります Googleマップ風のUIを実現できるJSライブラリ「Polymaps」 マウスホイールによる拡大・縮小機能があってサンプルも豊富なライブラリ ドラッグ＆ドロップできる地図を実装できる3KBの軽量JSライブラリ「SpryMap」 独立して動作し、軽量なのが特徴 高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」 ライブラリではなく、画像URLを張り付けるだけでOKなサイト GoogleMap風でクールな地図
パソコンのブラウザ上でもiOSみたいなスクロールが実現できるjQueryプラグイン「Overscroll」:phpspot開発日誌
パソコンのブラウザ上でもiOSみたいなスクロールが実現できるjQueryプラグイン「Overscroll」 2011年10月03日- Azoff Design | Overscroll | An iOS scrolling emulator for jQuery パソコンのブラウザ上でもiOSみたいなスクロールが実現できるjQueryプラグイン「Overscroll」 Googleマップみたいな感じといえばそうなんですが、加速度がついてアニメーションしながら移動する点なんかも再現されています。 使い方が簡単でスクリプトを読み込んだら、iOSちっくにしたい部分を $(element).overscroll() だけで設定できるのが熱いです。 ホイールにも対応していて芸が細かいです。 使いどころは色々ありそうですが、スマホアプリの紹介ページなんかでつかってもインパクトがありそうですね。 関連エ
165 Awesome jQuery Sliders and Other Useful jQuery Effects - tripwire magazine
20+ Awesome jQuery Slider Plugins – Show Off Featured Content! by Lars | Last updated May 7, 2017 | Javascript, jQuery Plugin Collections | 109 comments jQuery Slider plugins are very useful and increasingly popular web page elements used for highlighting important content. By using a jQuery slider plugin, one can create amazing HTML slider effects with fancy animations of content elements like te
定番機能をまとめて提供してくれるjQueryプラグインまとめ | バシャログ。
ゲームボーイアドバンスの名作「カルチョビット」が3DSで出ると聞いてテンションあがってきたminamiです。 jQuery便利ですよね。さらにその便利なjQueryを使ってコーディング時の定番機能を提供してくれているライブラリがたくさんあるので集めてみました。 Laquu.js http://laquu.com/ 注目の最新プラグインです。「HTMLコーディング作業量を極力減らすためのjQueryプラグイン」ということで、 基本的な機能もさることながら、ピックメニュー、タブ、ツールチップ、ティッカーといった、よく使うけど意外と手間のかかるUIが一つのプラグインでまかなえてしまうのがポイント高いです。個人的にはコナミコマンドが実装されてるのが熱いです！ 対応するjQueryのバージョンは1.5以上です。 simplelib.js http://lab.starryworks.jp/js/si
最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ | バニデザノート
ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery UIの各エレメントをレトロ風のかわいいデザインに変更するテーマファイル -jQuery UI Theme Retro
BlocksIt.js – Pinterestのようなレイアウトを実現するjQueryプラグイン – creamu
会社ロゴマーク デザインアーカイブ