Frontend Shorts: JavaScript로 스크롤할 때 요소를 회전하는 방법

6908 단어 frontendwebdevcssjavascript
랜딩 페이지 스크롤에 애니메이션 스피너를 구축하는 동안 JavaScript를 사용하여 몇 줄의 코드로 신속하게 수행할 수 있는 방법을 생각했습니다.

jQuery나 React와 같은 JavaScript 라이브러리를 사용하지 않고 웹 보기에서 위아래로 스크롤하여 원 안에 SVG 다시 로드 아이콘을 회전시키고 싶었습니다.

대신 DOM JavaScript를 사용하여 아주 간단한 방법으로 이 결과를 얻었습니다. 아래에서 실제 구현을 보여 드리겠습니다.

프로젝트 코드에서 솔루션을 분리하기 위해 이 예제에 대해 index.html , index.css 및 index.js 의 세 파일을 만들었습니다.

중앙에 다시 로드 아이콘이 있는 녹색-노란색 원을 표시해 보겠습니다.

<!-- index.html -->
<html>
    <head>
        ...
        <link rel="stylesheet" href="index.css"> 
    </head>
    <body>
        <div class="wrapper">
                <div class="circle">
                    <img id="reload" src="reload-solid.svg" alt="scroll">
                </div>
        </div>
        <script src="index.js"></script>
    </body>
</html>


다음으로 HTML 트리에 따라 CSS로 요소의 스타일을 지정합니다.

/* index.css */
body {
    height: 3000px;
}

.wrapper {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: greenyellow;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

#reload {
    width: 50px;
    height: 50px;
}


❗️본체의 높이 소품이 3000px라는 점에 유의하세요. 스크롤하여 녹색-노란색 원 안에 있는 다시 로드 아이콘의 회전을 표시하는 데 필요합니다.

게다가 더 나은 미리보기를 위해 원 요소를 수직 및 수평 중앙에 배치했습니다. circle 클래스에서 볼 수 있습니다.



다음으로 스크롤의 요소에 회전 효과를 추가해야 합니다.
  • DOM에서 onscroll(), 함수를 호출할 함수scrollRotate()를 만듭니다.
  • 스크롤하여 회전하고 image 변수에 저장하는 id를 통해 다시 로드 아이콘 요소를 찾습니다.
  • transform CSS 속성을 사용하여 reload-icon 요소를 회전하여 조작합니다.
  • 적용 Window.pageYOffset 속성 that will return the number of pixels the document is currently scrolled along the vertical axis (up/down) .

    • // index.js
window.onscroll = function () {
    scrollRotate();
};

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


    👉Window.pageYOffset/2 요소 회전을 더 빠르게 할 수 있습니다. 숫자가 낮을수록 회전이 빨라집니다. 숫자가 높을수록 회전이 느려집니다.



    우리가 하는 일(프론트엔드 개발자를 의미)은 그다지 독특하지 않습니다. 종종 우리는 해결하기 쉬워 보이는 문제에 직면하고 나중에 더 우아하고 읽기 쉬운 솔루션으로 리팩터링합니다.

    읽어 주셔서 감사합니다! 🙏

    이 프론트엔드 단편이 실용적이고 마음에 든다면 Twitter에서 공유해 주시면 기쁠 것입니다.

    최선을 다해 코딩하세요.
    일로나 코드


    Unsplash에 있는 Kristaps Grundsteins의 사진
    [Go] 경량 서버 프레임워크 기반 TCP 연결 추상 및 패키징
    코드 덮어쓰기는 무용하다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage