Html5UP Highlights Änderungen. Wie ändere ich das Hintergrundverhalten?

Question

Ich versuche, ein paar Änderungen an der HTML5UP-Highlights-Website vorzunehmen. Sie können aus der Vorschau hier https://html5up.net/highlights sehen, dass als scrollen Sie zum nächsten Abschnitt der Seite nach unten das Hintergrundbild ändert wie folgt aus:

Dann, wenn Sie das Fenster das ursprüngliche Hintergrundbild angezeigt wird, die Größe und die zweites Bild wird in dem Inhalt wie folgt enthalten:

ich versuche, das Hintergrundbild Änderungen im ersten Screenshot um herauszufinden, wie. Ich versuche immer den Originalhintergrund wie im zweiten Screenshot darzustellen, unabhängig von der Bildschirmgröße und schließe immer die Teilbilder in den Inhalt ein. Im Grunde versuche ich den zweiten Screenshot in allen Bildschirmgrößen zu emulieren.

kann ich sehen, gibt es diese Abschnitte im CSS für verschiedene Bildschirmgrößen:

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

So habe ich dies für die Hauptversion auch geändert und die Anzeige auf Kommentar: keine.

Dies scheint die Inhalte Bilder unabhängig von Screenshot hinzufügen, aber ich kann nicht herausfinden, was ändert sich das Hintergrundbild auf dem Bildschirm Größe ändern?

Answer 1

1. Teil: entfernen Sie den Hintergrund Übergang

den Hintergrundübergangseffekt zu deaktivieren, schauen Sie in Ihrer assets/js/main.js Datei. Sie finden einen Titel mit dem Kommentar // Main sections. (Zeile 156+). Ein wenig tiefer, finden Sie folgendes:

// Create bg and append it to body. 
    $bg = $('<div class="main-bg" id="' + $this.attr('id') + '-bg"></div>') 
     .css('background-image', (
      'url("css/images/overlay.png"), url("' + $primaryImg.attr('src') + '")' 
     )) 
     .appendTo($body); 

Dies erstellt ein Element für das Hintergrundbild, das vom aktuellen Element abhängt.

Und danach, Sie werden den Code zum Hinzufügen/Entfernen dieses Elements mit oder ohne Übergang (Linie 194+) finden:

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); }; 

} 

Sie können einfach löschen oder diesen Teil kommentieren, und der Übergangseffekt sollte weg sein.

2. Teil: immer der Inhalt Bilder

Hier bereits Sie den richtigen Platz in der assets/css/main.css Datei gefunden. Nur

gesetzt

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

und entfernen Sie die min-height Eigenschaft:

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

Nein alles shoud als zweiten Screenshot arbeiten.