[B! css][jQuery] cs508のブックマーク

[JS]テキストリンクのリストをアニメーションでスクロールさせるスクリプト

jQueryを使用して、リスト要素で実装したテキストリンクを指定した範囲内だけでスクロールさせるスクリプトを紹介します。 The MoveUp Menu デモページ [ad#ad-2] テキストリンクのリストはマウスを上下に移動すると、ものすごい勢いでスクロールします。デモではマウス操作だけでは難しいため、キーボードの矢印キーの操作にも対応しています。実装実装はHTML, CSSともに最小限の形で実装されています。 HTML <div id="menu"> <ul> <li><a href="#">Nature</a></li> <li><a href="#">Receivability</a></li> <li><a href="#">Alone time</a></li> /ul> </div> CSS リストの可視範囲（高さ）を指定します。表示されないリストはスクリプトで表示し

cs508 2011/03/10

リンク

[JS]画像の一部を拡大するシンプルで実用的なスクリプト -Easy Image Zoom

プロダクトページなどによく利用される、画像の一部を拡大する実用的で軽量なjQueryのプラグインを紹介します。 jQuery plugin: Easy Image Zoom デモページ [ad#ad-2] デモではサムネイル画像にカーソルを合わせると、その箇所を中心に拡大表示し、ディテールをユーザーに提供することができます。スクリプトは使い勝手をよくするために、できるだけ軽量にし、またカスタマイズも簡単にできるように設計した、とのことです。 Eazy Image Zoomの実装 HTML サムネイル画像をimg要素で実装し、拡大画像をa要素に配置します。 <a href="large.jpg"><img src="small.jpg" alt="Small image" /></a> CSS 拡大画像のスタイルはCSSで簡単にカスタマイズが可能です。下記はデモページの例です。 #easy

cs508 2011/02/25

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

cs508 2010/11/30

リンク

背景画像をブラウザの枠いっぱいに表示するテクニックの考察

最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。各デモはページ下部のDownload Files」で、まとめてダウンロードできます。背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック背景画像をブラウザの枠いっぱいに表示するテクニックとは前提として、下記のポイントが挙げられます。画像でページをいっぱいにします。空きは無いようにします。画像のサイズは必要があれば調整しま

cs508 2010/11/30

リンク

ウェブ制作関連のチートシートをまとめたポータルサイト -Quickly Code

HTML5/CSS3/jQueryをはじめ、サーバーやプログラミング、デザインなどウェブ制作関連のチートシートをまとめているサイトを紹介します。下記はチートシートを分類しているタグの一部です。 Quickly Code タグ一覧各ジャンルのチートシートは数もそろっており、それぞれ簡単な説明とダウンロード先のリンクが掲載されています。その中から下記にいくつか紹介します。

cs508 2010/10/21

リンク

[JS]画像をさまざまなアニメーションで拡大表示するスクリプト -imgZoom

imgZoom デモ [ad#ad-2] imgZoomの主な特徴 lightbox風のインターフェイス（暗いオーバーレイ、次の画像へのスイッチ） CSS/HTMLベースでのカスタマイズフェードや回転のアニメーションで画像を拡大ズームイン、ズームアウトのAPIの提供 jQueryのプラグインとして動作する軽量（7KB）スクリプト imgZoomの実装方法外部ファイル下記の3ファイルを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="css/imgzoom.css" /> <script type="text/javascript" src="sc

cs508 2010/10/19

jquery
css

リンク

jQueryでブロック要素の高さを揃えてみる - 徒書

ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば