제이쿼리의 텍스트 문구에 동적인 효과를 주는 fadein과 fadeout 기능이며, 해당 이능을 통해서 여러 문구가 부드럽게 전환되며 사용자에게 시각적인 효과 기능을 제공한다.
jQuery의 유용한 기능 중 하나인 'fadein'과 'fadeout'을 이용하여 텍스트 문구가 자동으로 롤링되는 효과를 구현하는 방법에 대해 정리해 보려고 한다.
많은 웹사이트에서는 텍스트 문구가 일정 간격으로 위아래로 자연스럽게 움직이는 롤링 효과를 자주 볼 수 있다. 이러한 효과는 사용자들의 눈길을 끌고, 웹사이트에 동적인 요소를 추가하는데 매우 효과적이다. jQuery를 활용하면 간단하게 이러한 기능을 구현할 수 있다.
fadein과 fadeout의 기능
'fadein'과 'fadeout'은 jQuery에서 제공하는 애니메이션 효과 중 두 가지로, 요소의 투명도(opacity)를 조정하여 부드러운 페이드 효과를 만들어내는 기능이다.
fadein
요소를 서서히 나타나게 하는 효과다. 초기에는 해당 요소가 숨겨져 있고, 'fadein'이 실행되면 요소가 서서히 나타나서 사용자 눈에 보이게 됩니다. 이때, 요소의 투명도가 1에서 서서히 감소하여 0이 된다.
fadeout
요소를 서서히 사라지게 하는 효과다. 초기에는 해당 요소가 보이고 있으며, 'fadeout'이 실행되면 요소가 서서히 투명해지면서 사라지게 됩니다. 이때, 요소의 투명도가 1에서 서서히 감소하여 0이 된다.
이러한 fade 효과를 주로 활용하여 웹사이트에서 부드러운 애니메이션 효과를 구현하거나, 콘텐츠를 시각적으로 눈에 띄게 하는 데 사용됩니다. 예를 들어, 메시지 팝업이나 이미지 슬라이더 등에 적용하여 사용자 경험을 향상하는데 활용된다.
예제 소스 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery fade in / out Rolling</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- css 영역 -->
<style>
.rolling_div {
width : 140px;
margin : 0 auto;
top : 100px;
position : relative;
background : #e5e5e5;
color : #4a4a4a;
}
.rolling_ul {
height : 30px;
overflow : hidden;
margin : 0;
padding : 0;
list-style : none;
}
.rolling_ul li {
height : 30px;
padding : 3px;
margin : 3px;
}
</style>
<!-- javascript 영역 -->
<script>
$(function () {
/**
* 3초마다 interval을 주어 롤링 처리
*/
setInterval(function () {
/**
* fadeIn / fadeOut 기능을 이용하여 처리
*/
$('#rollingUl li:first').fadeOut(function () {
$(this).appendTo($('#rollingUl')).fadeIn(100);
});
}, 3000);
});
</script>
</head>
<!-- html ui 영역 -->
<body>
<div class="rolling_div">
<ul id="rollingUl" class="rolling_ul">
<li>안녕하세요.</li>
<li>fade in / out</li>
<li>롤링 테스트</li>
<li>감사합니다.</li>
</ul>
</div>
</body>
</html>위의 소스 코드는 jQuery를 이용하여 텍스트 문구가 3초마다 자동으로 롤링되는 효과를 구현한 예제다.
<style> 영역
.rolling_div 클래스로 스타일을 지정하여 롤링 효과가 적용될 요소의 배경색, 폰트 색상 등을 설정하였다. .rolling_ul 클래스로 스타일을 지정하여 텍스트가 롤링될 컨테이너의 높이와 텍스트 사이의 간격을 설정하였다.
<script> 영역
$(function() { ... })은 jQuery의 document.ready 함수로, 문서가 준비되면 내부의 코드를 실행한다.
1. setInterval 함수는 주어진 시간 간격마다 주기적으로 함수를 호출하는 메서드입니다. 여기서는 3초마다 롤링 효과를 주기적으로 수행하기 위해 사용한다.
2. $('#rollingUl li:first').fadeOut 구문은 #rollingUl li:first 선택자를 이용하여 롤링되는 텍스트의 첫 번째 li 요소를 선택하고 fadeOut 메서드를 이용하여 해당 요소를 서서히 사라지게 만든다.
3. $(this).appendTo($('#rollingUl')).fadeIn(100)구문은 fadeOut 후에 콜백 함수로서 해당 요소를 다시 #rollingUl 컨테이너의 끝에 추가하고 fadeIn 메서드를 이용하여 서서히 나타나게 합니다. 100은 fadeIn이 실행되는 시간(ms)으로, 0.1초간 서서히 나타난다.
실행 결과 화면
마무리
오늘은 jQuery의 'fadein'과 'fadeout'을 이용한 텍스트 롤링 기능을 구현해 봤다. jQuery는 기능적인 측면에서 자바스크립트를 보다 간단하게 사용할 수 있도록 도와주는 라이브러리로, 많은 부분에서 개발을 훨씬 간소화시켜 주는 장점이 있다. 이번 포스팅에서는 간단한 기능을 활용하여 시각적으로 포인트 효과를 주는 롤링 기능을 구현해 보았다.
텍스트 롤링은 웹 페이지에서 꽤 흔히 사용되는 기능으로, 일정 간격마다 텍스트가 자연스럽게 사라지고 나타나는 효과를 제공한다. 이러한 시각적인 효과를 통해 웹 페이지에 생동감을 더할 수 있으며, 사용자들에게 더욱 동적인 인상을 줄 수 있다.
jQuery를 이용하면 'fadein'과 'fadeout'과 같은 기능을 몇 줄의 코드로 간단하게 구현할 수 있으므로, 자바스크립트를 처음 접하는 개발자들도 쉽게 익힐 수 있을 것이다. 또한, jQuery의 다양한 기능과 플러그인들을 활용하면 웹 개발에서 다양한 인터랙션과 효과를 구현하는데 유용하게 활용할 수 있다.
이러한 기능들을 이용하여 웹 페이지를 더욱 다채롭게 꾸밀 수 있으며, 사용자들에게 더 좋은 사용자 경험을 제공할 수 있다.
'Javascript > jQuery' 카테고리의 다른 글
| jQuery의 animate 함수를 이용한 효과 만들기 (0) | 2023.09.04 |
|---|---|
| jQuery 선택자로 DOM 요소 다루기 (0) | 2023.08.21 |
| [jQuery] 제이쿼리 empty 함수 사용 방법 알아보기 (0) | 2023.08.14 |
| [jQuery] 제이쿼리 remove 함수 사용 방법 알아보기 (0) | 2023.08.08 |
| [jQuery] 제이쿼리 animate를 활용한 텍스트 문구 자동 롤링 만들기 (0) | 2023.07.21 |
