Html5UPの変更点が強調表示されます。背景の振る舞いを変更するには？

Question

私はHTML5UPのハイライトサイトをいくつか変更しようとしています。ウィンドウのサイズを変更する場合

そして、元の背景画像が表示されて：あなたはページの次のセクションにスクロールダウンすると、このような背景画像の変更があることここにプレビューhttps://html5up.net/highlightsから見ることができます第二の画像は、このようなコンテンツに含まれるようになります。

私は最初のスクリーンショットでどのように背景画像の変更をうまくしようとしています。スクリーンサイズに関係なく常に2番目のスクリーンショットと同じように元の背景を表示しようとしていて、常にコンテンツにサブ画像を含めています。基本的には、すべての画面サイズで2番目のスクリーンショットをエミュレートしようとしています。

私は、これらのセクションでは、さまざまな画面サイズのためのCSSにある見ることができます：

@media screen and (max-width: 980px) {  
    .main .image.primary { 
         display: block; 
         margin: 0 0 4em 0; 
     } 
    } 

だから私は、あまりにもメインバージョンのためにこれを変更し、表示コメントアウトしました：なし。

.main .image.primary { 
     /*display: none; */ 
     display: block; 
     margin: 0 0 4em 0; 
    } 

これはスクリーンショットに関係なくコンテンツイメージを追加するように見えますが、画面のサイズ変更の背景イメージを変更することはできません。

Answer 1

第一部分：あなたのassets/js/main.jsファイルを調べ、バックグラウンドのトランジション効果を無効にするには、バックグラウンド移行

を削除します。コメント// Main sections.（行156+）の部分タイトルがあります。少し下に、あなたは次を見つけるでしょう：

これは、現在の要素に依存する背景画像の要素を作成します。

その後、あなたはとか、トランジション（ライン194+）せずにこの要素を追加/削除するためのコード見つけることができます：

if (skel.canUse('transition')) { 

    options.init = function() { $bg.removeClass('active'); }; 
    options.enter = function() { $bg.addClass('active'); }; 
    options.leave = function() { $bg.removeClass('active'); }; 

} 
else { 

    $bg 
     .css('opacity', 1) 
     .hide(); 

    options.init = function() { $bg.fadeOut(0); }; 
    options.enter = function() { $bg.fadeIn(400); }; 
    options.leave = function() { $bg.fadeOut(400); }; 

} 

あなたはちょうどその部分を削除したり、コメントすることができ、およびトランジション効果行ってはならない。

第二部分：常にコンテンツの画像ここで

はすでにassets/css/main.cssファイル内の正しい場所を見つけた示しています。ただ、

.main .image.primary { 
    display: block; 
} 

を設定し、MIN-heightプロパティを削除します。

.main .container:before { 
    /*min-height: calc(100vh - 13em);*/ 
    content: ''; 
    display: inline-block; 
    vertical-align: middle; 
    width: 1px; 
} 

んが、すべてはあなたの第二のスクリーンショットのように動作していないshoud。