Parallax Scroll-Ausgabe mit absoluten positionierte Elementen

Question

ich eine Website zu erstellen Ich versuche, die wie diese

Und die Idee aussieht, ist eine Parallaxe zu machen, den Inhalt über das Hintergrundbild zu scrollen.

Ich bin nicht sicher, was wäre der beste Ansatz, um das Bild so schneiden zu lassen, aber ich habe eine absolute Position auf einem rechtwinkligen Dreieck verwendet.

Aber wenn ich blättern gibt es einen Flimmereffekt und so sieht die Parallax Scroll nicht gut aus.

Ich weiß, dass es Lösungen gibt, die eine feste Positionierung vorschlagen, aber das hilft meinem Fall nicht.

Kann mir jemand erklären, was wäre die beste Lösung, um den Schnitt auf dem Hintergrundbild zu erzielen und auch eine glatte Parallaxe über sie zu scrollen?

Danke

Answer 1

Sie Winkel Ecken und Kanten auf Content-Klassen mit Pseudo erstellen können. Mehr Infos hier: http://lawrencenaman.com/css/responsive-slanted-divs-with-css/.

Effektiv würden Sie so etwas wie dieses haben (justieren der Schrägungswinkel Ihren gewünschten Look zu erhalten):

.header .skew:before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    overflow: visible; 
    width: 100%; 
    height: 250px; 
    background: #00bcd4; 
    z-index: -1; 
    -webkit-transform: skewY(-2deg); 
    -moz-transform: skewY(-2deg); 
    -ms-transform: skewY(-2deg); 
    -o-transform: skewY(-2deg); 
    transform: skewY(-2deg); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: initial; 
} 

Alle Kredit zu Lawrence Naman (http://lawrencenaman.com/), da dies seine Lösung ist nicht mein