jQueryでレスポンシブ対応のシンプルなクロスフェードビューアーを作る方法｜BLACKFLAG
jQueryを使ってのレスポンシブに対応したスライドショーを実装するいくつかのパターンを紹介してきましたが、サムネイルも何もなしでただ画像（コンテンツ要素）がクロスフェードするだけのシンプルなスライドショーのレスポンシブに対応したパターンの要望を多くいただいたので、試しに作ってみたのを紹介してみます。 レスポンシブ動作はブラウザ枠を目いっぱいにするタイプなので、まずは別枠表示で動作サンプルから。 「jQueryでレスポンシブ対応のシンプルなクロスフェードビューアーを作る方法」サンプルを別枠で表示 サンプルでは6枚の画像を自動でクロスフェードで切り替え、最大幅を「800px」最小幅を「320px」としてブラウザ幅によってスライドショー部分が拡大縮小します。（どちらの値も変更可） 簡単な動作仕様については以上になります。 全体構成についてまずはHTMLから。 ◆HTML <div class=
jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法｜BLACKFLAG
これらの設定値を変更することでもろもろ調整が可能になっています。 追加される要素は一つひとつが ＜div＞で囲われるようになっており 個々にID名が付与されるようになっています。 ※実行後のHTMLソースをFirebug等の開発ツールで見てもらえると分かるかと思います。 （ID名に関してはJSONファイルに記述） スクリプト14行目の「url: ‘js/include.json’」が 読み込むJSONファイルの指定になるので パスやファイル名を変える際にはここを変更します。 そして読み込むJSONファイルは以下の様になっています。 （ちょっとムダに長いです・・・） ◆JSON [ { "itemNum": "1", "itemSource": "<img src='img/photo1.jpg' alt='' />【photo1】<br>これは追加要素1つ目のダミーテキストです。これは追加
jQueryでページ最下部までスクロールした際に外部HTML（JSON形式）化した要素を追加する方法｜BLACKFLAG
TwitterやFacebookで見るUIの様な、ページの最下部にスクロールした際に 自動的に追加要素の読み込み処理をするjQueryプラグインは多々ありますが 任意のHTMLソースを簡単に追加できるものがなかなか見当たらなかったので jQueryを使ってJSON形式で試しに作ってみたのを紹介してみます。 サンプルを別枠で表示する ページの最下部までスクロールをすると 追加で要素を読み込みます。 サンプルでは28個の要素を 5個ずつ追加表示しています。 （最後は3つ表示） 全体構成についてまずはHTMLから。 ◆HTML <div id="loadarea"></div><!--/#loadarea--> HTMLには要素を追加させたい箇所に 任意のID（もしくはクラス）を付けた ブロック要素を配置するだけです。 そしてCSSは以下の様になります。 ◆CSS /* #loadarea --
jQueryでページ遷移無しで画面を切り替えた際でも個別のURLやブラウザの戻る／進むを有効にさせるプラグイン「jQuery hashchange event」＆「Navi.js」｜BLACKFLAG
jQueryなどを使ってページ遷移をしない構成で画面切り替えを作る際 通常ではURLは変わることなく一つのURLみとなり ブラウザの「戻る」や「進む」が効かなかったり 直接、切り替え後の特定の画面へ遷移することができなかったりします。 その様なページ遷移無しの切り替えの場合でも ブラウザの「戻る」や「進む」を有効にし 切り替え画面ごとに個別のURLを持たすことができるようになるプラグイン 「jQuery hashchange event」と「Navi.js」を自分用メモとしてご紹介。 Ben Alman ≫ jQuery hashchange event デモ画面はこちら この「jQuery hashchange event」を使用すると タブ切り替えなどの際に、 切り替え画面ごとにURL末尾に「#」を付けた形で 個別のURLを持つことが可能になります。 jQueryファイルとプラグインフ
jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法｜BLACKFLAG
以前からjQueryを使ってのシンプルなスライドショーをいくつか紹介していますが やはり今後はサイト上に設置するスライドショー関連も レスポンシブに対応している必要が出てくることは必至なので 試しに作ってみたのを紹介してみます。 今回のレスポンシブ動作はブラウザ枠を目いっぱいにするタイプなので まずは別枠表示で動作サンプルから。。 「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法」サンプルを別枠で表示 サンプルでは6枚の画像を自動でクロスフェードで切り替え、 下に並べてあるサムネイルをクリックすることでも メインビジュアル部分を切り替えることができる形になっています。 （左右のNEXT／BACK透過ボタンで画像を切り替えることも可。） サンプルでは最大幅を「800px」最小幅を「320px」として ブラウザ幅によってスライドショー部分が拡大縮小します。
パララックス制作などで使えるスクロールして特定の位置でアニメーションなどの処理を実行させることが出来るjQueryプラグイン「jquery-peekaboo」「jQuery Waypoints」｜BLACKFLAG
パララックスサイト制作の際などで活用できる ページ内の特定のスクロール位置でアニメーションなど何か処理を実行させることが出来る jQueryプラグインがいろいろ使い道がありそうだったので 自分用のメモ書きとして紹介してみます。 uniba/jquery-peekaboo・GitHub 使い方はとても簡単で ページをスクロールしてアクションを実行させるポイントになる箇所に対して 下記のような記述で処理を実行させます。 ◆SCRIPT $(function(){ $('.point').on('appear',function(){ $(this).css({opacity:'0'}).stop().animate({opacity:'1'},1000); }); }); この記述の場合は、ページをスクロールして 「.point」とクラス付けされた要素の位置に辿り着いたら その要素に対してフェ
jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】｜BLACKFLAG
これらの設定値を変更することでもろもろ調整が可能になっています。 対象のベースの要素がIDでもクラスでも可能になっているので、1ページ内に複数設置の際にはクラスを使用することで、複数設置することが可能になっています。 1ページ内に2つのクロスフェードビューアーを設置して、それぞれにキャプションを付けた形でのサンプルは以下の様になります。 複数設置＆キャプション付きサンプルを別枠で表示 凝った演出などはありませんが、シンプルに画像などを切り替えるだけの動作が必要な際に手軽に使えると思います。 クロスフェードの画像の切り替えビューアーが必要になった際に是非。。。 サンプルファイルをダウンロードしたい方はこちらから
jQueryで画像をプリロードする方法｜BLACKFLAG
Webページ上でJavaScriptやjQueryなどを使って ロールオーバーやタブ切り替えの様な 何かのアクションによって画像を表示する動作を組み込んだ際 画像をロードするのに少し時間がかかることによって 一瞬画像部分がチラつくことがあります。 その現象を回避する為に、切り替え後に表示する画像ファイルを 前もって読み込んでおく画像プリロードがありますが、 これをjQueryを使って実装する方法を自分用メモとして紹介。 画像プリロードについてはHTMLとCSSは特に関連しないので スクリプトのみの記述方法について。 複数枚の画像ファイルを一度に プリロードする記述方法は以下の様になります。 ◆SCRIPT <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.
jQueryで背景に画像をフルスクリーンで表示するいろいろ【単一画像／スライドショー／ランダム】｜BLACKFLAG
今ではあちこちで見かけるようになった Webページでの背景全体の画像フルスクリーン表示。 単純に一枚の画像を表示するパターンや 複数画像を切り替えて背景でフルスクリーンスライドショーにしたり ランダムで表示する画像を切り替えたり などなど、魅せ方はさまざまですが、 これらをjQueryを使ってできるだけシンプルなスクリプトで 実装ができないか試してみたので紹介してみます。 今回は、単一画像／スライドショー／ランダム の全部で3パターン紹介しますが、 HTMLとCSSは全て同じ構成になりますので 先にこの２つのソース構成について。 まずはHTMLから。 ◆HTML <div id="container"> <div id="contents"> <div id="wrapper"> <h1>jQuery FullScreen BackGround IMG</h1> <p>ここはコンテンツエリ
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
jQueryで背景に動画をフルスクリーンで表示する方法｜BLACKFLAG
海外のサイトなどで最近たまに見かける、背景に動画をフルスクリーン表示して見せる手法。 背景全面に動画が流れることでページの演出をかなりダイナミックに見せることが出来ます。 この背景動画を簡単に実装できるjQueryプラグインもありますが YouTubeにアップされている動画が対象だったりで、 任意の動画ファイルを簡単に流すことができるものが見当たらなかったので 簡単に実験的に作ってみたのを紹介してみます。 動画を流す手法はHTML5の＜video＞タグとかも考えましたが 今回は動画再生はFlashで流すパターンにしています。 まずは動作のサンプルから。 下記リンクよりサンプル画面を表示してみてください。（別枠で表示されます） jQueryで背景に動画をフルスクリーンで表示するサンプルを別枠で表示 ※サンプルでの動画ファイルは容量を軽減する為に少々粗いものになっています。 ブラウザ枠をリサイ
jQueryアニメーションにイージング（easing）処理をつけるプラグイン【イージング動作サンプル一覧】｜BLACKFLAG
jQueryで要素にアニメーション動作をつけた際、単調な動きだけでなく、加速・減速など動きに強弱のついたエフェクト、イージング（easing）処理をつけることが出来ます。 jQueryのノーマル状態では、イージング処理は「linear」と「swing」の２つが用意されていますが、プラグインを使うことによってアニメーションに多種多様なイージング処理をつけることができるようになります。 そんなイージング処理を、様々なパターンで簡単につけることが出来るプラグインを２つ、イージング動作サンプルと併せて紹介してみます。 jQuery Easing Plugin［jquery.easing.js］ jQuery Easing Plugin［jquery.easing.js］ jQuery Easing – jQuery 日本語リファレンス もはやjQueryのイージング処理では定番のプラグイン。 プラ
jQueryでフリック／スワイプ付きの自動再生スライドショーを作成する実験｜BLACKFLAG
前回の記事で、iPhoneやiPad、Androidなどに加えてPCでも動作する フリック／スワイプ動作UIをjQueryで実装する方法を紹介しましたが、 前回の単純なフリック／スワイプのUI動作に加えて、 自動で次の画像に切り替わるスライドショー動作と メインビジュアル部分にNEXT／BACKのボタンを追加したパターンでの 画像ギャラリーを作ってみたので紹介してみたいと思います。 jQueryでフリック／スワイプ動作付きの自動再生スライドショーを作成する実験 まずは動作サンプルから。 別枠で表示する場合はこちらから 一定の間隔で自動で次の画像に切り替わります。 画像の切り替えはサムネイルクリックの他、メインビジュアル部分の左右にあるNEXT／BACKボタンと メインビジュアル部分をフリック／スワイプすることで切り替えることが可能になっています。 メインビジュアル部分にマウスオーバーしてい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
