我想以 一種看起來像真正的鉆石在旋轉的方式來為這個鉆石鉆石影像設定影片 。作為 3d 鉆石向下旋轉。請幫助我這意味著很多。謝謝。
我嘗試什么
影片用于網站的第二部分
<section class="relative flex items-center justify-center w-screen h-screen bg-gray-600">
<div >
<div >
<img src="fake/diamond.png" alt="我如何為這個鉆石影像設定影片，使其看起來像 3d 鉆石向下旋轉？">
</div>
<img style="width: 70px;" src="fake/Prong.png" alt="我如何為這個鉆石影像設定影片，使其看起來像 3d 鉆石向下旋轉？">
</div>
<img src="fake/ring.png" alt="我如何為這個鉆石影像設定影片，使其看起來像 3d 鉆石向下旋轉？">
</section>
如何減慢影片速度
uj5u.com熱心網友回復：
您可以使用 css 溢位和背景位置來實作這一點，然后使用 JS 使其移動。
let height = 0,
steps = 0;
const animation = setInterval((function() {
height = 290.35, document.getElementById("diamond").style.backgroundPosition = `0px -${height}px`, 18 == steps && clearInterval(animation)
}), 42);
//With scroll#diamond {
height: 290px;
width: 351px;
background: url('https://i.stack.imgur.com/HplbX.png') 0px 0px;
background-size: 100%;
overflow: hidden;
}<div id="diamond">
</div>根據您的示例，這可能是滾動時為鉆石設定影片的解決方案。
注意：由于滾動步驟故障，此解決方案不適合生產，但您可以使用它并進行修改以滿足您的需求
let bounding,
height = 145, //Equal your diamond CSS height
topPos = 0,
scrollPos = 0,
steps = 0,
diamond = document.getElementById("diamond");
function scrollDiamond(o) {
"down" === o && steps < 18 ? (act = `0px -${topPos =height}px`, steps ) : "up" === o && steps > -1 && (act = `0px -${topPos-=height}px`, steps--)
diamond.style.backgroundPosition = act;
}
window.addEventListener("scroll", (function() {
bounding = document.body.getBoundingClientRect().top;
bounding > scrollPos ? scrollDiamond("up") : scrollDiamond("down"), scrollPos = bounding
}));body {
height: 200vh;
}
#diamond {
position: fixed;
/* Your image heigh divided by 40 (or whatever you want) */
height: 145px;
width: 175px;
/* Your image width divided by 40 (or whatever you want)*/
background: url('https://i.stack.imgur.com/HplbX.png') 0px 0px/100%;
}<div id="diamond"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/355520.html
標籤：javascript css
上一篇：每個類的單獨媒體查詢？