Parallax Scrolling 視差滾動

原理是把背景圖片的移動速度放慢，讓前景圖片移動較快。利用多層背景以不同的速度移動，造成視覺上立體的感受。

特點有

較適合單頁面或資訊較少的網站
使用者只需簡單滾動滑鼠
提高使用者體驗

有幾種方式可以實作：

JavaScript

需要計算每個元素的移動位置，實作上會有些複雜。在此不多做介紹，主要針對後兩種方式。

CSS3

要注意瀏覽器的支援度。

主要是利用 background-attachment 這個背景模式屬性，來造成上下滾動時所產生的視覺差。

background-attachment 有三個模式：

scroll(預設)：背景會隨著外圍頁面滾動而移動
fixed：背景是固定，不會隨便內外圍的頁面滾動而移動。也是視差滾動使用的模式。
local：自己的區塊如果滾動時，背景也會跟著移動

e.g.

Code

 <!--banner-1 -->
    <section>
        <div class="background_image1">
        </div>
    </section>

    <section>
        <div class="content-1">
            <h2 class="title">HELLO WORLD</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis blanditiis labore
                voluptate molestiae vel eius quaerat, iusto illo minus possimus aspernatur natus ut dolore quis quisquam
                earum ratione sequi perspiciatis sunt nam in magnam? Aliquam, ducimus doloremque vel eius necessitatibus
                id hic eveniet, dolorum placeat voluptatibus earum. Laborum et fugiat repellat voluptatibus eveniet
                tempore ipsum quidem dolor. Autem aut officiis dolorem quae natus commodi ut debitis asperiores.
                Accusamus vel ea, illum adipisci velit veniam accusantium obcaecati vitae ullam nulla eius corrupti
                voluptatem fugiat voluptatibus aliquid saepe fuga? Ad illum odit molestiae, reprehenderit sequi iure
                fuga blanditiis voluptatum quaerat, ducimus eius.</p>
        </div>
    </section>

    <!--banner-2 -->
    <section>
        <div class="background_image2">
        </div>
    </section>

    <section>
        <div class="content-2">
            <h2 class="title">HELLO WORLD</h2>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae vero a sequi saepe, fuga non!
            </p>
        </div>
    </section>

    <!--banner-3 -->
    <section>
        <div class="background_image3">
            <span class="mark3">peaceful</span>
        </div>
    </section>

    <section>
        <div class="content-3">
            <h2 class="title">HELLO WORLD</h2>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta eaque dolorem officia magni.
            </p>
        </div>
</section>

body {
    margin: 0 auto;
    height: 2000px;
}

.background_image1 {
    width: 100%;
    height: 100vh;
    background-image: url('../images/diogo-sousa-ZVKodjhgJa0-unsplash.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.content-1 {
    padding: 60px;
    font-size: 18px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: justify;
    .title {
        text-align: center;
        color: aqua;
    }
    p {
        line-height: 2;
        color: rgb(2, 2, 95);
    }
}

.background_image2 {
    width: 100%;
    height: 60vh;
    background-image: url('../images/sea.jpeg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    opacity: 0.7;
}

.content-2 {
    padding: 60px;
    font-size: 15px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: justify;
    color: aquamarine;
    background-color: black;
    p {
        line-height: 2;
        color: rgb(230, 230, 243);
    }
}

.background_image3 {
    width: 100%;
    height: 100vh;
    background-image: url('../images/francesco-ungaro-nlqqldluDBw-unsplash.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    opacity: 0.7;
}

.mark3 {
    font-size: 36px;
    font-weight: bold;
    font-family: '標楷體';
    color: pink;
    padding: 10px;
    letter-spacing: 10px;
    position: relative;
    left: calc(50% - 77px);
    top: calc(50% - 28px);
    opacity: 0.7;
}

.content-3 {
    padding: 20px;
    font-size: 15px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: justify;
    color: aquamarine;
    background-color: black;
    .title {
        text-align: center;
        color: aqua;
    }
    p {
        text-align: center;
    }
}

第三方套件

網路上有一些做 Parallax Scrolling 套件，例如 parallax.js、skrollr.js、paroller.js…等等。在此介紹的是 skrollr.js。

skrollr.js 是運用動畫影格控制概念，搭配使用 CSS 語法。

擁有下列特點：

容易上手
檔案小
支援行動裝置的瀏覽器

除此之外也有一些好用的套件可用。例如：skrollr-menu、skrollr-stylesheets、skrollr-colors…等等。

使用方式

// 引用

Code

1 2	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"> </script>

// 初始化

Code

<script type="text/javascript">
    const skrollrObj = skrollr.init();
</script>
</body>

// 運用

Code

<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" 
     data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">
     test
</div>

data-0： 0 代表 SkrollrTop 的值
background-color:rgb(0,0,255)： CSS 樣式
transform[bounce]:rotate(0deg)：將 transform 從秒數，變成 SkrollTop的 px(距離)

e.g.

// 元素轉場，滾動位置從 0 到 300 時，元素背景顏色會逐漸變色跟旋轉360度

Code

1
2
3

<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-300="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">
    test
</div>

// 圖片淡出

Code

1
2
3

<div data-0="opacity: 1;" data-300="opacity: 0;">
    <img src="https://picsum.photos/id/237/200/300">
</div>

// 圖片模糊

Code

1
2
3

<div data-0="-webkit-filter: blur(0px);;" data-300="-webkit-filter: blur(5px);;">
    <img src="https://picsum.photos/id/237/200/300">
</div>

ps.使用時，每個階段的樣式要一致，data-0 到 data-300 都要加上相同樣式，例如淡出樣式 "opacity: 1;"。不能只加在其中之一。

在這只是簡單介紹一下用法，但 skrollr.js 還有提供 Keyframe 用法。如果想更深入了解，可再深入查詢。

https://ithelp.ithome.com.tw/articles/10161180
http://lala0812.logdown.com/posts/240837-skrollr-easily-implement-css3-html5-parallax-scrolling
https://ithelp.ithome.com.tw/articles/10161180
https://coderwall.com/p/we0ymg/skrollr-parallax-scrolling
https://medium.com/code4idea/flutter-day-8-水平視差滾動效果-parallax-pageview-8e29e860e196
https://github.com/Prinzhorn/skrollr
https://andy6804tw.github.io/2018/02/02/css-background-attachment/
https://wcc723.github.io/css/2013/09/25/background-att/