Parallax проблема прокрутки с абсолютными расположенными элементами

Question

я пытаюсь создать веб-сайт, который выглядит как этот

А идея сделать параллакс прокрутки содержимого над фоновым изображением.

Я не уверен, что было бы лучшим подходом к тому, чтобы изображение было вырезано так, но я использовал положение абсолютное по прямоугольному треугольному треугольнику.

Но при прокрутке есть эффект мерцания, и поэтому прокрутка параллакса выглядит не очень хорошо.

Я знаю, что есть решения, предлагающие использовать фиксированное позиционирование, но это не помогает моему делу.

Может ли кто-нибудь объяснить мне, что было бы лучшим решением для достижения этого разреза на фоновом изображении, а также прокрутки гладкой прокрутки над ним?

Спасибо

Answer 1

Вы можете создать угол края и границы по содержанию с использованием псевдо-классы. Больше информации здесь: http://lawrencenaman.com/css/responsive-slanted-divs-with-css/.

Эффективно вы бы что-то вроде этого (регулировки угла наклона, чтобы получить желаемый вид):

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

Все кредиты Лоуренс наман (http://lawrencenaman.com/), как это его решение не мое