아임웹 코드 - 스크롤 움직임에 따라 돌아가는 원형 로고 애니메이션

시연 동영상 보기

<div class="circlelogocontain">

  <img class="circlelogo" src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/6995df62da9b4.png">

</div>

<style>

  .circlelogocontain {

    width: 200px;

    height: 200px;

    position: fixed;

    right: 100px;

    bottom: 100px;

    z-index: 9999;

  }

  .circlelogo {

    width: 100%;

    height: 100%;

  }

</style>

<script>

  window.addEventListener('scroll', function() {

    var logo = document.querySelector('.circlelogo');

    var scrollPos = window.scrollY;

    var rotation = -scrollPos / 10; 

    logo.style.transform = 'rotate(' + rotation + 'deg)';

  });

</script>