画面のサイズに関係なく、ページの特定のセクションがビューポートの高さの少なくとも 100% を占めるようにしたいと考えています。また、セクションのコンテンツと背景を視差効果でスクロールしたいと考えています。
ページにjQueryがあり、次を使用してセクション.parallaxをビューポートの高さ全体にサイズ変更します。
var imageFit = function() {
windowHeight = $(window).height();
$('.parallax').css('min-height', windowHeight);
};
$(document).ready(imageFit);
$(window).resize(imageFit);
単位については知っていますが、ブラウザーのサポートが不十分なため、使用したくありませんvh。（ちなみに、私はJavaScriptがとても苦手なので、可能であればこれを改善するのを助けてください）.vw
ビューポートの高さが 100% のセクションがあるペンを次に示します: http://codepen.io/Mest/full/GpycL (Codepen に慣れていない場合は、左下隅にある [編集] をクリックしてコードを編集してください)。
これは問題なく動作しますが、視差効果を実装する方法がわかりません。視差効果を作成するために、Skrollrを使用して CSS プロパティを変更しようとしました。ただし、上記のスクリプトからsection完全なビューポートの高さのheight値を取得しているため、Skrollr は高さを考慮していないようで、スクロールすると即座に視差の「遷移」が発生します。上記のサイズ変更スクリプトがなくてもうまく機能します。
残念ながら、Skrollr を使用した例を設定することはできませんが、CSS でセクションにX px の高さの値を指定すると、最初のX pxのスクロール中に Skrollr が正常に機能することを確認しました。
したがって、私の質問は次のとおりです。
上記のスクリプトで Skrollr にセットを認識させるにはどうすればよいheightですか?
また、
私が望む効果を作成するためのより良い/より簡単な方法はありますか? 別のスクロール アニメーション ライブラリを使用するか、ビューポートの高さを埋める別の方法を使用しますか?