jQuery의 animate() 함수는 HTML 요소를 부드럽게 애니메이션 하는 데 사용되는 메서드입니다. 이 함수를 사용하면 CSS 속성 값을 변경하면서 웹 페이지에서 효과적인 애니메이션 효과를 적용할 수 있습니다.
오늘은 jQuery의 animate를 활용한 텍스트 문구 자동 롤링 기능에 대해 포스팅하려고 합니다.
직접 만들어 보기 전에는 어려워 보이는 기능이지만 직접 해보면 의외로 간단한 기능입니다.
animate 사용 방법
$(selector).animate({styles}, duration, easing, complete);
selector
애니메이션을 적용할 HTML 요소를 선택하는 CSS 선택자입니다.
styles
애니메이션을 적용할 CSS 속성과 해당 값들을 객체 형태로 전달합니다. 예를 들어, { "width": "200px", "height": "300px" }와 같이 전달합니다.
duration
애니메이션이 진행되는 시간을 밀리초 단위로 정의합니다. 예를 들어, 1000은 1초를 의미합니다.
easing (선택)
애니메이션 진행 속도를 지정하는 easing 함수를 정의합니다. 기본값은 "swing"입니다. "swing"과 "linear" 이외에도 사용자 정의 easing 함수를 사용할 수 있습니다.
complete (선택)
애니메이션이 완료된 후 실행할 함수를 정의합니다.
animate() 함수의 예제 코드
아래 소스 코드는 animate() 함수를 이용한 간단한 예제 코드입니다.
<!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를 사용하여 롤링 효과를 구현한 예제입니다. 해당 예제는 일정 시간 간격으로 항목들이 위에서 아래로 부드럽게 이동하는 롤링 효과를 보여줍니다.
HTML, CSS, Javascript 부분을 각각 나눠서 하나씩 살펴보도록 하겠습니다.
HTML 부분
rolling_div 클래스를 가진 <div> 요소 안에 롤링 효과를 보여줄 <ul> 요소가 포함되어 있습니다.
<ul> 요소의 각 항목은 <li> 요소로 구성되어 있으며, 롤링 효과로 순차적으로 나타납니다.
CSS 부분
.rolling_div 클래스에 대한 스타일을 정의하며, 롤링 효과를 보여줄 영역의 크기, 배경색, 텍스트 색상 등을 지정합니다.
JavaScript 부분
jQuery의 $(function () { ... }) 함수를 사용하여 문서가 로드되면 코드 블록 안의 내용을 실행합니다.
step, count, height 변수들을 설정하여 롤링 효과에 필요한 값들을 초기화합니다.
rollingStepFunc() 함수는 롤링 이벤트를 처리하는 함수입니다. 해당 함수는 주어진 stepCount 값에 따라 롤링 항목들을 움직이게 하고, 일정 시간 간격으로 롤링 효과를 반복적으로 실행합니다.
rollingStepFunc() 함수 내부에서 $('#rollingUl').delay(3000).animate(...)를 사용하여 3초 후에 top 속성을 변경하여 롤링 효과를 나타냅니다. 각 항목은 height 만큼 위로 이동하게 됩니다.
롤링 효과가 완료되면 rollingStepFunc() 함수는 다음 롤링 이벤트를 호출하여 반복적으로 롤링 효과를 실행합니다.
위의 소스 코드를 실행하면 페이지가 로드된 후 3초 후부터 롤링 효과가 시작되며, 각 항목이 순차적으로 위에서 아래로 이동합니다. 롤링 효과가 반복적으로 실행되면서 무한히 순환하게 됩니다.
animate() 예제 코드 실행 결과
위의 예제 소스 코드를 실행한 결과 화면입니다.
최종 정리
오늘은 jQuery의 animate() 함수를 활용한 방법을 간단한 텍스트 롤링 처리 방법을 알아봤습니다. jQuery는 몇 가지 기능만 익혀도 웹 페이지에 동적인 효과를 쉽게 부여할 수 있어서 UI의 품질을 향상할 수 있습니다.
오늘 배운 기능은 단순한 텍스트 롤링 기능이지만, 이러한 작은 기능들을 조합하여 점차 퀄리티 높은 웹 페이지를 만들어 나갈 수 있습니다.
jQuery의 다양한 기능을 익히면 더욱 멋진 웹 페이지를 구현할 수 있을 것입니다.
다음에도 더 많은 유용한 jQuery 기능들을 알아보도록 하겠습니다.
감사합니다!
'Javascript > jQuery' 카테고리의 다른 글
| [jQuery] 제이쿼리 fadein, fadeout을 이용한 텍스트 문구 자동 롤링 만들기 (1) | 2024.01.21 |
|---|---|
| jQuery의 animate 함수를 이용한 효과 만들기 (0) | 2023.09.04 |
| jQuery 선택자로 DOM 요소 다루기 (0) | 2023.08.21 |
| [jQuery] 제이쿼리 empty 함수 사용 방법 알아보기 (0) | 2023.08.14 |
| [jQuery] 제이쿼리 remove 함수 사용 방법 알아보기 (0) | 2023.08.08 |
