[HTML, CSS, JS] 제이쿼리(jQuery)를 활용하여 스크롤에 반응하는 회전 효과 : 스크롤에 반응하는 인터렉티브 웹사이트

by
제이쿼리(jQuery)를 활용하여 스크롤에 반응하는 인터렉션 효과

이번 포스팅에서는 몇 가지 간단한 단계만으로 간편하고 매력적인 인터렉션 효과를 구현해 보도록 하겠습니다.
구현할 효과는 제이쿼리(jQuery)를 사용하여 스크롤에 반응하는 회전하는 인터렉션이며
이러한 효과는 웹 페이지에 사용자가 웹페이지에 흥미를 느낄 요소가 높으며 그로 인해 사이트에 대한 체류시간을 높일 수 있습니다.

먼저 인터렉션을 줄 요소를 작성해줍니다.

SVG 코드를 불러오는 방법은 이전 포스팅을 참고해주세요(바로가기)

<div id="content">
  <div class="text-svg">
    <svg viewBox="0 0 100 100">
      <path id="circlePath" fill="none" d="
          M 10, 50
          a 40,40 0 1,1 80,0
          a 40,40 0 1,1 -80,0
        " />
      <text id="text" font-size="15" font-weight="bold">
        <textPath id="textPath" href="#circlePath">HELLO WELCOME TO MY WEBSITE</textPath>
      </text>
    </svg>
  </div>
</div>

우선 “div”태그에 “.text-svg” 속성을 부여한 다음 요소의 위치를 잡아줍니다.
그리고 회전 할 요소를 간단하게 SVG 코드로 작성해주었습니다.(이미지 파일 등 어떤요소로든 사용해도 괜찮습니다)

보러가기

CSS 속성 부여하기
* {
  margin: 0;
  padding: 0;
}
body {
  width: 100%;
  background: #e8ebf3;
}
#content {
  width: 100%;
  height: 2000px;
}

#content .text-svg {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 200px;
  transform: translate(-50%, -50%);
}
#content .text-svg svg {
  width: 100%;
}

우선 컨텐츠가 없으므로 스크롤이 가능하게 #content 요소에 높이를 2000px; 적용합니다.
그리고 .text-svg 요소에 위치값을 지정합니다.

해당 부분은 실직적인 효과구현에는 상관이 없으니 편하게 수정하셔도 괜찮습니다.

제이쿼리(jQuery)로 효과 구현하기
$(window).scroll(function () {
  var scrollTop = $(this).scrollTop();
  var degrees = scrollTop / 5; // 회전 각도를 스크롤 위치에 따라 결정 (원하는 값으로 조정)

  $(".text-svg svg").css("transform", "rotate(" + degrees + "deg)");
});

일단 스크롤 이벤트를 감지하는 “$(window).scroll()” 함수를 사용하여 스크롤이 발생할 때마다 이벤트를 작동시킵니다.
“var scrollTop = $(this).scrollTop();” 해당 변수를 통해 현재 스크롤 위치를 저장하며 ” var degrees = scrollTop / 5; ” 변수에 스크롤의 위치에 따라 회전하는 각도를 저장합니다.
마지막으로 $(“.text-svg svg”).css(“transform”, “rotate(” + degrees + “deg)”); 스타일 속성을 변경하는 코드를 작성하여 위에서 저장한 “degrees ” 변수를 가저와 엘리먼트 요소에 회전하는 CSS 스타일을 실시간으로 추가합니다.

결과보기(풀페이지)

이번 튜토리얼에서는 스크롤에 때라 반응하는 인터렉션을 구현해보았습니다.

이런 하나의 작은 요소라도 사용자와의 상호작용을 도입함으로써 웹사이트에 흥미를 불러일으킬 수 있고, 사용자들이 웹사이트에 더 오래 머무르게 할 수 있습니다.

더 나아가서, 본 예제에서 사용한 스크롤 효과를 응용하여 더 복잡하고 창의적인 인터랙션 효과를 구현하는 것도 가능합니다.
여러분들의 상상력과 창의성을 발휘하여 독특하고 매력적인 인터랙션 효과를 만들어보시기 바랍니다.

Leave a Comment

%d