0

Skrollr を相対モードで使用して実験するための簡単なページを作成しました。2 つのセクションを設定しました。最初のセクションにはタグがあり、2 番目のセクションには

その中にタグを付けます。最初のセクションの下部がビューポートの上部にある場合、最初のセクションはフェードアウトするはずです。ただし、そのセクションを使用する代わりに、タグを使用してアニメーションをトリガーしています。

<section id='burger'>
            <div class='background' data-top="opacity:1" data-top-bottom="opacity:0" data-anchor-target="#burger">
                    <h1>Welcome to the page!</h1>
            </div>
        </section>

2 番目のセクションにも背景の div があり、そのアニメーションは飛行機の画像で、上部が 100 ピクセル、中央が 0 ピクセル、下部が -100 ピクセルから始まる必要があります。画像は常に -100px の位置にあるように見えます。

 <section id='plane'>
            <div class='background' data-top="background-position: 50% 100px;" data-center="background-position: 50% 0px;" data-bottom="background-position: 50% -100px;" data-anchor-target="#plane">
                <p>Cras nulla odio, fringilla nec libero in, tristique rutrum elit. Phasellus ut tellus non metus pellentesque lacinia at eget tellus. Sed dapibus turpis eu rhoncus lacinia. Mauris ornare arcu et justo facilisis iaculis. Nam ultricies accumsan lacinia. Morbi sit amet nisi vitae turpis feugiat elementum. Phasellus tempor porta arcu non semper. Quisque vitae urna sed mi scelerisque tincidunt. Mauris nulla odio, tempus sit amet fermentum ac, egestas in lacus. Aliquam suscipit velit enim, ac pharetra magna gravida sit amet. In eu libero rhoncus purus tincidunt commodo a venenatis purus. Sed a nibh sed mauris consequat blandit. Morbi ut faucibus ante. In nunc arcu, sodales vel molestie sit amet, mollis quis urna. Aenean pretium facilisis erat. </p>
            </div>
        </section>

CSS:

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}

h1{
    padding: 0;
    margin: 0;
}

section{
    height: 100%;
    min-height: 100%;
    width: 100%;
}


.background{
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    min-height: 100%;
    width: 100%;
}

#burger{
}

#burger .background{
    background-image: url('../img/burger.jpg');
    border: 3px solid green;
}

#plane .background{
    background-image: url('../img/plane.jpg');
}

私は何か明らかなことを見過ごしていると確信しています..しかし、それが何であるかを理解できないようです。私が話していることをデモするために、簡単な日付をアップロードしました。事前に助けてくれてありがとう！

デモリンク

4

1 に答える 1