滾動視差？CSS 不在話下

何爲滾動視差

視差滾動（Parallax Scrolling）是指讓多層背景以不一樣的速度移動，造成立體的運動效果，帶來很是出色的視覺體驗。 做爲網頁設計的熱點趨勢，愈來愈多的網站應用了這項技術。

一般而言，滾動視差在前端須要輔助 Javascript 才能實現。固然，其實 CSS 在實現滾動視差效果方面，也有着不俗的能力。下面就讓咱們來見識一二：

 

認識 background-attachment

background-attachment 算是一個比較生僻的屬性，基本上平時寫業務樣式都用不到這個屬性。可是它自己頗有意思。

background-attachment：若是指定了 background-image ，那麼 background-attachment 決定背景是在視口中固定的仍是隨着包含它的區塊滾動的。

單單從定義上有點難以理解，隨下面幾個 Demo 瞭解下 background-attachment 究竟是什麼意思：

background-attachment: scroll

scroll 此關鍵字表示背景相對於元素自己固定， 而不是隨着它的內容滾動。

background-attachment: local

local 此關鍵字表示背景相對於元素的內容固定。若是一個元素擁有滾動機制，背景將會隨着元素的內容滾動， 而且背景的繪製區域和定位區域是相對於可滾動的區域而不是包含他們的邊框。

background-attachment: fixed

fixed 此關鍵字表示背景相對於視口固定。即便一個元素擁有滾動機制，背景也不會隨着元素的內容滾動。

注意一下 scroll 與 fixed，一個是相對元素自己固定，一個是相對視口固定，有點相似 position 定位的 absolute 和 fixed。

<section class="g-word">Header</section>
<section class="g-img1">IMG1</section>
<section class="g-word">Content1</section>
<section class="g-img2">IMG2</section>
<section class="g-word">Content2</section>
<section class="g-img3">IMG3</section>
<section class="g-word">Footer</section>

$img1: 'http://pic7.photophoto.cn/20080407/0034034859692813_b.jpg';

$img2: 'http://up.enterdesk.com/edpic_source/21/00/00/210000f8e772d7fc0758e67ae4b48807.jpg';

$img3: 'https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=';

section {
    height: 100vh;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    line-height: 100vh;
    text-align: center;
    font-size: 20vh;
}

.g-img1 {
    background-image: url($img1);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

.g-img2 {
    background-image: url($img2);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

.g-img3 {
    background-image: url($img3);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

 

效果以下：

 

 

轉載:https://www.cnblogs.com/coco1s/p/9453938.html