StickyStack.jsで視差スクロールが簡単に

視差効果 早く注意を引く。これらの効果 特定の背景を視野に入れる ページをスクロールしながら。あなたは多くのウェブサイトとWordPressテーマで視差スクロールを見つけるでしょう、そしてそれらは現代のウェブデザインの大部分です.

あなたも作ることができます ユニークな視差スタイル を使用して StickyStack.js プラグインそれは jQueryの上に構築された スクロールダウンしても、メインページの各セクションは上部に固定されたままになります。.

これにより、 階層化されたWebサイトの錯覚 各ページの場所 “スタック” 他の上に。それは本当にクールで自分でセットアップするのはかなり簡単です.

設定はかなり簡単ですが、フロントエンド開発についてある程度理解する必要があります。.

あなたが最初にする必要があります 個々のページセクションを作成する メインコンテナ内このように HTMLで囲まれたものすべて, だからあなたはStickyStackのjQuery関数ですべてをターゲットにすることができます.

それはまたあなたがカスタマイズすることができる少数の選択と来る。 親コンテナ, の 積み重ねるべき要素, そして可能 ボックス影 あなたがその効果が好きなら.

これが コードのサンプルビット GitHubページから：

 $（ '。main-content-wrapper'）。stickyStack（containerElement： '。main-content-wrapper'、stackingElement： 'セクション'、boxShadow： '0 -3px 20px rgba（0、0、0、0.25）' ;））; 

これは約2年間で更新されていませんが、それでもまだ非常に信頼性の高いプラグインです。それ テストしたすべてのブラウザで動作しました （Chrome、Safari、Firefox） すべてのバージョンのjQueryをサポート.

さらに、縮小ファイルは わずか2KB これはプラグインのためのまともなサイズです.

詳細については、メインレポジトリにアクセスしてStickyStackが提供できるものをご覧ください。私はそれが最もうまくいくと思います 単一ページのウェブサイト または フルスクリーンの背景が大きいランディングページ.

あなたもチェックアウトすることができます CodePenのライブデモ ライブサイトでこれがどのように見えるかを知りたい場合.