본문 바로가기
javascript/jQuery

jQuery 텍스트 문구 자동 롤링 기능 (animate)

by 산코디 2022. 2. 17.

 

 

jQuery 텍스트 문구 자동으로 상하 롤링 기능에 대해서 정리해 보려고 한다. 간단하지만 UI 개발에서 종종 쓰이는 텍스트 롤링 기능이다. UI에서 롤링 처리하는 기능은 매우 유용하며, 간단한 기능으로 다양한 퍼포먼스를 줄 수 있다.

 

 

문구 자동 롤링 기능

문구 자동 롤링 기능은 웹 페이지에서 여러 문구나 내용을 자동으로 슬라이드 처리하거나 페이드 되도록 하는 기능이다. jQuery의 animate() 함수를 이용하여 구현이 가능하며, 다양하게 활용이 가능하다.

 

컨테이너

롤링되는 텍스트나 콘텐츠를 담을 컨테이너가 필요하며, 이 컨테이너는 해당 콘텐츠들을 포함하고, 화면에 표시될 영역을 정의

 

롤링 항목

텍스트나 콘텐츠들을 나타내는 요소들이며, 일반적으로 컨테이너 안에 위치하며, 화면에 보이거나 보이지 않는 상태로 순환된다.

 

애니메이션 효과

롤링되는 텍스트나 콘텐츠들이 화면에서 이동하거나 전환되는 애니메이션 효과를 정의

 

자동 전환

사용자의 입력 없이 자동으로 텍스트나 콘텐츠가 전환되는 기능이며, 보통 일정한 시간 간격으로 새로운 콘텐츠가 표시되거나 이전 콘텐츠가 사라진다.

 

 

롤링 기능 활용 사례

롤링 기능은 다양한 웹 사이트나 애플리케이션 환경에서 다양하게 활용될 수 있다.

 

1. 홍보 및 광고

웹 사이트의 상단, 사이드 바 등 여러 개의 광고나 프로모션 문구를 자동으로 롤링하여 사용자의 주의를 끌고 제품 또는 이벤트 홍보할 수 있다.

 

2. 공지사항

웹 사이트나 커뮤니티 사이트 등에서 중요한 공지사항이나 소식을 자동으로 롤링하여 사용자들에게 알릴 수 있다.

 

3. 인용구 또는 명언

블로그나 웹 사이트의 사이드 바에 인용구나 명언을 자동으로 롤링하여 사용자들에게 영감을 주거나 관심을 끌 수 있다.

 

4. 사용 설명서 및 안내 문구

웹 애플리케이션의 사용 설명서나 도움말 섹션에서 다양한 팁이나 안내 문구를 자동으로 롤링하여 사용자의 이해를 돕고 사용성을 향상할 수 있다.

 

5. 소셜 미디어 피드

소셜 미디어 피드에서 다양한 사용자 게시물이나 뉴스 피드를 자동으로 롤링하여 최신 소식을 사용자에게 제공할 수 있다.

 

 

 

기능을 구현하기에 앞서 기능을 구현하는데 필수 함수인 animate() 함수에 대해 간략하게 정리하였다.

jQuery animate 함수

jQuery의 animate() 함수는 HTML 요소를 애니메이션화하는 데 사용되는 강력한 함수다. 이 함수를 사용하게 되면 CSS 속성을 변경하여 요소를 부드럽게 이동시키거나 변형시킬 수 있다. 주로 웹 페이지에서 요소들을 동적으로 제어하고 애니메이션 효과를 추가하는 데 사용된다.


기본 구문

$(selector).animate(styles, duration, easing, complete);

 

위의 코드는 animate() 함수의 기본 구문이며, 인자는 총 4개를 받아 처리한다.

selector : 애니메이션을 적용할 요소를 선택하는 jQuery 선택자

styles : 애니메이션 중에 적용할 CSS 속성 및 값의 객체

duration : 해당 옵션은 선택사항이며, 애니메이션의 지속 시간을 밀리초 단위로 지정. (기본값: 400ms)

easing : 해당 옵션은 선택사항이며, 애니메이션의 진행을 제어하는 함수 (기본값: swing)

complete : 해당 옵션을 선택사항이며, 애니메이션 완료 후 실행될 콜백 함수

 

예시 코드

$('#element').animate({
    marginLeft : '50px'
}, 3000);

 

위의 코드는 선택사항 옵션을 제외한 예시 코드다.

첫 번째 매개변수로 전달되는 객체는 애니메이션 중에 변경될 CSS 속성을 나타낸다. 이 속성들은 요소의 현재 상태에서 애니메이션이 완료될 때까지 변화한다.
두 번째 매개변수로 전달되는 duration은 애니메이션의 지속 시간을 지정한다. 이 값을 조절하여 애니메이션의 속도를 조절할 수 있다.

animate() 함수는 요소의 위치, 크기, 색상 등 다양한 속성을 변경하는 데 사용될 수 있으며, 다른 애니메이션 효과를 만들기 위해 여러 개의 속성을 조합할 수도 있다. 이를 통해서 웹 페이지의 사용자 경험을 향상시키고 동적인 효과를 추가할 수 있다.

롤링 기능 구현 소스 코드

* 사용 언어 및 라이브러리 버전 정보

   - jQuery 3.4.1

   - HTML5

   - css3

   - Visual Studio Code 1.63.2 (사용 tool)

 

 실행 소스 코드
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery animate Rolling</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <!-- css 영역 -->
        <style>
        .rolling_div {
            width           : 140px;
            height          : 30px;
            margin          : 0 auto;
            top             : 100px;
            position        : relative;
            background      : #e5e5e5;
            color           : #4a4a4a;
            overflow        : hidden;
        }
        .rolling_ul {
            position        : relative;
            margin          : 0;
            padding         : 0;
            list-style      : none;
        }
        .rolling_ul li {
            line-height     : 30px;
            padding-left    : 10px;
        }
        </style>

        <!-- javascript 영역 -->
        <script>
        $(function () {

            // 롤링 스텝 수
            var step = 1;
            // 롤링 항목 수
            var count = $('#rollingUl li').length;
            // 항목 하나 높이
            var height = $('#rollingUl li').height();

            /**
             * 롤링 이벤트 실행
             */
            rollingStepFunc(step, count, height);

        });

        /**
         * 롤링 이벤트 함수
         */
        function rollingStepFunc (stepCount, count, height) {

            // delay : 3초 후 animate 실행
            // animate 속도 : 0.8초
            $('#rollingUl').delay(3000).animate({
                top: stepCount * -height

            }, 800, function () {
                // 다음 롤링 이벤트 실행
                rollingStepFunc(
                    ( (stepCount + 1) % count ),
                    count,
                    height
                );
            });
        }
        </script>

    </head>

    <!-- html ui 영역 -->
    <body>
        <div class="rolling_div">
            <ul id="rollingUl" class="rolling_ul">
                <li>안녕하세요.</li>
                <li>animate</li>
                <li>롤링 테스트</li>
                <li>감사합니다.</li>
            </ul>
        </div>
    </body>
</html>

 

위의 소스 코드는 jQuery를 사용하여 텍스트를 자동으로 롤링하는 간단한 기능을 구현한 것이다.

 

1. <div class="rolling_div"> 요소 안에는 롤링되는 텍스트를 담는 <ul id="rollingUl" class="rolling_ul"> 요소가 있다. 이 <ul> 안에는 롤링되는 각 항목을 표시하는 <li> 요소들이 포함되어 있다.

 

2. CSS 스타일에서 .rolling_div 클래스와 .rolling_ul, .rolling_ul li 선택자를 사용하여 롤링 컨테이너와 텍스트 스타일을 지정한다. 각 항목의 높이와 배경 색상, 텍스트 색상 등이 정의되어 있다.

 

3. jQuery를 사용하여 롤링 효과를 구현, rollingStepFunc() 함수는 매개변수로 현재 롤링 스텝 수, 항목 수, 항목 하나의 높이를 받아와서 delay()와 animate()를 사용하여 롤링을 수행한다.

 

- delay(3000) 함수는 3초 후 애니메이션을 시작

- animate() 함수는 현재 스텝의 항목을 항목 하나의 높이만큼 위로 이동시킨다. 이 때, stepCount * -height를 통해서 이동 거리를 계산

- 애니메이션이 완료되면 콜백 함수가 실행되어 다음 롤링 스텝을 계산하고, rollingStepFunc()를 재귀적으로 호출

 

 

결과적으로 3초마다 태그의 높이를 stepCount 수만큼 올려주는 방식이다.

 

 실행 화면
3초마다 상단으로 롤링되는 화면
반응형

마무리

jQuery 문구 자동 롤링 기능에 대해 정리해 봤는데, 구현한 소스 코드와 같이 구현 방법은 간단하다. 물론, 어느 환경에서 적용하느냐에 따라 조금 더 복잡해질 수는 있지만, 원리는 동일하기 때문에 이렇게 간단하게나마 구현을 해본다면 실제 업무에 적용하는 데 큰 어려움이 없을 것이다.

jQuery를 배운지는 오래됐지만 이렇게 글을 쓰면서 오랜만에 기능 구현을 다시 해보니 요즘 많이 사용하는 SPA 기술들과는 느낌이 많이 다르다. jQuery는 여전히 많은 업무 환경에서도 사용 중이기 때문에 개발자라면 jQuery의 간단한 기능들을 익혀두는 것이 좋다. 

 

 

 

 

반응형

'javascript > jQuery' 카테고리의 다른 글

jQuery .children() .parent() 배워보기!  (0) 2023.01.02
[jQuery] .append() .prepend() 알아보자!  (0) 2022.12.31
jQuery show() hide() 이벤트 배워보기!  (0) 2022.12.30
jQuery click 이벤트의 개념과 활용방법 알아보기  (0) 2022.12.28
jQuery 텍스트 문구 자동 롤링 기능 (fade in / out)  (0) 2022.02.17

관련글

티스토리툴바