今天試著寫了滾動視差的網站
滾動視差主要是靠東西不同的滾動速度來做到前後落差的感覺
先看成品

先做最上面的文字跟刷子的部分

<div class="bg">
    <div class="scroll_thing" style="display: grid; justify-items: center;">
        <span class="brush">
            <i class="fas fa-brush" style="font-size: 128px;"></i>
            <div class="text text1">滾動看看網站</div>
        </span>
    </div>
</div>

先幫bg背景加上一個高度讓頁面可以滾動，然後幫他加一個圖片背景

.bg{
    height: 400vh;
    background-image: url("bg1.jpeg");
    background-size: cover;
}

加上background-size: cover; 讓背景圖片可以填滿整個畫面，避免圖片重複

前面有提到，滾動視差是靠前後不同的滾動速度做出來的效果，所以這邊我們要先讓背景不要動

background-attachment: fixed; 可以讓背景固定在原地不動

這樣子就已經有視差滾動的雛型了，後面不動前面動
但我們再加一些東西讓畫面有趣一點

先讓刷子的滾動方向跟滑鼠滾動方向相同~
方法就是跟做卷軸時的拉桿一樣

var scroll_ = 0;  //滾動多少
$(window).scroll(function () {
    scroll_ = $(this).scrollTop()
    $('.brush').attr("style", "top:" + scroll_ + "px");
})

因為我們的刷子跟滾動速度完全相同所以看起來是完全沒在動的
這裡我們幫刷子加一點速度

用的是data-自訂屬性

在brush的HTML中加上data-speed="1.3"

然後在JS中把讓brush滾動的這一行改成下面這樣

$('.brush').attr("style", "top:" + scroll_* $('.brush').data('speed') + "px");

把滾動的數值乘上我們剛剛加上的速度，讓滾動的速度增加

brush的滾動速度>捲軸滾動速度後，就可以做出滾動後離開畫面的效果
但因為是往下滾動的關係，如果brush持續存在，內容就會被一直往下增加，所以我們需要讓brush滾動到一個距離後便從畫面中消失

這邊先在brush的CSS中加上display: block; 然後新增一個CSS

.showout {
    display: none;
}

這邊需要把這個CSS放在最下面，以免讀取時先讀到他再讀到brush的CSS，他就會沒有作用

然後再到JS加上判別式

if (scroll_ > 1080) {
    $('.brush').addClass("showout");
} else {
    $('.brush').attr("style", "top:" + scroll_* $('.brush').data('speed') + "px");
    $('.brush').removeClass("showout")
}

利用.addClass()這個函式，把剛剛寫好的showout加到brush的class中，讓滾動超過1080時brush消失，反之再把showout「remove掉」就可以再出現了

這邊我幫下面的文字也做了一點動畫，讓他有消失再回來的效果

然後回到HTML在bg中scroll_thing外面加上三個div，分別放字

<div class="text text2">現在</div>
<div class="text text3">可以</div>
<div class="text text4">再滾回去了</div>

這邊我想做的是滾動到指定位置後給他出現變化的部分

先在CSS中先把位置排好後設上display: none;

一樣新增一個CSS

.showin {
    display: block;
}

到JS中一樣是以滾動距離加上.addClass()

if (scroll_ > 1300) {
    $('.text2').addClass("showin")
} else $('.text2').removeClass("showin")
if (scroll_ > 1500) {
    $('.text3').addClass("showin")
} else $('.text3').removeClass("showin")
if (scroll_ > 1700) {
    $('.text4').addClass("showin")
} else $('.text4').removeClass("showin")

記得要加上滾動後他也會往下的這行，不然即使他showin了，也已經被滑上去看不到了

for (let i = 2; i <= 4; i++) {
    $('.text' + i).attr("style", "top:" + scroll_ + "px");
}

接下來我們把旁邊的捲軸藏起來

*::-webkit-scrollbar {
    width: 0px;
}

把捲軸藏起來後我們簡易的視差滾動網站就完成啦!!
球球的部分明天做介紹