Rellax.js - Vanilla JavaScriptを使用した無料の視差機能

視差スクロール 正しく行われると信じられないほどに見えます。すべてのWebサイトに必要な機能ではありませんが、クリエイティブサイトやランディングページ、視差要素には最適です。 早く注意を引く.

たくさんの無料のJavaScriptライブラリがあります。 アニメーションスクロール効果 しかし、多くの人は肥大化しているか、一部の人にとっては複雑すぎます。.

だからこそ私はお勧めします Rellax.js 視差の必要性のために。これは、一般的なJavaScriptに基づいて構築された無料のオープンソースプラグインです。 依存関係はありません.

デフォルトでは、 単純な関数呼び出しだけが必要 視差クラスをページ要素に割り当てる。次に、スクロールしながら、これらの要素 固定する そしてユーザーの視点に沿って動く.

これらの要素をカスタマイズして、ページ要素の近く、遠く、または後ろに表示することができます。これにより、 深さの錯覚 ページ上で、それはすべて1つの単純なJavaScriptライブラリを介して動作します.

もしあなたがコピーをダウンロードしたいのであれば、RellaxのすべてのソースコードがGitHubで無料で入手可能です。.

全体の設定 単一のJS関数を使用します ターゲティング .レラックス こんな感じのクラス：

 var rellax = new Rellax（ '。rellax'）; 

あなたはかなり使うことができることに注意してください あなたが望む任意のクラス, しかしデモ例では .レラックス 簡単のために.

ここから、あなただけ 視差要素をラップする とdivの内側 .レラックス クラスと 速度属性を設定する. これは データレラックス速度 -10から+10までの値を受け入れるカスタム属性.

これが スニペットの例 デモページのHTMLから：

 
 私はとても遅くて滑らかだ 
 

あなたもすることができます 中心要素 ページ上 要素位置をカスタマイズする CSS経由.

Rellaxは、ページの構成方法やページ上のCSS要素の定義方法を教えてくれません。それだけです 自然な視差スクロール効果を作り出す 純粋なJavaScriptで。どのようにこれを使用するかはあなた次第です.

を見る ライブデモ, メインサイトを覗くか、GitHubリポジトリを閲覧してください。これには、Rellax.jsを使った実際のWebサイトへのリンクとともに、いくつかのドキュメントが含まれています。.

そして何よりもまず、チームは常にプルリクエストを受け入れてくれるので、何か問題に気付いたり、機能についての提案があったりした場合は、クイックメッセージをチームに送ってください。.