I want to animate this diamond diamong images in such a way it look like a real diamond is rotating. As a 3d diamond is rotating downward. Please help me it means a lot. Thanks.
animation is used in second section of website
<section class="relative flex items-center justify-center w-screen h-screen bg-gray-600">
<div class="absolute w-40 h-20 top-28" >
<div class="">
<img class="ml-3 w-36 diamond_animtion" src="fake/diamond.png" alt="">
</div>
<img class="absolute ml-12 top-14" style="width: 70px;" src="fake/Prong.png" alt="">
</div>
<img class="w-96 h-96" src="fake/ring.png" alt="">
</section>
You can do the trick using css overflow and background position, then use JS to make it move.
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>According to your example, here's could be a solution to animate diamond when scroll.
NOTE: This solution is not suitable for production because of scroll steps glitch but you can use it and modify to fit your needs
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>