스크롤에 따른 이미지, 아이콘 회전시키기

친한 동생이 사이트에 적용하고 싶은 기능이 있었다.

스크롤을 하는 것에 따라서 사이트의 중간에 이미지를 하나 놔두고 
회전시키고 싶다는 것이다.

관련 참고 사이트는 : [NONFICTION 논픽션](https://nonfiction.kr/)

이것이었고,

관련해서 일단 image를 하나 넣어서
해당 이미지를 특정하고

<style>
    #id {
        position:fixed;
        bottom: 200px;
        margin: auto;
        z-index: 100;
    }
</style>

이렇게 head에 스타일을 준 뒤에 
회원을 줄 수 있는 스크립트를 추가해주었다.

<script>

    function scrollRotate() {
        let image = document.getElementById("id");
	    image.style.transform = "rotate(" + window.pageYOffset/2 + "deg)";
    }

	window.addEventListener('scroll',scrollRotate);

</script>

이렇게 해서 해결!
생각보다 간단하게 해결해서 나처럼 고생하는 사람들이 있을 것 같아 공유한다.

참고 link: [Frontend Shorts: How to rotate the element on scroll with JavaScript - DEV Community](https://dev.to/foundsiders/frontend-shorts-easily-rotate-the-element-on-scroll-with-javascript-1g4p)

  1. 익명 2021.06.20 18:06

    비밀댓글입니다

    • 익명 2021.06.20 20:39

      비밀댓글입니다

+ Recent posts