Scrolling Website, wo Hintergrund stationär und Inhalt Übergänge auf Klick bleibt oder blättert

Question

Im Suche nach einer Vorlage oder einem Ort, der lehrt, wie man eine Website wie diese zum Beispiel erstellen:

http://www.refletcommunication.com/en https://www.artistsweb.com/work

Wo die Seite Im Grunde bleibt es gleich, aber Sie können durchblättern und der Inhalt ändert sich. Oder klicken Sie auf Links und der Inhalt ändert sich. aber Hintergrund bleibt neutral.

Ich hoffe, das ist eine gültige Frage. Ich habe eine Portfolio-Website für mich selbst entworfen, die diesen Effekt nur nicht sicher hat, was es heißt, damit ich lernen kann, wie man es programmiert. Es hätte Inhalt auf der Hauptseite mit Links auf der rechten Seite. Wenn Sie einen Bildlauf durchführen oder auf einen Link klicken, wird der Inhalt auf den neuen Inhalt übertragen. während der Hintergrund stationär bleibt.

hoffe das macht Sinn!

Dank

Answer 1

Wenn ich verstehe Ihre Frage richtig dann der einzige Weg, die ich benutze, ist divs zu stapeln mit position: absolute auf der jeweils anderen und dann schalten Sie einfach die aktive Klasse, die zeigt an, welches Element zur Zeit sichtbar ist und diese Klasse Haben Sie z-index: 100 oder 1000 oder irgendeine Zahl, die Sie wollen, aber es muss höher als die Anzahl der gestapelten Elemente sein. In HTML fügen Sie die Klasse aktiv zu dem Element hinzu, das nach dem Laden der Seite sichtbar sein wird. Dann ändern Sie mit JS das Element mit der Klasse aktiv. In JS verwende ich:

jQuery: https://jquery.com/download/
jQuery Mausrad Plugin: https://github.com/jquery/jquery-mousewheel

HTML:

<div class="container"> 
    <div class="vertically-stacked active"> //first visible bannner 
     <h1>Hello</h1> 
    </div> 
    <div class="vertically-stacked"> //visible only if class active is added 
     <h1>World</h1> 
    </div> 
</div> 

Sie können unbegrenzte Anzahl von vertikal gestapelten Elementen haben.

CSS:

.container //container of vertically stacked elements 
{ 
    position: relative //or absolute but not static 
} 

.vertically-stacked 
{ 
    left: 0; 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    transition: all .25s; //time which takes to switch the active element 
    -moz-transition: all .25s; 
    -o-transition: all .25s; 
    -webkit-transition: all .25s; 
} 

.vertically-stacked.active 
{ 
    opacity: 1; 
    z-index: 100; 
} 

JS:

$(document).on('mousewheel', function (e) 
{ 
    var $verticallyStacked = $('.vertically-stacked'), 
     oldActive = $verticallyStacked.index($('.vertically-stacked.active')), 
     newActive; 

    $verticallyStacked.eq(oldActive).removeClass('active'); 
    if (e.deltaY < 0) //scroll down 
    {  
     newActive = oldActive + 1; 
    } 
    else //scroll up 
    { 
     newActive = oldActive - 1; 
    } 
    $verticallyStacked.eq(newActive).addClass('active'); 
});