Selasa, 04 Maret 2025

Animasi Image Rotation with Javascript


Image capture with Licecap
https://www.cockos.com/licecap/

source code :

<html>
<head>
<style>
.container{background:white;}

.imgContainer img{position:fixed;width:100px;height:80px}
</style>
</head>
<script>
var radius = 220;
var offsetX = 300;
var offsetY = 200;
var offsetA = 0;

setInterval(updateSpin, 30);


updateSpin();

function updateSpin(){  
  var imgs = document.querySelectorAll( '#imgContainer img' );
  

    // Evenly distribute images around circle
  slice = 360.0 / imgs.length; 


    imgs.forEach((e,index) => {
    // Convert angle to radians
    radians = (slice*index + offsetA) * (Math.PI/180);
    
    // Some simple pythagora geometry
    x = offsetX + Math.cos(radians) * radius;
    y = offsetY + Math.sin(radians) * radius;
    
    // Update image position
    e.style.top  = y+60+'px';
    e.style.left = x+40+'px';
  });

    // Increment angle to images rotate on next update
    offsetA += 0.5;
}
</script>
<body>
<div class="container">
  <div class="inner">
    <div class="imgContainer" id="imgContainer">
      <img src="chatgpt.png">
      <img src="deepseek.png">
      <img src="claude.png">
      <img src="mistral.png">
      <img src="midjourney.png">
      <img src="meta.png">
      <img src="grok.png">
    </div>
  </div>
</div>
</body>
</html>


 

Tidak ada komentar: