Эффект параллакса - заставить раздел появляться позади предыдущего раздела без перемещения контента - PullRequest
Новая
       20

Эффект параллакса - заставить раздел появляться позади предыдущего раздела без перемещения контента

0 голосов
/ 08 апреля 2020

Итак, у меня сейчас есть эффект параллакса, который отлично работает, но я не могу понять, как сделать один раздел «скользящим» и открыть следующий, чтобы он выглядел как плавный переход раздела. В настоящее время мой контент во втором разделе просто прокручивается вниз, пока он не встанет на свое место, и я не могу заставить его появиться за первым разделом. В настоящее время у меня есть это: https://jsfiddle.net/165pw4ks/3/.

index. html: 

<div class="parallax-wrapper">
    <div class="frame-top"></div>
    <section class="parallax-section part1">
        <div class="frame-bottom"></div>
        <div class="part1-sticky-container">
            <div class="part1-sticky">

            </div>
        </div>
    </section>

    <section class="parallax-section part2">
        <div class="part2-content">
            <h1 class="part2-text">
                Some text here
            </h1>
        </div>
    </section>
</div>

style. css: 

body {
    margin: 0;
}

.parallax-wrapper {
    top: 100vh;
}

.parallax-section {
    position: relative;
}

.part1 {
    background: url("https://place-hold.it/1920x1080") no-repeat;
    width: 100vw;
    height: 100vh;
    background-size: cover;

    z-index: 4;
}

.frame-bottom {
    position: sticky;
    z-index: 100;
    top: calc(100vh - 40px);
    height: 40px;
    width: 100%;
    background-color: #111;
}

.part2 {
    margin: 0;

    background: url("https://place-hold.it/1920x1080") no-repeat;
    background-size: 100vw;
    width: 100vw;
    height: 100vh;

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    z-index: 1;
}

.part2-content {
    position: sticky;
    width: 30rem;
    height: 5rem;
    z-index: 1;
    background-attachment: scroll;
    background-color: transparent;
    margin-left: calc(50% - 15rem);
    top: calc(50% - 2.5rem);
}

.part2-text {
    margin: 0;
    color: white;
    font-size: 32px;
    text-align: center;
}

То, что я пытаюсь сделать, выглядит примерно так: Illustration of what I am trying to make

Буду признателен за любую помощь.

...