亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

3D 視差效果

DobbyKim / 2794人閱讀

摘要：前一周敢玩新版端上線，其中原創(chuàng)視頻封面用的就是上圖的效果，下面詳細(xì)說一下怎么實(shí)現(xiàn)起因這個(gè)效果有著相對(duì)較好的用戶體驗(yàn)，在的基礎(chǔ)上又有了與用戶交互的體驗(yàn)，仿佛用戶一直在不同角度按壓這張圖片。

前一周敢玩新版PC端上線，其中原創(chuàng)視頻封面用的就是上圖的效果，下面詳細(xì)說一下怎么實(shí)現(xiàn)

起因

這個(gè)效果有著相對(duì)較好的用戶體驗(yàn)，在 hover 的基礎(chǔ)上又有了與用戶交互的體驗(yàn)，仿佛用戶一直在不同角度按壓這張圖片。

當(dāng)然這個(gè)效果早就有人在寫并用于官網(wǎng)了，感興趣可以去錘子官網(wǎng)，看下輪播圖的鼠標(biāo)交互效果。

基本思路

單借助 CSS3 的 hover 不足以支配這個(gè)效果，JS 方案考慮以下步驟

綁定鼠標(biāo)事件（mouseover），綁定離開事件（mouseleave）

判斷鼠標(biāo)相對(duì)于圖片的位置

計(jì)算出應(yīng)該翻轉(zhuǎn)（rotate）的角度，同時(shí)改變陰影的方向

將圖片復(fù)位

這里涉及 CSS3 的一個(gè)比較少用的屬性 perspective

MDN: perspective 屬性指定了觀察者與 z = 0 平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果。z > 0 的三維元素比正常大，而 z < 0 時(shí)則比正常小，大小程度由該屬性的值決定。

深入了解去看這個(gè)文章CSS3 Transform 的 perspective 屬性，時(shí)間比較久但是很經(jīng)典，除了兼容性描述有變其它描述很準(zhǔn)確。

開始構(gòu)建

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í)行了，但是這里有一個(gè)坑。

除非你能確定你的圖片在一屏內(nèi)，就是說你的 body 最大高度就是窗口高度，不然 let mouseY = e.pageY - thisPY 這句計(jì)算出來的不一定是真實(shí)的鼠標(biāo)偏移量，而是加上滾動(dòng)調(diào)偏移后的值。

解決辦法就是

let scrollTop = document.documentElement.scrollTop + document.body.scrollTop  //計(jì)算滾動(dòng)高度

let mouseY = e.pageY - scrollTop - thisPY  //減去滾動(dòng)高度

一般的項(xiàng)目考慮到這就可以了，如果你的項(xiàng)目存在 X 軸上的偏移計(jì)算原理相同，減去偏移量。

實(shí)例

我自己的代碼放在了 codepen，如下

https://codepen.io/orangexc/p...

另外最近發(fā)現(xiàn)在 codepen 上的一個(gè)項(xiàng)目，在熱門榜單上，基本思路是一樣的只不過換了種方式去寫，很不錯(cuò)的例子，對(duì)于需要多個(gè)元素循環(huán)綁定的情況很好用。

https://codepen.io/PavelDoGre...

注：此種方法規(guī)避了高度差計(jì)算的問題，因?yàn)槭腔?offsetX（作用元素的偏移量），推薦使用
總結(jié)

JS 動(dòng)畫考慮的會(huì)相對(duì)多一些，可以獲取寬高及鼠標(biāo)位置（方法多樣），根據(jù)鼠標(biāo)位置可以計(jì)算出動(dòng)畫的對(duì)應(yīng)效果，選擇合適的且兼容性好的代碼很關(guān)鍵

文章出自 orange 的 個(gè)人博客 http://orangexc.xyz/

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/86573.html

相關(guān)文章

  • 滾動(dòng)視差？CSS 不在話下

    摘要：可以感受下種不同取值的不同效果使用實(shí)現(xiàn)滾動(dòng)視差首先，我們使用來實(shí)現(xiàn)滾動(dòng)視差。何為滾動(dòng)視差 視差滾動(dòng)（Parallax Scrolling）是指讓多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來非常出色的視覺體驗(yàn)。 作為網(wǎng)頁設(shè)計(jì)的熱點(diǎn)趨勢，越來越多的網(wǎng)站應(yīng)用了這項(xiàng)技術(shù)。 通常而言，滾動(dòng)視差在前端需要輔助 Javascript 才能實(shí)現(xiàn)。當(dāng)然，其實(shí) CSS 在實(shí)現(xiàn)滾動(dòng)視差效果方面，也有著不俗...

    RobinTang 評(píng)論0 收藏0

  • [轉(zhuǎn)]滾動(dòng)視差？CSS 不在話下/background attachment

    摘要：通常而言，滾動(dòng)視差在前端需要輔助才能實(shí)現(xiàn)。當(dāng)然，其實(shí)在實(shí)現(xiàn)滾動(dòng)視差效果方面，也有著不俗的能力。此關(guān)鍵字表示背景相對(duì)于視口固定。使用實(shí)現(xiàn)滾動(dòng)視差言歸正傳，下面介紹另外一種使用實(shí)現(xiàn)的滾動(dòng)視差效果，利用的是。? ? 何為滾動(dòng)視差 視差滾動(dòng)（Parallax Scrolling）是指讓多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來非常出色的視覺體驗(yàn)。 作為網(wǎng)頁設(shè)計(jì)的熱點(diǎn)趨勢，越來越多的網(wǎng)站應(yīng)...

    darry 評(píng)論0 收藏0

  • CSS3 3D transform變換 視差滾動(dòng)效果學(xué)習(xí)

    摘要：變換視差滾動(dòng)效果學(xué)習(xí)在學(xué)習(xí)如何做到視差滾動(dòng)效果時(shí)，閱讀了張鑫旭老師的文章，記錄下學(xué)習(xí)視差滾動(dòng)變換的幾個(gè)理解點(diǎn)。視差滾動(dòng)中的計(jì)算，畫一個(gè)草圖即可得知，是舞臺(tái)視覺平面抬起向你而來的距離，而是元素后退的距離離你而去，所以 CSS3 3D transform變換 視差滾動(dòng)效果學(xué)習(xí) 在學(xué)習(xí)css如何做到視差滾動(dòng)效果時(shí)，閱讀了張鑫旭老師的文章，記錄下學(xué)習(xí)視差滾動(dòng) and 3D transform變...

    el09xccxy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

DobbyKim

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<