Day8-滚动视差(上)_前有文字

今天试着写了滚动视差的网站
滚动视差主要是靠东西不同的滚动速度来做到前後落差的感觉
先看成品

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

<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;
}

把卷轴藏起来後我们简易的视差滚动网站就完成啦!!
球球的部分明天做介绍