스크롤에 따라 이미지 회전시키기

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

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

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

관련 참고 사이트는 : [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)