jQuery リファレンスjQueryに関するリファレンスを提供するサイト
jQuery 642 プラグイン：skuare.net
jQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavaScriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連、メニュー関連、フォーム関連、テキスト／リンク関連、その他、日本語未解説のjQueryプラグインを分類して紹介しています。 初心者でもすぐにリッチなサイトを作成可能ですので、ぜひjQueryプラグインをご利用ください Image Menu Form Text/Link Other W/O_JP
[JS]ナビゲーションの背景画像をアニメーションさせるスクリプト
Snook.caのエントリーから、「ナビゲーション画像にアニメーションのエフェクトをつける -CSS Sprite2」のように、ナビゲーションの背景画像にさまざまなアニメーション効果つけるスクリプトを紹介します。 Using jQuery for Background Image Animations デモ デモでは、上下のアニメーション、左右のアニメーション、フェードのアニメーションがあります。 スクリプトにはjQueryがメインに使用されており、それぞれのアニメーションは下記のように記述されています。 「#a」は上下、「#b」は左右、「#c, #d」はフェード。 <textarea name="code" class="js" cols="60" rows="5"> $(function(){ $('#a a') .css( {backgroundPosition: "-20px 35
背景画像をブラウザの枠いっぱいに表示するテクニックの考察
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま
Parallax Content Slider with CSS3 and jQuery | Codrops
A simple parallax content slider with different animations for each slider element and a background parallax effect. Today we want to share a simple parallax content slider with you. Using CSS animations, we’ll control the animation of each single element in the slider and create a parallax effect by animating the background of the slider itself. The idea for this comes from the slider of the Kend
[JS]要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー
jQueryとCSS3アニメーションを使った、パララックス対応のコンテンツスライダーを実装するチュートリアルを紹介します。 Parallax Content Slider with CSS3 and jQuery [ad#ad-2] デモ 実装 デモ 一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。 分かりにくいかもしれませんが、背景もアニメーションで動いています。 Kendo UI こちらも当然パララックス対応のコンテンツスライダーです。 こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。 実装 実装は各ポイントとなる箇所を説明します。 HTML スライダーは複数のスライドを含んでおり、それぞれのスライドにh2要素、パラグラフ、リンク、画像を含んでいます。 <div id="da-slider" cla
Elastic Image Slideshow with Thumbnail Preview | Codrops
Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option. Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically
多様な切り替えエフェクトがあるjQueryの画像ギャラリープラグイン「jqFancyTransitions」
twitter facebook hatena google pocket jQueryの画像ギャラリープラグインの中でも、ここまで多様な切り替えフエフェクトがあるものはそう多くはないでしょう。 Image gallery with fancy transitions effectsはjQueryを使用して、短冊状に画像を切り替えてくれます。 sponsors 使用方法 jqfancytransitionsからjqFancyTransitions.jsを、jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jqFancyTransitions.js"></script> <scri
インタラクティブに画像を切り替えるjQuery 「jqFancyTransitions」 を使ってサイトのピックアップ部分を考える。 ｜https://wp.yat-net.com/name
2011年 03月 01日 インタラクティブに画像を切り替えるjQuery 「jqFancyTransitions」 を使ってサイトのピックアップ部分を考える。 カテゴリ： jQuery タグ：jQueryデザインユーザビリティ 今回は省スペースで複数の画像を切り替えて表示できるjQueryを紹介したいと思います。使い方次第でサイトをより魅力的に使うことができます。しかしそれ意外にもメリットがありますよ。どういうjQueryかはでもページでご確認ください。5パターン作ってます。また本文最後にソースもダウンロード出来るようにしています。 jqFancyTransitionsデモ ピックアップ情報の見せ方を考える WEBサイトのヘッダーしたあたりにピックアップを持ってきて、大きい写真で目立たせる。閲覧ユーザーに対して、より注目して欲しい情報を訴求するのに抜群の効果を発揮しますね。でも、そういう
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
jQuery Mobile
jQuery Mobile is no longer supported To read more about the status of the jQuery Mobile project, see the announcement blog post. A Touch-Optimized Web Framework jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Seriously cross-platform with HTML5 jQuery Mobile framework takes the "w
画像、動画やWebページをクリックで表示するLightbox系javascript「Shadowbox」
ホームページで、画像、YouTube、WMP、SWF、MOV、WMVなどのサムネイル画像・文字を クリックして、そのページ内で動画などを開く方法 [Shadowbox] Lightbox for Media 更に、画像も動画も一緒に、スライドショーをしてくれる[Shadowbox] Shadowbox は、画像、動画など幅広い多くのメディアを拡大ポップアップ表示してくれる。 また、様々なJSフレームワーク(アダプター）に対応しているので、いずれかを好みによりダウンロードして、使用します。 Base(standoalone)（非JSフレームワークタイプ） jQuery Prototype MooTools (requires 1.2 Core) Dojo Toolkit Yahoo! User Interface Library Ext (requires ext-core.js) jQue
Shadowbox スクリプト 設置方法
村雨一馬の適当ブログ ■ 適当にゲームや音楽のことを書いてます。 ■PC版 ファンタシースターオンライン2 (Ship5) を継続プレイ中。 ブログやホームページの写真や動画を拡大表示できるスクリプト。ページをカッコ良く飾るにはいいかもしれない。Seesaaでの設置方法を書いてみる。 *追記(2013/02/06) Youtubeのパラメータ変更 Shadowboxも書き換えを(詳しくはコチラでも) &hd=1 から &vq=hd720 にパラメータが変更されているので書き換える。(解像度数値 *画像をクリック (左:Shadowbox適用, 右:Shadowbox無し) Shadowbox.js http://www.shadowbox-js.com/index.html ページ内の Examples の写真をクリック。いろいろ対応しているのが分かる。 Shadowbox.js Down
Shadowbox(lightbox)パネル関連|リッチなサイトを作ろう
Shadowboxは、最も高機能なlightbox系のプラグインで、画像やドキュメントだけでなく、フレームで他のサイトを表示することも、 ビデオやフラッシュなどのオブジェクトもサポートしています。 もちろんスライドショーも。 黒ベースですので、多少マニアックでしょうか? Shadowboxオフィシャルサイトから最新版をダウンロードしてください。 2010年2月現在ver.3.0でした。ダウンロードしたファイルはshadowbox-build-3.0rc1.zipのように圧縮されていますので解凍します。 通常Windowsではサポートしない形式ですので解凍できない場合は「Lhaplus」等をインストールしてください。 解凍したディレクトリの名称をshadowboxに変更して/jquery/の中に置いてください。 この構成なら /jquery/shadowbox/shadowbox.css /
Shadowbox.js 3.0.3 の正統な使い方 : WEB 職人
ダウンロード Shadowbox.js 2010/11/18 現在 3.0.3 が最新です。バージョンが変わった際にダウンロードした ファイルのソースは「Date: 2010-04-07 03:27:10 +0000」なんで、半年以上が経過 した安定バージョンです( 前のバージョンはいろいろあったんで ) 関連する記事(Shadowboxで表示) Shadowbox.js : 3.0.1 使用時の注意事項 Shadowbox.js : 3.0.2 が出ました / Shadowbox 内の SWFObject の使い方 ※ ブログが重いので、Shadowbox 内でのロードに少し時間がかかります 設置 Japanese を指定すると、.js 内に日本語が utf-8 で記述されます。ですから ライブラリの参照は以下のようになります。 ※ 必ず charset="utf-8" が必要です。 <
Media Viewer Plugin - Shadowbox.js
The web content creators that would like to use Shadowbox on an advert resource are provided with commercial licenses. Shadowbox is an application that works as an internet-based image/video viewer, it supports all of the widespread audio and video formats. This app is created with CSS and JavaScript and can be tailored to customer needs easily. The core benefit of Shadowbox is that it allows web
ShadowBox
ShadwBox3.0備忘録 このサイトを立ち上げてる途中で気になった”ShadowBox”自分で忘れないためにも、また何方かの役に立てればと思いこのページを作りました 【ShadowBoxって何？】 先ずは下のMy Imageと書かれたリンクをクリックして見てください。 My Image どうですか？このページの上に画像がかぶさるように表示されたでしょうか？ しかも表示の際に徐々にウインドウが大きくなるアニメーション付です。 これが簡単に出来ます。 【設置準備】 ShadowBoxにいきます。 クリックで拡大 右側のDownloadをクリック クリックで拡大 下方のDownloadクリック ダウンロードした圧縮ファイルを解凍しアップロードします。 【設置１】 設置したいhtmlファイルの<head>～</head>間に <link rel="stylesheet" type="text/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
GitHub - jquery-backstretch/jquery-backstretch: Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automat
新着記事
