BlackFlagで紹介しているjQueryとCSS3を使って実装するスライドショーやカルーセル等
Webサイト上でのUI系スクリプトのTIPSをまとめたページになります。
※一覧は随時更新します。
jQueryでページの最上部に位置固定したフルスクリーンスライドショー（クロスフェード）を設置する方法サンプル(別枠)
jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験サンプル(別枠)
jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験サンプル(別枠)
jQueryでレスポンシブ対応のシンプルなクロスフェードビューアーを作る方法サンプル(別枠)
jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】サンプル(別枠)
jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法サンプル(別枠)
jQueryでレスポンシブ対応のフリックスライダー（サムネイル付き）をシンプルに作る方法サンプル(別枠)
jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法サンプル(別枠)
jQueryでレスポンシブ対応の画像を分割して切り替えるスライドショーを作る実験サンプル(別枠)
jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法サンプル(別枠)
jQueryでサムネイル付きスライドショーをシンプルに作成する方法サンプル(別枠)
jQueryで画像などを自動でスライドするサムネイル付きコンテンツスライダーをシンプルに作成する方法サンプル(別枠)
jQueryで画像ロールオーバー時にその場でシンプルに拡大表示するイメージビューアーのスクリプトサンプルサンプル(別枠)
jQueryでフリック／スワイプ付きの自動再生スライドショーを作成する実験 サンプル(別枠)
jQueryでフリック／スワイプ動作の画像スライドギャラリーを作成する実験サンプル(別枠)
jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法サンプル(別枠)
jQueryでの画像などのコンテンツ要素ループスライダーの改良版サンプル(別枠)
jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法サンプル(別枠)
jQueryでシンプルなカルーセルパネルスライドUIを作成する方法サンプル(別枠)
jQueryでページ送り（ページネーション）付きのカルーセルパネルスライドUIを作成する方法サンプル(別枠)
jQueryで自動でスライドするカルーセルパネルUIを作成する方法サンプル(別枠)
jQueryでリキッドカルーセルUIに自動スライド機能を追加してみる実験サンプル(別枠)
jQueryでリキッド対応のカルーセルUIを作成する実験 サンプル(別枠)
jQueryでGoogle画像検索の様なUIを実装する実験（レスポンシブ対応）サンプル(別枠)
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法サンプル(別枠)
jQueryで横スクロールのパララックスサイトを作成する方法サンプル(別枠)
jQueryでIE8でCSSの「background-size:cover」プロパティを擬似的に再現する実験サンプル(別枠)
jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法サンプル(別枠)
jQueryでニュースティッカーをシンプルに実装する方法サンプル(別枠)
jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法サンプル(別枠)
jQueryでフレームアニメーション（パラパラアニメ）を実装するプラグイン「jquery.frameAnimation.js」サンプル(別枠)
jQueryで画像をドラッグ＆ドロップするUIを実装する実験サンプル(別枠)
jQueryでドラッグUIを実装する方法（ドラッグスクロールサンプル）サンプル(別枠)
jQueryで画像をランダムに切り替える方法サンプル(別枠)
jQueryで入力フォームの上にテキストを表示する「プレースホルダ（placeholder）」を作ってみるサンプル(別枠)
jQueryで入力フォームに文字カウント（カウントダウン）を設置する方法サンプル(別枠)
jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法サンプル(別枠)
jQueryでレスポンシブメニューを横スライドタイプでシンプルに実装する方法サンプル(別枠)
jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法サンプル(別枠)
jQueryでタブ切り替えをシンプルなスクリプトで実装するサンプルサンプル(別枠)
jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法サンプル(別枠)
jQueryでリストなどの高さが違う複数の要素のheight値を揃える方法サンプル(別枠)
jQueryで画像など順々にフェードインさせる方法サンプル(別枠)
jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法サンプル(別枠)
jQueryで背景に画像をフルスクリーンで表示するいろいろ【単一画像／スライドショー／ランダム】サンプル(別枠)サンプル(別枠)
jQueryで背景に動画をフルスクリーンで表示する方法サンプル(別枠)サンプル(別枠)
jQueryでフィルタ（フィルタリング）機能をシンプルに実装する方法サンプル(別枠)
jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法サンプル(別枠)
jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション等のイベント処理を実行させる実験サンプル(別枠)
jQueryでページ最下部までスクロールした際に外部HTML（JSON形式）化した要素を追加する方法サンプル(別枠)
jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法【複数設置対応パターン】サンプル(別枠)
jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法サンプル(別枠)
jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験サンプル(別枠)
jQueryでコンテンツ要素を点滅させる方法サンプル(別枠)
jQueryでページ遷移時にスライドアニメーションをつけてみる【改訂版】サンプル(別枠)
jQueryでページ遷移時にアニメーション効果をつけてみる。サンプル(別枠)サンプル(別枠)
jQueryでiPhone & iPadスライド型ナビゲーションメニューUIをつくってみる。サンプル(別枠)
jQueryでスクロール追尾型メニューリストを作ってみるサンプル(別枠)
jQueryアニメーションでCSS3のTransformを操作して拡大縮小／回転などを実装させるいろいろサンプル(別枠)
CSS（CSS3）のみでタブUI（ボタンアクティブ付き）を実装する方法。（Ver.2）サンプル(別枠)サンプル(別枠)
CSS（CSS3）のみでアコーディオンUIの作成方法サンプル(別枠)
CSS（CSS3）のみでLightbox風モーダルウィンドウを作成する方法サンプル(別枠)サンプル(別枠)
CSS（CSS3）のみで3D立方体を作る方法サンプル(別枠)
CSS3「transform」で3Dっぽく画像を重ね合わせてみる実験。サンプル(別枠)
CSS（CSS3）のみで、自動再生／オートスライド（スクロール）する画像ギャラリー作成方法サンプル(別枠)
CSS（CSS3）のみでスライド画像ギャラリーを作る方法サンプル(別枠)
CSS（CSS3）のみでマウスオーバーで画像拡大エフェクトを付ける方法サンプル(別枠)
CSS3 Transitionプロパティでアニメーションを実行させるパターン【ページロード／マウスオーバー／クリックアクション】サンプル(別枠)
html/css/jquery などのtipsが多彩のサイト | webサイト作成に関する自分メモ | 2013.02.25 19:11
[...] jQuery/CSS3 TIPS jQuery/CSS3 TIPS [...]
はじめまして、
パララックスデザインのソースについて探しておりました。
勉強も兼ねてですが、簡単なLPサイトで使用させていただこうと考えております。
こういったサイトがあるとすごく助かり、また勉強にもなります。
ブックマークさせていただき、ちょくちょく拝見させていただければと思います。
ありがとうございました。
＞きのぴさん
コメントありがとうございます。
その様なお言葉をいただけると
とても嬉しく励みになります。
ありがとうございます。
いろいろと紹介させていただいておりますので
Webサイト制作の際にあれこれお試しいただけると幸いです。
これからもWeb制作に少しでもお役に立てる情報を
紹介させていただきますので
引き続きよろしくお願いします。
お世話になります。
いつも使わせてもらっており、大変助かっております。
一つ要望がありますが、よろしいでしょうか？
・経歴のScriptがほしい。
内容
・スクロールするごとに、フェードするような流れ。
・文字を横からスワイプ+フェードするような感じ。
このようなスクリプトはありますでしょうか？
＞Leonさん
コメントありがとうございます。
当ブログのスクリプトをご活用いただいている様で
嬉しく思っております。
スクロールによってなにかアクションを起こす動作のスクリプトについては
以下のページで紹介させていただいております。
・jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション等のイベント処理を実行させる実験
http://black-flag.net/jquery/20140128-4943.html
上記ページのスクリプトを応用して
下記のサイトで経歴のような動きをつけています。
http://www.toyota-ttc.co.jp/history/development.html
これらの動きの構成について
参考にしていただくのは如何でしょうか。
よろしくお願いします。
コメントありがとうございます。
> ・jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション等のイベント処理を実行させる実験
> http://black-flag.net/jquery/20140128-4943.html
>
> 上記ページのスクリプトを応用して
> 下記のサイトで経歴のような動きをつけています。
> http://www.toyota-ttc.co.jp/history/development.html
>
> これらの動きの構成について
> 参考にしていただくのは如何でしょうか。
求めてたのは、上記のトヨタのような雰囲気です。
よろしくお願いします。