限られたスペースに設置するのに最適、コンテンツにスクロールバーを設置するjQueryのプラグインを紹介します。 スクロールバーのデザインはCSSで簡単にカスタマイズできます。
[JS]イージングにも対応した、コンテンツをスクロールさせるスクリプト -Custom Content Scroller
限られたスペースに設置するのに最適、コンテンツにスクロールバーを設置するjQueryのプラグインを紹介します。 スクロールバーのデザインはCSSで簡単にカスタマイズできます。
[JS]複数のエレメントをフェードのアニメーションで華麗に表示するスクリプト
Display Elements Sequentially with jQuery デモページ [ad#ad-2] 実装は非常にシンプルです。 HTML デモでは、画像をリスト要素で配置しています。 <ul> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> </ul> HTML アニメーションのトリガーとなるのは、「Show Images」のテキストリンクを使用しています。 <p style="clear: both; display: none;
[JS]主要ブラウザ全てにaudio要素でMP3を再生できるようにするスクリプト -audio.js | コリス
IE6/7/8, Firefox, Operaを含む主要ブラウザ全てに、HTML5のaudio要素を使ってMP3を再生できるようにするスクリプトを紹介します。 audio.js デモページ [ad#ad-2] audio要素のサポート状況 audioはHTML5の要素で、サポートしているブラウザは限られたものとなっています。 audio要素のブラウザのサポート状況 IE9 Firefox 3.5+ Chrome Safari Opera 9.6+ また、対応している音声ファイルのフォーマットも異なり、現在音声ファイルの主流のMP3はChromeのみが対応しています（Safariも一応再生可）。 「audio.js」は、audio要素に非対応のIE6/7/8、MP3に非対応のFirefox, Safari, Operaで、audio要素を使ってMP3ファイルを再生できるようにします。 [ad
[JS]テキストの一部のみ最初に表示し、残りをアニメーションで表示するスクリプト
パネルに配置したテキストを下部にいくにつれフェードアウトで表示し、残りのテキストをアニメーションで表示するコンテンツを実装するチュートリアルを紹介します。 残りのテキストをアニメーションで表示したキャプチャ [ad#ad-2] 実装 HTML HTMLはシンプルで、テキストと「Read More」ボタンをdiv要素内に配置します。 <div class="sidebar-box"> <p>パネルのテキスト</p> <p class="read-more"><a href="#" class="button">Read More</a></p> </div> CSS パネルの初期状態のサイズはスタイルシートで設定します。フェードアウトはCSS3グラデーションを使用します。 .sidebar-box { max-height: 120px; position: relative; overfl
[JS]複数の商品写真を見せるのに適したコンテンツスライダー -FancyMoves
複数の商品写真を見せるのに適した、画像拡大にも対応したコンテンツスライダーのスクリプトを紹介します。。 画像を拡大表示したキャプチャ FancyMovesの特徴 滑らかなアニメーションで画像がスライド表示。 画像はスライドすると拡大・縮小表示。 スライダーの送りは、矢印・画像のクリック。 キーボード（矢印）操作にも対応。 画像は拡大表示が可能（FancyBox使用）。 FancyMovesのオプション スクリプトのオプションでは、下記の設定が可能です。 パネルのサイズ パネルで使用する画像のサイズ 見出し・本文の文字サイズ 移動距離 また、FancyBoxを使用しているので、そちらのオプションも変更できます。 FancyMovesでは下記のオプションを調整しています。 ズームイン・アウト時のスピード 不透明度 オーバーレイのカラー
[JS]各パネルのリンクに対応した、シンプルなコンテンツスライダーのスクリプト -hash slider
hash slider デモ：3番目を表示 [ad#ad-2] hash sliderの主な特徴 設置が簡単。 スタイルシートで簡単にデザインのカスタマイズが可能。 マウスホイールでスライド操作が可能。 #のリンクで各パネルの個別リンクにも対応。 番号のナビゲーションは自動で生成。 個人でも商用でも完全に無料。 2.2KBと超軽量サイズ。 [ad#ad-2] hash sliderの実装 実装は簡単です。 HTML 各パネルは、リスト要素で実装します。 <div id="slider"> <ul> <li>パネル1</li> <li>パネル2</li> </ul> </div> <div id="left"> 左へスライド </div> <div id="right"> 右へスライド</div> <ul id="numbers"> <li></li> </ul> L.3, 4のli要素はパ
[JS]かっこいいアニメーションを取り入れたポートフォリオギャラリーを実装するjQueryのチュートリアル
かっこいいスライドやフェードのアニメーションを取り入れたポートフォリオギャラリーを実装するjQueryのチュートリアルを紹介します。 Animated Portfolio Gallery with jQuery デモページ [ad#ad-2] 左側のサムネイルをクリックすると、前のコンテンツをフェードアウトし、次のコンテンツがオーバーレイで表示し、スライドのアニメーションで表示します。 デモページ（クリック時のキャプチャ） 元記事では、HTML, CSS, JavaScriptの全コードの解説をはじめ、全ファイルのダウンロードも用意されています。 スクリプトのオプションでは、フェードやアニメーションのスピード、アニメーションの種類などが調整できます。 [ad#ad-2] また、左側のサムネイルのスクロールに使用されているのは、「jquery thumbnail scroller」です。
JavaScript初級者から中級者になろう
JavaScript。「ジャヴァスクリプト」と読みます。主にWebページに動きを与えるものです。 現在では結構多くのページに使われていますが、その多くはとてもレベルが低く不適切なものです。もっと質の高いJavaScriptを使える人が増えるといいなという思いから、このページを作りました。 初級者の基礎知識 本文を理解するにはJavaScriptの知識がそれなりに要るので、JavaScriptがそもそもあまり分からない人は、この辺を読んでみましょう。 基礎第一回 基礎第二回 基礎第三回 基礎第四回 基礎第五回 基礎第六回 第一章 オブジェクト オブジェクトとは オブジェクトの実体 配列のコピー オブジェクトと関数 第二章 DOMの基礎 HTMLと木構造 DOMとは 基本的な操作とテキストノード 木構造の操作：ノードの除去 木構造の操作：ノードの追加 木構造の操作：さまざまな機能 木構造の操作
[JS]jQuery初心者もOK、サイトにアニメーション効果を取り入れるチュートリアル
jQueryを使用して、サイトにフェードやスライド、表示・非表示、タイマーなどのアニメーション効果を取り入れるチュートリアルを紹介します。 Super-Easy Animated Effects with jQuery チュートリアルは英語ですが、使用する関数、ソース（HTMLとJavaScript）が必要最小限でまとめられており、デモページ（シンプルすぎかも）もあるため、英語が苦手な人でも大丈夫だと思います。 下記に、チュートリアルをいくつかご紹介。 アニメーションでフェードイン・フェードアウト <textarea name="code" class="html" cols="60" rows="5"> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascr
jQueryで実現するクリエイティブなイメージギャラリー集「20+ jQuery Image Gallery for your next project」
TOP > WebDesign > jQueryで実現するクリエイティブなイメージギャラリー集「20+ jQuery Image Gallery for your next project」 軽量で非常に高機能なjavascriptライブラリ「jQuery」。様々なプロジェクトで利用されていますが、今回紹介するのはjQueryをつかったイメージギャラリーを集めたエントリー「20+ jQuery Image Gallery for your next project」です。 AviaSlider – a unique jQuery Image slideshow plugin 画像と画像の間のエフェクトに凝ったものから、フューチャーリストのようにサムネイルと連動しているものまで様々なイメージギャラリーが紹介されています。今日はその中から幾つか気になったものを紹介したいと思います。 詳
JavaScriptを上手くデザインに生かしたサイトのみを集めているギャラリーサイト・Not Coffee
JSを使ったWebデザインをしたい方 のインスピレーションに良さそうだっ たので記事に。jQueryやmootools、 Prototypeなど、人気のライブラリを 駆使したサイトのみをショーケース化 しているギャラリー、Not Coffeeの ご紹介です。 数はさほど多くは有りません（150~160ほど）が、今後に期待したいギャラリーです。デザインも素敵なものばかりなのでインスピレーションと更なるjsの使い方の勉強にもいいかもですよ。 ギャラリー形式になっています。jQuery、mootoolsなどのカテゴリで分けられているのでライブラリ別で探せます。 サムネイルにマウスオーバーすると必要な情報が出てきます。どのライブラリがどこに使われているか（これはタグで分けています）などが直ぐに分かりますので探しやすいですね。 以下のようなサイトが掲載されていました。 Alex Buga’s Liv
ASCII.jp：古籏一浩のJavaScriptラボ
活躍の舞台をどんどん広げているJavaScript。本連載では、JavaScript関連書の執筆でおなじみの古籏一浩氏が、最新の活用Tipsから今後注目のAjax/JavaScriptライブラリーの解説まで、“楽しくできて役立つネタ”をお届けします。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptは盗んで学べ！ 知識0のデザイナーでもできるjsdo.itの遊び方
IDEA * IDEA