當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

b站首页banner景深移动特效 bilibili秋

發布時間：2024/1/8 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 b站首页banner景深移动特效 bilibili秋小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

看到b站的animation-banner效果太妙了,就自己也想仿寫一個.去查了查資料鼓搗出來一個.

首先是成品展示

大家可能覺得這個效果看起來很復雜,其實拆開來看比較簡單.
他的效果就是實現了一個鏡頭聚焦,那么我們分步驟進行講解

step1

首先,讓圖層跟隨鼠標進行移動,大家應該已經想到怎么辦了,但是有個問題,每個圖層跟隨鼠標移動的距離不能相同,這里可以用循環進行移動距離的迭代.

step2

其次是讓圖層跟隨鼠標的移動距離進行清晰度的變化,和上述的辦法類似,也是構造一個函數來計算清晰度,可以看到,隨著鼠標的移動,最后和靠前的圖層清晰度都變低(后面稱之為失焦點),而靠中間的圖層清晰度變高(后面稱之為聚焦點).我們可以知道,這個偏移距離和焦點的轉移是有關系的

實際上這個函數有很好的選擇,就是我們小學二年級就學過的的二次函數,兩端的數值大,中間的數值小,符合我們的要求.
然后我們利用圖層的index把六個圖層按順序排列在x軸上,得到的y值就符合我們的要求了

這就是最核心的思路啦,那么我們就開始

首先獲得六個圖層
這里我就直接用b站的圖了,因為咱菜雞畫不出來

放出來方便大家練習,侵刪

<header><div><img src="./img/bilibili-autumn-1.webp"></div><div><img src="./img/bilibili-autumn-2.webp"></div><div><img src="./img/bilibili-autumn-3.webp"></div><div><img src="./img/bilibili-autumn-4.webp"></div><div><img src="./img/bilibili-autumn-5.webp"></div><div><img src="./img/bilibili-autumn-6.webp"></div></header> body{margin: 0;//經典margin0}header{height: 155px;//給容器一個高度,防止高度坍塌position: relative;//開定位,六個圖層需要以容器為坐標進行左右移動overflow: hidden;//因為圖層需要移動,所以圖層要略大于容器,容器要做溢出隱藏}header>div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;//直接flex居中,太美了這東西justify-content: center;align-items: center;--offset: 0px;//這里定義css的變量方便后面js的處理--blur: 2px;}header>div>img{display: block;width: 110%;//放大點,移動的時候不會有空白溢出height: 100%;object-fit: cover;transform: translateX(var(--offset));//變量的使用filter: blur(var(--blur));}

接下來就是js代碼,可能我寫的比較繁瑣,但是實現的效果我覺得和b站的很像

var startX = 0 const images = document.querySelectorAll('header>div>img')//拿到img元素的數組document.querySelector('header').addEventListener('mouseover', (e)=>{startX = e.clientX//在鼠標移入的時候記錄初始位置for (let [index, image] of images.entries()) {image.style.transition = 'none'//在每次鼠標進入的時候讓每一項的漸變效果為none,防止鼠標移動時看起來不連貫} })document.querySelector('header').addEventListener('mousemove', (e)=>{let offsetX = e.clientX - startX + 482//這里是保證初始值為482if(Math.abs(offsetX - 482) < 10)offsetX = 482//鼠標剛剛移動上去會產生很小的偏移,看起來效果就好像圖層突然變換了位置,所以做了一個移動最小值檢測,這樣就沒有問題了let percentage = offsetX / window.outerWidth//計算移動距離占視窗寬度的百分比,其實我們的主要目的是拿到這個東西let offset = 15 * percentage//把百分比放大合適的比例就能帶入公式了let blur = 20//這里是二次函數公式中二次項的系數,20是比較合適的for (let [index, image] of images.entries()) {offset *= 1.3//每次循環對偏移位置進行迭代let blurValue = (Math.pow(((index / images.length - percentage)), 2) * blur)//每次循環對清晰度進行迭代,這里就使用了剛剛提到的二次函數的形式image.style.setProperty('--offset',`${offset}px`)//賦值回去,實現效果image.style.setProperty('--blur',`${blurValue}px`)} })document.querySelector('header').addEventListener('mouseout', ()=>{ //其實這里完全就是偷了個懶,直接用程序去計算初始位置,我測出來當offset為482的時候,初始效果看起來是最棒的,就不用看了下面的就是上面的公式而已let offsetX = 482let blur = 20let percentage = offsetX / window.outerWidthlet offset = 15 * percentagefor (let [index, image] of images.entries()) {offset *= 1.3blurValue = (Math.pow((index / images.length - percentage), 2) * blur)image.style.setProperty('--offset',`${offset}px`)image.style.setProperty('--blur',`${blurValue}px`)image.style.transition = 'all .3s ease'//給每一項加上漸變效果,圖層會平滑回到初始位置,視覺效果不會太突兀} }) window.addEventListener('load', () => { //這里就是在開始加載時計算初始位置.let offsetX = 482let blur = 20let percentage = offsetX / window.outerWidthlet offset = 15 * percentagefor (let [index, image] of images.entries()) {offset *= 1.3blurValue = (Math.pow((index / images.length - percentage), 2) * blur)image.style.setProperty('--offset',`${offset}px`)image.style.setProperty('--blur',`${blurValue}px`)} })

其實上面完全沒必要寫那么冗長的代碼,給每一項設置一個初始的偏移位置和初始清晰度就好了,這樣代碼也能簡潔.大家可以自己想想怎么改,其實很簡單.

參考了b站的
CodingStartup起碼課

下面放出本人的完整代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0;}header{height: 155px;position: relative;overflow: hidden;}header>div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;--offset: 0px;--blur: 2px;}header>div>img{display: block;width: 110%;height: 100%;object-fit: cover;transform: translateX(var(--offset));filter: blur(var(--blur));}</style> </head> <body><header><div><img src="./img/bilibili-autumn-1.webp"></div><div><img src="./img/bilibili-autumn-2.webp"></div><div><img src="./img/bilibili-autumn-3.webp"></div><div><img src="./img/bilibili-autumn-4.webp"></div><div><img src="./img/bilibili-autumn-5.webp"></div><div><img src="./img/bilibili-autumn-6.webp"></div></header><script>var startX = 0 const images = document.querySelectorAll('header>div>img')document.querySelector('header').addEventListener('mousemove', (e)=>{let offsetX = e.clientX - startX + 482let percentage = offsetX / window.outerWidthlet offset = 15 * percentagelet blur = 20for (let [index, image] of images.entries()) {offset *= 1.3let blurValue = (Math.pow(((index / images.length - percentage)), 2) * blur)image.style.setProperty('--offset',`${offset}px`)image.style.setProperty('--blur',`${blurValue}px`)} }) document.querySelector('header').addEventListener('mouseover', (e)=>{startX = e.clientXfor (let [index, image] of images.entries()) {image.style.transition = 'none'} })document.querySelector('header').addEventListener('mouseout', ()=>{let offsetX = 482let blur = 20let percentage = offsetX / window.outerWidthlet offset = 15 * percentagefor (let [index, image] of images.entries()) {offset *= 1.3blurValue = (Math.pow((index / images.length - percentage), 2) * blur)image.style.setProperty('--offset',`${offset}px`)image.style.setProperty('--blur',`${blurValue}px`)image.style.transition = 'all .3s ease'} }) window.addEventListener('load', () => {let offsetX = 482let blur = 20let percentage = offsetX / window.outerWidthlet offset = 15 * percentagefor (let [index, image] of images.entries()) {offset *= 1.3blurValue = (Math.pow((index / images.length - percentage), 2) * blur)image.style.setProperty('--offset',`${offset}px`)image.style.setProperty('--blur',`${blurValue}px`)} })</script> </body> </html>

thanks for reading

總結

以上是生活随笔為你收集整理的b站首页banner景深移动特效 bilibili秋的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。