jQueryのanimateを使ったアニメーション
今回はjQueryのanimateを使って、要素をアニメーションさせる方法を試してみようと思います。 本当はCSSのアニメーションだけで済めば良いのですが、特にIEを考えると難しいところです。そこでjQueryを使っての基本的な方法をおさらいしておきたいと思います。 書き方 まずanimateの書き方ですが、このような感じ。 animate(params, [duration], [easing], [complete]); animate(params, options); 2通りありどちらの書き方でも動きます。 1つめの書き方はそれぞれ引数を指定する方法で、2つめは連想配列で指定できるようになっています。今回は2つ目の連想配列の方法で説明していきます。 params ここには、アニメーションさせたいスタイルを書きます。 $('#btn01').click(function(){ $('
ページ遷移不要の、シンプルなWebサイトを作るための軽量jQueryプラグイン・Pagify - かちびと.net
よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify.js" type="text/javascript"></script>jQuery本体とプラグインを読み込みます。 $(do
複数要素をランダムにフェードインさせられるjQueryプラグイン「champagne.js」:phpspot開発日誌
champagne.js | fresh tilled soil 複数要素をランダムにフェードインさせられるjQueryプラグイン「champagne.js」。 画像などの要素が一杯あって単に並べるより、アニメーションを加えて徐々に出すというのはまた違った印象が得られます。 ギャラリー的な物に実装してみるといい感じになるかもしれませんね。 ULリストを定義したら、<script>タグでchampagne.jsをインクルードして次のように呼び出せば実装できるお手軽さがいいです $("ul.champagne").champagne(); 関連エントリ フリーで使えるPHP製画像ギャラリースクリプト「PhotoShow」 Twitter Bootstrapを使ったイメージギャラリーサンプル フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル レスポンシブなPhotoギャラリー
レスポンシブWebデザインに対応したjQueryスライドショープラグイン
RefineSlide / Camera | a free jQuery s... / CarouFredSel他...全7件
jQueryでスクロールすると上部に固定されるナビゲーション
Posted: 2012.02.21 / Category: javascript / Tag: jQuery グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="artic
階層的なdivをツリービュー風に変換してしまうjQueryプラグイン「Arborescence.js」:phpspot開発日誌
階層的なdivをツリービュー風に変換してしまうjQueryプラグイン「Arborescence.js」 2011年12月02日- Arborescence.js | jQuery Plugins 階層的なdivをツリービュー風に変換してしまうjQueryプラグイン「Arborescence.js」 divで複数階層化したデータをこのプラグインで初期化するとクリックで開閉できるツリービューに仕立て上げられます トップ項目の表示を減らし場合によってはコンテンツを見やすくすることが可能です ↓↓↓ １行でツリービューに。 CSSできれいにスタイリングしたほうがよさそうですが、便利なプラグインですね 関連エントリ 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」 ピュアCSSなのに折りたたみ可能なツリーメニュー実装例 WindowsアプリのツリービューっぽいUIをWEB上で簡単
要素を無限スクロールさせるjQueryプラグインいくつか
必要になるかも知れないので、 今のうちにかき集める作業です。 よくみる無限スクロールサイトを 実装できるjQueryプラグインです。 あんまり使ったこと無いので 注意点なんかのメモ書きもして おきます。 というわけでいつもの自分用メモなので、これから触る用のまとめです＝オススメプラグインとかじゃないです。無限スクロールと言っても要素が無くなれば止まります。当たり前ですが。 Tumblrとかギャラリーとかでよく見かける無限スクロールを実装できるやついろいろ。WPデザインギャラリーでも実装していますが、これは5509氏のプラグインによるものです。便利っすー。 infinite scroll jQuery Masonryっていう、boxを段々にするやつと一緒に使ってるのを以前実装しました。結構よかった。WPプラグインもあるみたい。 infinite scroll Endless Scroll ち
[JS]リスト要素で簡単に実装できるニュースティッカー -jQuery News Ticker
アニメーションで次々に表示するニュースティッカーを実装するjQueryのプラグインを紹介します。 IE6+をはじめ、スマフォ用のSafari Mobileにも対応しています。 jQuery News Ticker デモ [ad#ad-2] jQuery News Tickerの実装 jQuery News Tickerの実装 外部ファイル スタイルシートとスクリプトを外部ファイルとして指定します。 <link href="styles/ticker-style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script src="in
Windowsのスピンボタンコントロールを実装できるjQueryプラグイン「Smart Spin」:phpspot開発日誌
jQuery spin button html form control | EGrappler Windowsのスピンボタンコントロールを実装できるjQueryプラグイン「Smart Spin」。 上下矢印がついていて、数値をアップ・ダウンできるコントロールが実装できるjQueryプラグインです。 通常のHTMLでは数値を入力してもらったりする必要がありますが、このコントロールを使えばクリックでパラメータ調整ができます。 こうしたUIが適しているところもありそうなので知っておいてもよいかも。 ホイールも効くみたいです。 <input type="text" id="spn" class="smartspinner" /> 実装は<input>を定義して、spinitでオプション指定しつつ初期化するというもので簡単。 $('#spn').spinit({min:2,max:200,step
jQueryでスマホサイト向けに画像サイズを縮小する方法
jQueryでスマホサイト向けに画像サイズを縮小する方法を紹介します。 １．サンプル 次のようなPCサイト用のページがあります。この場合、Movable Typeでページを出力しています。ページで使っている記事内の画像サイズは幅470pxです。 このページをスマホサイト向けに別のページを作り、画像サイズを縮小して表示します。画像サイズは幅280pxに縮小しています。 ２．カスタマイズ サイズを変更するには、下記のスクリプトをページ内にあるhead終了タグの直前に追加します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(function(){ $('img').each(functio
CSSのborderをアニメーションさせて目立たせるjQueryプラグイン「animatedBorder」:phpspot開発日誌
CSSのborderをアニメーションさせて目立たせるjQueryプラグイン「animatedBorder」 2011年09月14日- jQuery.animatedBorder.js CSSのborderをアニメーションさせて目立たせるjQueryプラグイン「animatedBorder」 borderというと基本的に固定ですが、このjQueryプラグインを使ってアニメーションさせることが出来るみたいです。 仕組みとしては、背景が透明と白のgifアニメーションを交互に点灯させ、ボーダー自体は固定色という仕組みで動いています。 とあるブロックを目立たせたいなんていう場合に使えそうです。 仕込んだら実装は以下の１行で済みます。 $('div.alpha').animatedBorder(); borderの色やサイズの指定が可能です。 関連エントリ カスタマイズ可能なアニメーションスクロールが
3D効果を使って迫力あるスライドショーを作れる「Slicebox」:phpspot開発日誌
Slicebox - A fresh 3D image slider with graceful fallback | Codrops 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 一見普通の画像のスライドショーかとおもいきや、画像切替の際に超かっこよく3D効果を使って切り替わるスライドショーの実装ができます。 画像が立体的にぐるりと切り替わる感じは超クール エフェクトが色々と用意されています。 jQueryプラグイン形式なので、<div>のなかに画像をつらつらと並べて初期化するだけでOKの簡単実装。 3D transformを使っているみたいですが、フルに活用するとこういうこともできるんですね 関連エントリ 迫力あるフルスクリーンの背景スライドショーが実装できるjQueryプラグイン これは新しい、回転させて切り替えるスライドショー実装jQueryプラグイン 次の画
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
今見ている場所が分かりやすいヘッダー固定のjQuery＆CSSテクニック:phpspot開発日誌
Persistent Headers | CSS-Tricks 今見ている場所が分かりやすいヘッダー固定のjQuery＆CSSテクニック。 文書は表などの長さが長くなってくると今どこを見ているかわかりづらいようなケースがありますが、このテクニックを使えば、今読んでいるパートがなんなのかをページの上部に表示することができて分かりやすいです。テーブルヘッダーなんかも上部固定できます 固定したい部分はjqueryのセレクタで指定できるため、利用も簡単です 関連エントリ テキストにグラデーションをかけられるjQueryプラグイン「True Gradient Text」 CSS3のよく使いそうな１０個のテクニックのまとめ 使える.htaccessテクニック１０個
スクロールするとついてくるサイドバーを実装する際に便利なjQueryプラグイン「Smart sticky floating box」:phpspot開発日誌
スクロールするとついてくるサイドバーを実装する際に便利なjQueryプラグイン「Smart sticky floating box」 2011年08月18日- Smart sticky floating box | jQuery Plugins スクロールするとついてくるサイドバーを実装する際に便利なjQueryプラグイン「Smart sticky floating box」。 スクロールするとアニメーションでついてくるサイドバー。いろんなところでよく見ますが、実装の仕方によっては酔っちゃったりかえってユーザ利便性をそこないかねないUIですが、常にサイドにあることで便利に使えるという目的で設置されているものです。 こういうUIを実装する際に使えるのがこのプラグインで、位置移動の際のアニメーション方法が多数選べるだけでなく、遅延やアニメーションの速度が自由に設定できます。 デモページで動作確
全体のプレビューをページサイトに出してドキュメントのどこにいるかを分かりやすくできる「jQuery.fracs」:phpspot開発日誌
全体のプレビューをページサイトに出してドキュメントのどこにいるかを分かりやすくできる「jQuery.fracs」 2011年08月05日- jQuery.fracs larsjung.de 全体のプレビューをページサイトに出してドキュメントのどこにいるかを分かりやすくできる「jQuery.fracs」 縦に長ーいサイトだと今どこ読んでいるのか？わからなくなってしまうことがありますね. このライブラリを使えばページのサムネイルが動的に生成され、とってもわかりやすいだけでなく、サムネイル上をドラッグ＆ドロップでページ移動できちゃいます 右横にページ全体像のサムネイル 拡大するとこんな感じです ドラッグ＆ドロップでページ内を瞬間移動可能。 これはナイスですね 関連エントリ ページ内ハイライト検索が実装できるjQueryプラグイン「Plain Text Keyword Search」 今までなかっ
古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」:phpspot開発日誌
Demo | jQuery DivCorners | Product of roydukkey 古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」 border-radiusで角丸は実装できるようになりましたが、古い非対応ブラウザだとうまく表示されないということで、やっぱりdivでやろうという方は必見のプラグイン。 連番の画像を用意しておくだけであとは簡単に初期化できます 実装コードの例。 prefix+"top-left"+拡張子 prefix+"top"+拡張子 prefix+"bottom"+拡張子 ・・・ という感じで画像を８枚用意すれば独自の縁が簡単にできます グラデーションがかかったものも簡単に実装できます 単純にdivで分割しているだけです 関連エントリ IEでもCSS3を使うためのツールやリソース集 CSS3の擬似クラスをIE6-8でも使えるように
jQuery Clip - jQueryのプラグインをまとめました。
jQueryの便利で実用的なイメージスライダーやレスポンシブ対応のプラグインをタグやカテゴリで見やすくまとめました。
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今年(2011年)参考になったWeb制作者向けのスライドのまとめ - かちびと. net
