資訊專欄INFORMATION COLUMN
摘要：前一周敢玩新版端上線，其中原創(chuàng)視頻封面用的就是上圖的效果，下面詳細說一下怎么實現(xiàn)起因這個效果有著相對較好的用戶體驗，在的基礎上又有了與用戶交互的體驗，仿佛用戶一直在不同角度按壓這張圖片。
前一周敢玩新版PC端上線，其中原創(chuàng)視頻封面用的就是上圖的效果，下面詳細說一下怎么實現(xiàn)
起因這個效果有著相對較好的用戶體驗，在 hover 的基礎上又有了與用戶交互的體驗，仿佛用戶一直在不同角度按壓這張圖片。
當然這個效果早就有人在寫并用于官網(wǎng)了，感興趣可以去錘子官網(wǎng)，看下輪播圖的鼠標交互效果。
基本思路單借助 CSS3 的 hover 不足以支配這個效果，JS 方案考慮以下步驟
綁定鼠標事件（mouseover），綁定離開事件（mouseleave）
判斷鼠標相對于圖片的位置
計算出應該翻轉（rotate）的角度，同時改變陰影的方向
將圖片復位
這里涉及 CSS3 的一個比較少用的屬性 perspective
MDN: perspective 屬性指定了觀察者與 z = 0 平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果。z > 0 的三維元素比正常大，而 z < 0 時則比正常小，大小程度由該屬性的值決定。
深入了解去看這個文章CSS3 Transform 的 perspective 屬性，時間比較久但是很經(jīng)典，除了兼容性描述有變其它描述很準確。
開始構建html：
css:
.avatar {
width: 300px;
height: 300px;
margin: 50px auto;
background: url("http://7xr2s7.com1.z0.glb.clouddn.com/avatar.jpg");
background-size: contain;
transition: all .3s linear;
transform-origin: 50%;
}
js:
let el = document.querySelector(".avatar")
el.addEventListener("mousemove", (e) => {
let thisPX = el.getBoundingClientRect().left
let thisPY = el.getBoundingClientRect().top
let boxWidth = el.getBoundingClientRect().width
let boxHeight = el.getBoundingClientRect().height
let mouseX = e.pageX - thisPX
let mouseY = e.pageY - thisPY
let X
let Y
X = mouseX - boxWidth / 2
Y = boxHeight / 2 - mouseY
el.style.transform = `perspective(300px) rotateY(${X / 10}deg) rotateX(${Y / 10}deg)`
el.style.boxShadow = `${-X / 20}px ${Y / 20}px 50px rgba(0, 0, 0, 0.3)`
})
el.addEventListener("mouseleave", () => {
el.style.transform = `perspective(300px) rotateY(0deg) rotateX(0deg)`
el.style.boxShadow = ""
})
以上代碼看似沒什么問題，也許你在新版本瀏覽器（無需babel）已經(jīng)順利執(zhí)行了，但是這里有一個坑。
除非你能確定你的圖片在一屏內(nèi)，就是說你的 body 最大高度就是窗口高度，不然 let mouseY = e.pageY - thisPY 這句計算出來的不一定是真實的鼠標偏移量，而是加上滾動調(diào)偏移后的值。
解決辦法就是
let scrollTop = document.documentElement.scrollTop + document.body.scrollTop //計算滾動高度 let mouseY = e.pageY - scrollTop - thisPY //減去滾動高度
一般的項目考慮到這就可以了，如果你的項目存在 X 軸上的偏移計算原理相同，減去偏移量。
實例我自己的代碼放在了 codepen，如下
https://codepen.io/orangexc/p...
另外最近發(fā)現(xiàn)在 codepen 上的一個項目，在熱門榜單上，基本思路是一樣的只不過換了種方式去寫，很不錯的例子，對于需要多個元素循環(huán)綁定的情況很好用。
https://codepen.io/PavelDoGre...
注：此種方法規(guī)避了高度差計算的問題，因為是基于 offsetX（作用元素的偏移量），推薦使用總結
JS 動畫考慮的會相對多一些，可以獲取寬高及鼠標位置（方法多樣），根據(jù)鼠標位置可以計算出動畫的對應效果，選擇合適的且兼容性好的代碼很關鍵
文章出自 orange 的 個人博客 http://orangexc.xyz/
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/86573.html
摘要：可以感受下種不同取值的不同效果使用實現(xiàn)滾動視差首先，我們使用來實現(xiàn)滾動視差。何為滾動視差 視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。 作為網(wǎng)頁設計的熱點趨勢，越來越多的網(wǎng)站應用了這項技術。 通常而言，滾動視差在前端需要輔助 Javascript 才能實現(xiàn)。當然，其實 CSS 在實現(xiàn)滾動視差效果方面，也有著不俗...
摘要：通常而言，滾動視差在前端需要輔助才能實現(xiàn)。當然，其實在實現(xiàn)滾動視差效果方面，也有著不俗的能力。此關鍵字表示背景相對于視口固定。使用實現(xiàn)滾動視差言歸正傳，下面介紹另外一種使用實現(xiàn)的滾動視差效果，利用的是。? ? 何為滾動視差 視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。 作為網(wǎng)頁設計的熱點趨勢，越來越多的網(wǎng)站應...
摘要：變換視差滾動效果學習在學習如何做到視差滾動效果時，閱讀了張鑫旭老師的文章，記錄下學習視差滾動變換的幾個理解點。視差滾動中的計算，畫一個草圖即可得知，是舞臺視覺平面抬起向你而來的距離，而是元素后退的距離離你而去，所以 CSS3 3D transform變換 視差滾動效果學習 在學習css如何做到視差滾動效果時，閱讀了張鑫旭老師的文章，記錄下學習視差滾動 and 3D transform變...
閱讀 3103·2021-09-28 09:43
閱讀 936·2021-09-08 09:35
閱讀 1469·2019-08-30 15:56
閱讀 1217·2019-08-30 13:00
閱讀 2762·2019-08-29 18:35
閱讀 1854·2019-08-29 14:07
閱讀 3481·2019-08-29 13:13
閱讀 1357·2019-08-29 12:40
