純cssスクロール視差

1.スクロール視差とは

パララックススクロール(Parallax Scrolling)とは、多層の背景を異なる速度で移動させ、立体的な運動効果を形成し、非常に優れた視覚体験をもたらすものです.ウェブデザインのホットなトレンドとして、ますます多くのウェブサイトがこの技術を応用しています.効果は図のようになります.
一般に、スクロール視差は、フロントエンドでJavascriptを支援する必要がある.もちろん、CSSはスクロール視差効果を実現する上で、俗っぽくない能力を持っている.

2.background-attachmentを認識する

background-attachment:background-imageが指定されている場合、background-attachmentは、バックグラウンドがビューポートに固定されているか、それを含むブロックに従ってスクロールされているかを決定します.
(1)background-attachment: scroll
scrollこのキーワードは、コンテンツに従ってスクロールするのではなく、要素自体に対してバックグラウンドが固定されていることを示します.
(2)background-attachment: local
localこのキーワードは、要素に対する背景の内容が固定されていることを示します.要素がスクロールメカニズムを持っている場合、背景は要素の内容に従ってスクロールされ、背景の描画領域と位置決め領域は、スクロール可能な領域に対して枠線ではなく、スクロール可能な領域に対してスクロールされます.
(3)background-attachment: fixed
fixedこのキーワードは、ビューポートに対してバックグラウンドが固定されていることを示します.1つの要素がスクロールメカニズムを持っていても、背景は要素の内容に従ってスクロールされません.
scrollとfixedに注意してください.1つは相対要素自体が固定され、1つは相対ビューポートが固定され、positionが位置決めしたabsoluteとfixedに似ています.
 CodePen Demo — bg-attachment Demo(https://codepen.io/Chokcoco/pen/xJJorg)

3.コード実装

html:

1   <section class="g-word">Headersection>
2   <section class="g-img g-img-1">IMG1section>
3   <section class="g-word">Content1section>
4   <section class="g-img g-img-2">IMG2section>
5   <section class="g-word">Content2section>
6   <section class="g-img g-img-3">IMG3section>
7   <section class="g-word">Footersection>

css:

 1     * {
 2       padding: 0;
 3       margin: 0;
 4     }
 5 
 6     section {
 7       height: 100vh;
 8       line-height: 100vh;
 9       text-align: center;
10       font-size: 50px;
11       font-weight: bold;
12     }
13 
14     .g-img {
15       background-attachment: fixed;
16       background-size: cover;
17       background-position: center center;
18     }
19 
20     .g-img-1 {
21       background-image: url('./image/01.jpg');
22     }
23 
24     .g-img-2 {
25       background-image: url('./image/02.jpg');
26     }
27 
28     .g-img-3 {
29       background-image: url('./image/03.jpg');
30     }

画像リソースは自分で入力します.
これでcssスクロール視差効果の作成が完了する.
転載先:https://www.cnblogs.com/e-cat/p/9466689.html