前段時間公司領導安排我把公司的官網重做一下（至於爲什麼重做我這裏就不細說了），但咱也沒寫過網頁的項目呀！不過呢咱還是有點微信小程序和基本的html基礎的，也就接下了這個任務。想想最近VUE貌似挺火的，也就順便學習一下。那接下來要說的內容就是基於VUE編寫的了。好，廢話說完了，開始~
1.視差滾動
視差滾動（Parallax Scrolling）指網頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網頁展示技術。
先看我寫的一個簡單效果：
這是一個很簡單的示例，相信大家在很多網站應該都見過這種效果。主內容和背景圖的滾動速率不一樣就實現了這種視差效果。現在來說說怎麼是實現的吧！
2.實現
咱先創建一個vue項目，寫一個簡單頁面，目錄結構如下：
我們先刪除Home.vue中的佈局代碼，重新寫一個簡單界面：
<template>
<div class="home">
<p v-for="item in 20" :key="item">aaaaaaaaaaaaaaaaaaaa</p>
<div class="bgTest"></div>
<p v-for="item in 20" :key="item">aaaaaaaaaaaaaaaaaaaa</p>
</div>
</template>
<script>
export default {
name: "Home",
components: {
}
};
</script>
<style>
.bgTest{
height: 500px;
background: url(../assets/bg.jpg) no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
font-size: 20px;
}
</style>
代碼很簡單，一個div裏面設置了一個長背景圖，上下加上p標籤用來撐高頁面使頁面可以滾動。先看一下效果圖：
可以看到隨着內容的滾動，但是背景圖片卻沒有跟着滾動，而是展示出背景圖不同的部位。這個效果也有一些網站會用到，這個實現比較簡單，值得說一下的就是css的這個屬性：
background-attachment: fixed;
這個屬性是幹嘛的呢？看介紹
因爲我的div設置了background-attachment: fixed;屬性，所以div的背景圖片是固定的。但有的同學就說，這不是我要的效果呀，我要的效果是，隨着內容的滾動，背景圖片會跟着有小幅的滾動。別急，接下來再看一個css的屬性：
background-position
那這個background-position有什麼作用呢？看介紹：
設置背景圖片的起始位置能幹嘛？大家想一下現在我們的圖片是固定的，沒有滾動，但是如果我麼設置了背景y軸或者x軸的起始位置隨着鼠標滾動而產生的不同的偏差，是不是也和背景滾動有一樣的效果了，只要我們把背景滾動的速率控制的慢一點，就能實現文章開頭的效果。好，有了思路，開始寫代碼，更改Home.vue中的代碼，添加隨着鼠標滾動改變背景位置的邏輯：
<template>
<div class="home">
<p v-for="item in 20" :key="item">aaaaaaaaaaaaaaaaaaaa</p>
<div class="bgTest" id="bgTest" :style="{'background-position-y':positionY1+'px'}"></div>
<p v-for="item in 20" :key="item+20">aaaaaaaaaaaaaaaaaaaa</p>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
positionY1: 0, //背景Y軸偏移量
Y1: 0,
ratio: 0.5 //視差偏移率
}
},
/**
*
* */
mounted() {
window.addEventListener("scroll", this.handleScroll); //創建滾動監聽，頁面滾動回調handleScroll方法
let bgTest = document.getElementById("bgTest");
this.Y1 = bgTest.offsetTop * this.ratio
},
methods: {
/**
* 背景視差偏移計算
* */
handleScroll: function() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
this.positionY1 = this.Y1 - scrollTop * this.ratio; //原始高度-滾動距離*視差係數
}
},
components: {}
};
</script>
<style>
.bgTest {
height: 500px;
background: url(../assets/bg.jpg) no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
font-size: 20px;
}
</style>
根據“bgTest”距離頂部的距離動態的計算了背景Y軸的偏移量，看看效果：
這下背景隨着鼠標滾動就會有小幅度滾動了。至於細節方面可以調整ratio的值和Y1的計算方式來優化細節。ratio的值控制背景滾動速率，Y1值控制背景起始位置。
好了大功告成。附上源碼地址：