Velocity.js はページスクロール切り替え効果を実装します

今日は、複数ページのスクロール切り替え効果を備えた Web サイトを簡単かつ効率的に開発できる、小さな Javascript アニメーションプラグイン velocity.js を紹介します。

ブラウザのサポート

velocity.js は、IE8+、Chrome、Firefox などのブラウザをサポートし、Andriod と IOS もサポートします。

私たちは、関連ページを多数含むプロジェクトを開発しています。すべてを 1 ページに表示できないが、関連するコンテンツを効果的に読めるようにしたい場合は、興味深い効果を作成することでそれが可能になります。ページスクロール切り替え効果を使用すると、目を引く Web ページを効果的に作成できます。

すべての特殊効果は、velocity.js を通じて適用されます。 Velocity.js は、アニメーション切り替え用の jQuery プラグインです。jQuery の jQuery.animate() メソッドを再実装して、アニメーション切り替えを高速化します。 Velocity.js のサイズはわずか 7k です。jQuery.animate() のすべての機能だけでなく、色の切り替え、変換、ループ、イージング、CSS の切り替え、スクロール機能も含まれています。アニメーションにおける jQuery、jQuery UI、CSS 変換の最適な組み合わせです。 Velocity.js は内部実装で jQuery の jQuery.queue() メソッドを使用しているため、jQuery の jQuery.animate()、jQuery.fade()、jQuery.delay() メソッドよりもスムーズで、CSS のアニメーションプロパティよりもパフォーマンスも高くなります。

携帯電話やスマートウォッチなどの小型端末では全ての効果を表示することはできません。そのため、Web 上で機能を表示するのが最適ですが、閲覧を容易にするために小型端末にも対応した調整も行っています。

要点

velocity.jsは、より高速で効率的なアニメーション切り替え効果を提供するjQueryのアニメーションプラグインです。
2014年5月3日、ジュリアンはGitHubでvelocity.jsをリリースした。
velocity.jsは小さいながらも強力なプラグインです

次に、その具体的な実施方法について検討する。

アニメーションやスクロール効果を適用するには、タグ内のデータハイジャックとデータアニメーションの設定をカスタマイズして、この機能を実現する必要があります。

<body データハイジャック="オフ" データアニメーション="スケールダウン">

上記のコードは、開始アニメーション効果データアニメーションが比例して縮小されることを意味します。データアニメーションは、scaleDown、rotate、fixed、gallery、parallax、opacity、catch の合計 7 つの異なるアニメーション効果を定義します。必要に応じて任意の効果を適用できます。そして、その効果をそれぞれ示すために 7 ページのサンプルコードを作成しました。データハイジャック属性をオフに設定します。効果を確認するためにオンに設定することもできます。上記の2つのプロパティはvelocity.jsからのものです。

HTML の DOM 構造

この構造では、5 つの異なるページグループを表示します。これを 5 つのセクションに分割し、切り替え用のアイコンボタンを 2 つ定義します。

<body データハイジャック="オフ" データアニメーション="スケールダウン">
    <section class="cd-section 表示">
        <div><h2>ページスクロール切り替え効果1</h2></div>
    </セクション>
    <セクションクラス="cd-section"><div>
            <h2>ページスクロール切り替え効果2</h2></div>
    </セクション>
    <セクションクラス="cd-section">
        <div><h2>ページスクロール切り替え効果3</h2></div>
    </セクション>
    <セクションクラス="cd-section">
        <div><h2>ページスクロール切り替え効果4</h2></div>
    </セクション>
    <セクションクラス="cd-section">
        <div><h2>ページスクロール切り替え効果5</h2></div>
    </セクション>
    <ナビ>
        <ul class="cd-vertical-nav">
            <li><a href="#0" class="cd-prev inactive">次へ</a></li>
            <li><a href="#0" class="cd-next">前へ</a></li>
        </ul>
    </nav> <!-- .cd-vertical-nav -->
</本文>

CSSスタイルを追加

各セクションのスタイルをデザインすることで、表示や操作が便利になります。ニーズに応じて、対応するスタイルをいくつか作成できます。

.cd-section:first-of-type > div {
  背景色: #2b334f;
}
.cd-section:nth-of-type(2) > div {
  背景色: #2e5367;
}
.cd-section:nth-of-type(3) > div {
  背景色: #267481;
}
.cd-section:nth-of-type(4) > div {
  背景色: #fcb052;
}
.cd-section:nth-of-type(5) > div {
  背景色: #f06a59;
}

js イベント処理

data-hijacking 属性をオフに設定すると、すべてのアニメーション効果はウィンドウの相対位置に応じて拡大縮小されます。アニメーションイベントがトリガーされると、ズーム比を含む現在のウィンドウページのスタイルが、小さいから大きい、または大きいから小さいに調整されます。関連する透明性の変更についての説明。

以下のコードについては以下で詳しく説明します。まず、windowHeight はデバイスウィンドウ自体の高さを指し、これは固定値です。jQuery(window).scrollTop() はページ内のスクロールバーの高さです。上から下にスライドする場合は 0 からすべてのページの高さまでの範囲値で、下から上にスライドする場合は (すべてのページの高さから 0 まで) の範囲値です。 actualBlock.offset().top は、各セクションページから上端までの距離を表す固定値のセットです (0、各ページの高さ、各ページの高さ * 2、各ページの高さ * 3...)。各ページの高さはデバイスによって異なります。これらのコードの意味を理解すると、次の判断ステートメントがわかります。オフセット値が負のウィンドウの高さより大きい場合、つまり下から上にスライドする場合、現在のページは大きいものから小さいものに切り替わり、透明度は変化しません。y軸の値は増加し続け、ページは徐々に現在のビューウィンドウから出ていきます。オフセット値がウィンドウの高さより小さい場合、つまり上から下にスライドすると、現在のページが小さいページから大きいページへ切り替わり、透明度が徐々に透明になり、y 軸の値がゼロになり、スケーリングが実行されます。影のぼかし半径が変更されました。

//actualBlockはアニメーションするセクションです
var offset = $(window).scrollTop() - 実際のブロック.offset().top,
    ウィンドウの高さ = $(window).height();

if(オフセット >= -windowHeight && オフセット <= 0 ) {
    // ビューポートに入るセクション
       translateY = (-オフセット)*100/ウィンドウの高さ;
       スケール = 1;
      不透明度 = 1;
} そうでない場合(オフセット > 0 && オフセット <= ウィンドウの高さ) {
    //ビューポートを離れるセクション 
       スケール = (1 - ( オフセット * 0.3 / ウィンドウの高さ));
    不透明度 = ( 1 - ( オフセット / ウィンドウの高さ ) );
    翻訳Y = 0;
    boxShadowBlur = 40*(オフセット/ウィンドウの高さ);
}

上記のイベントが処理された後、さらに 2 つのクリックイベントがあります。2 つのスイッチボタンをクリックすると、ページが直接切り替わります。velocity.js のイベント処理機能には、translateUp、translateDown、scaleDown などのアニメーション効果に対するいくつかの効果などもあります。

$.速度
    .RegisterEffect("スケールダウン", {
        デフォルト期間: 800、
        通話：[ 
            [ { 不透明度: '0', スケール: '0.7', ボックスシャドウブラー: '40px' }, 1]
        ]
    });

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: