ページごとに小さな広告を1つ以上表示することはありません。ご安心ください。このメッセージを非表示にすると、再度催促されることはありません。
はじめに
Visibilityは、任意の要素にアタッチして、特定の可視性イベントが発生したときにトリガーできるコールバックのセットを提供します。
可視性にイベントをアタッチする方法はさまざまです。以下は、より一般的な方法の一部です。
無限スクロール
ユーザーがコンテンツのスクロールをほぼ完了したときに、コンテナにさらにコンテンツを読み込み始めたい場合。
遅延読み込み画像
ユーザーに表示される直前に画像の読み込みを開始したい場合。
反応型コンテンツ
ユーザーのスクロール量に基づいて要素を変更したい場合。
固定ヘッダー
要素が通過したときにビューポートに固定し、その後元の静的な位置に戻したい場合。
イベントトラッキング
たとえば、ブログ投稿の30％が読まれたときにGoogleアナリティクスにログを記録するなど、ユーザーのコンテンツへのエンゲージメントと一致する分析イベントをアタッチしたい場合。
使用方法
使用方法
Visibilityは、画面上の要素の位置にイベントをアタッチするために使用できるコールバックのセットを提供します。
スクロールの変更ごとに、要素のコールバックをトリガーするアニメーションフレームリクエストがトリガーされます。
// コールバックの例 $('.demo.segment') .visibility({ onTopVisible: function(calculations) { // 上部が画面上に表示される }, onTopPassed: function(calculations) { // 要素の上部が通過する }, onUpdate: function(calculations) { // 計算が調整されるたびに何かを実行する updateTable(calculations); } }) ;
| 計算結果 | 値 |
|---|---|
| pixelsPassed (通過ピクセル数) | |
| percentagePassed (通過割合) | |
| fits (適合) | |
| width (幅) | |
| height (高さ) | |
| onScreen (画面上) | |
| offScreen (画面外) | |
| passing (通過中) | |
| topVisible (上部表示) | |
| bottomVisible (下部表示) | |
| topPassed (上部通過) | |
| bottomPassed (下部通過) |
コールバック頻度の変更
Visibilityのデフォルト設定では、各コールバックは条件が満たされた最初の時のみ発生します。その後はイベントは発生しません。
continuous: trueを設定すると、コールバック条件が満たされるたびにコールバックが発生します。たとえば、「最上部表示」コールバックを設定した場合、ページの上部が表示されている場合、スクロールの変更ごとにこのコールバックが発生します。
once: falseを設定すると、コールバックがtrueになった時ごとにコールバックが発生します。したがって、「最上部表示」の例を使用すると、要素の上部を通過するたびにコールバックが発生します。上にスクロールして要素を再び通過した場合でも発生します。
イベントログ
コールバック
コールバックは2つのカテゴリに分けられます。標準イベントは、条件がtrueと評価された最初のアニメーションフレームで発生します。
標準イベント
| イベント | 発生条件 | 擬似コード |
|---|---|---|
| onOnScreen | 要素の一部が現在のスクロールビューポート内にある |
screen.bottom >= element.top && screen.bottom <= element.bottom
|
| onOffScreen | 要素の一部も現在のスクロールビューポート内にはない |
screen.bottom <= element.top || screen.top >= element.bottom
|
| onTopVisible | 要素の上端が画面の下端を超えた |
screen.bottom >= element.top
|
| onTopPassed | 要素の上端が画面の上端を超えた |
screen.top >= element.top
|
| onBottomVisible | 要素の下端が画面の下端を超えた |
screen.bottom >= element.top
|
| onPassing | 要素の一部が画面上に表示されている |
screen.bottom >= element.top && screen.top < element.bottom
|
| onBottomPassed | 要素の下端が画面の上端を超えた |
screen.top >= element.bottom
|
グループ化されたイベント
onPassedを使用すると、要素の異なる割合またはピクセルが通過した後、発生するコールバックのコレクションを指定できます。
| イベント | 発生条件 | 例 |
|---|---|---|
| onPassed {} | 要素のコンテンツの上端から特定の距離が通過しました（パーセンテージまたはピクセル）。 |
onPassed: { 40: function() { // 40ピクセル通過時に何かを実行する }, '80%': function() { // 80％で何かを実行する } }
|
逆イベント
逆イベントは、同じ条件下で発生しますが、ユーザーがページを上にスクロールしたときに発生します。
| イベント | 発生条件 | 擬似コード |
|---|---|---|
| onTopVisibleReverse | 要素の上端が画面の下端を超えていない |
screen.bottom >= element.top
|
| onTopPassedReverse | 要素の上端が画面の上端を超えていない |
screen.top >= element.top
|
| onBottomVisibleReverse | 要素の下端が画面の下端を超えていない |
screen.bottom >= element.top
|
| onPassingReverse | 要素の上端が画面の上端を超えていないが、下端は超えている |
screen.bottom >= element.top && screen.top < element.bottom
|
| onBottomPassedReverse | 要素の下端が画面の上端を超えていない |
screen.top >= element.bottom
|
ビヘイビア
Visibilityには、コンポーネントとの対話に役立ついくつかの便利なビヘイビアが含まれています。
| ビヘイビア | 使用方法 |
|---|---|
| コールバックを無効にする | コールバックを一時的に無効にします。これは、スクロール位置を調整し、位置の変更中にコールバックをトリガーしたくない場合に役立ちます。 |
| コールバックを有効にする | コールバックを再度有効にします。 |
| 画面上にあるか | 要素が画面上にあるかどうかを返します。 |
| 画面外にあるか | 要素が画面外にあるかどうかを返します。 |
| 通過したピクセル数を取得する | 要素の上端からの現在の要素で通過したピクセル数を返します。 |
| 要素計算を取得する | オブジェクトとして要素の計算結果を返します。 |
| 画面計算を取得する | オブジェクトとして画面の計算結果を返します。 |
| 画面サイズを取得する | オブジェクトとして画面サイズを返します。 |
例
無限スクロール
ページネーションの代わりに、onBottomVisibleを使用して、コンテナの下端が表示されたときにコンテンツを自動的に読み込むことができます。
$( '.infinite.example .demo.segment' ).visibility({ once: false, // 新しいコンテンツの読み込み時にサイズを更新 observeChanges: true, // 下端が表示されたらコンテンツを読み込む onBottomVisible: function() { // 最大5回読み込む window.loadFakeContent(); } });
無限スクロールの例
コンテンツを追加しています…
遅延読み込み画像
Visibilityには、一般的な表示イベントの設定のためのいくつかのショートカットが含まれています。type: 'image'を設定すると、画像のtopVisibleに自動的にイベントがアタッチされ、data-srcの内容がsrcとして読み込まれます。
コンテンツの読み込み時にジャンプしないように、現在のsrcにプレースホルダー画像を指定するか、プレースホルダーを指定せず、画像を表示することができます。
デフォルトでは、画像はアニメーションなしで表示されますが、名前付きのトランジションと、画像をビューにアニメーション表示するために使用する時間を指定することもできます。
$( '.demo.items .image img' ).visibility({ type : 'image', transition : 'fade in', duration : 1000 });
Elliot Fu
Helen Troy
Jenny Hess
Veronika Ossi
Stevie
Steve Jobes
Ade
Chris
Joe Henderson
Laura
段階的な変更
各コールバックは、計算されたすべての値を最初の引数として受信し、次のように要素を調整できます。
$( '.changing.example .demo.segment' ).visibility({ once : false, continuous : true, onPassing : function(calculations) { var newColor = 'rgba(0, 0, 0, ' + calculations.percentagePassed +')'; $(this).css( 'background-color', newColor ); } });
コンテンツをビューポートに固定する
Visibilityは、コンテンツをページのビューポートに固定するための軽量な方法を提供します。type: fixedを使用すると、要素がビューポートに表示された後、fixedクラスが追加されます。このクラス名を使用して、要素が表示された後、特別なレイアウト条件をアイテムに割り当てることができます。
特別なVisibilityタイプfixedを使用すると、プレースホルダー要素が自動的に作成されます。この要素は、要素が表示された後、表示または非表示になり、要素が「固定」され、通常のレイアウトフローから削除された場合でも、ページの位置が変わらないようにします。
この例では、要素が表示されると、ビューポートに固定し、背景色とボックスシャドウを追加して、他のコンテンツの上にフロートできるようにします。また、隣接するプレースホルダー要素を表示して、メニューがコンテンツフローに残っている場合と同じようにコンテンツのオフセットが維持されるようにします。
$( '.overlay.example .overlay' ).visibility({ type : 'fixed', offset : 15 // 画面の上部から少しスペースをとる });
.visibility.example .overlay { background-color: #FFFFFF; padding: 0em; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); transition: all 0.5s ease; background: transparent; } /* スタイルを変更 */ .visibility.example .fixed.overlay { position: fixed; padding: 1em; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
設定
機能Visibilityの動作を設定する設定
| 設定 | デフォルト | 説明 |
|---|---|---|
| once | true | falseに設定すると、要素が条件の閾値を超えるたびにコールバックが発生します。 |
| continuous | false | trueに設定すると、要素が条件を超えるたびにコールバックが発生し、閾値に達した直後だけではありません。 |
| type | false | 画面上に表示されたときに画像を読み込むにはimageに設定します。表示されたときにfixedクラス名を追加するにはfixedに設定します。 |
| initialCheck | true | 初期化時にVisibility条件をすぐに確認するかどうか |
| context | window | Visibilityが使用するスクロールコンテキスト。 |
| refreshOnLoad | true | ウィンドウのload時にVisibility条件を確認するかどうか。これにより、画像の読み込み後にコンテンツの位置が正しく更新されます。 |
| refreshOnResize | true | ウィンドウのresize時にVisibility条件を確認するかどうか。コンテンツのサイズ変更が位置の連続的な変更を引き起こす場合に役立ちます。 |
| checkOnRefresh | true | refreshの呼び出し時にVisibility条件を確認するかどうか。これらの呼び出しは、resize、load、または手動で$('.foo').visibility('refresh')を呼び出すことによってトリガーできます。 |
| zIndex | 1 | type: 'fixed'を使用する場合にz-indexを指定します。2.2の新機能 |
| offset | 0 | コンテキストのscrollTopをピクセル単位で調整する値。ページに固定されたコンテンツの下にコンテンツを表示する場合に役立ちます。 |
| includeMargin | false | 要素の計算にマージンを含めるかどうか |
| throttle | false | 整数の値に設定すると、スクロール位置はこのms値を使用してデバウンスされます。falseはrequestAnimationFrameでデバウンスします。 |
| observeChanges | true | 要素のDOMサブツリーに変更が加えられたときにコンテンツを自動的に更新するかどうか |
| transition | false | type: imageを使用する場合、読み込まれた画像を表示する際のトランジションを指定できます。 |
| duration | 1000 | type: imageを使用する場合、トランジションの時間を指定できます。 |
Visibilityコールバック
名前付きVisibilityイベントで発生するコールバック
| コンテキスト | 説明 | |
|---|---|---|
| onTopVisible | $element | 要素の上端が画面の下端を超えた |
| onTopPassed | $element | 要素の上端が画面の上端を超えた |
| onBottomVisible | $element | 要素の下端が画面の下端を超えた |
| onPassing | $element | 要素の一部が画面上に表示されている |
| onBottomPassed | $element | 要素の下端が画面の上端を超えた |
| onTopVisibleReverse | $element | 要素の上端が画面の下端を超えていない |
| onTopPassedReverse | $element | 要素の上端が画面の上端を超えていない |
| onBottomVisibleReverse | $element | 要素の下端が画面の下端を超えていない |
| onPassingReverse | $element | 要素の上端が画面の上端を超えていないが、下端は超えている |
| onBottomPassedReverse | $element | 要素の下端が画面の上端を超えていない |
画像コールバック2.2の新機能
type: 'fixed'を使用する場合にのみ発生するコールバック
| コンテキスト | 説明 | |
|---|---|---|
| onLoad | img | 画像の読み込みが完了した後に発生します。 |
| onAllLoaded | 最後に読み込まれたimg | 同時に初期化されたすべてのimgが読み込まれた後に発生します。 |
固定コールバック2.2の新機能
type: 'fixed'を使用する場合にのみ発生するコールバック
| コンテキスト | 説明 | |
|---|---|---|
| onFixed | $element | 要素にposition: fixedが割り当てられた後に発生します。 |
| onUnfixed | $element | 要素がfixed位置から削除された後に発生します。 |
ユーティリティコールバック
名前付きVisibilityイベントで発生するコールバック
| コンテキスト | 説明 | |
|---|---|---|
| onUpdate(calculations) | $element | 要素の計算が更新されるたびに発生します。 |
| onRefresh | $element | 要素のVisibilityが更新されるたびに発生します。 |
DOM設定DOM設定は、このモジュールがDOMとどのようにインターフェースするかを指定します。
| 設定 | デフォルト | 説明 |
|---|---|---|
| namespace | visibility | イベントの名前空間。モジュールのティアダウンが、要素にアタッチされている他のイベントに影響を与えないようにします。 |
| className |
className : { fixed : 'fixed', }
|
状態にスタイルを適用するために使用されるクラス名 |
デバッグ設定デバッグ設定は、コンソールへのデバッグ出力を制御します。
| 設定 | デフォルト | 説明 |
|---|---|---|
| name | 可視性 | デバッグログで使用される名前 |
| silent | False | 他のデバッグ設定に関係なく、エラーメッセージを含むすべてのコンソール出力を抑制します。 |
| debug | False | コンソールに標準的なデバッグ出力を提供します。 |
| performance | True | コンソールに標準的なデバッグ出力を提供します。 |
| verbose | True | コンソールに補助的なデバッグ出力を提供します。 |
| errors |
error : { method : '呼び出したメソッドは定義されていません。', }
|
|