지난번 animate 기능으로 구현한 텍스트 문구 자동 롤링에 이어 오늘은 fadein과 fadeout 기능을 활용하여 문구 자동 롤링 처리되는 기능에 대해서 정리해 보려고 한다. 사용하는 함수는 다르지만 효과는 매우 유사하며, animate 함수가 아니더라도 동일한 기능을 낼 수 있다. 개발자라면 하나의 기능 구현보다는 다양한 기능을 활용하여 동일한 기능을 구현해 보는 것도 매우 중요하다.
기능을 정리하기에 앞서 fadein과 fadeout 함수에 대해서 개념을 정리하고 시작하는 것이 좋다.
fadein(), fadeout() 함수
텍스트 문구의 자동 롤링 가능을 구현하는 데에는 jQuery의 fadeIn()과 fadeOut() 함수를 사용할 수 있다. animate()함수와 달리 두 개의 이들을 조합해서 적절히 사용해야 하는 차이가 있으며, 이 두 개의 함수는 요소를 부드럽게 나타나게 하거나 사라지게 하는 효과를 제공한다.
fadeIn()
- fadeIn() 함수는 요소를 서서히 나타나게 한다.
- 요소가 처음에는 화면에 표시되지 않다가 점차 투명도가 증가하여 나타난다.
- 주로 요소가 보이는 것을 부드럽게 만들어야 할 때 사용된다.
- 일반적으로 요소의 초기 상태는 css에서 display:none 또는 opacity:0 과 같이 속성이 숨겨져 있어야 한다.
fadeOut()
- fadeOut() 함수는 요소를 서서히 사라지게 한다.
- 요소가 현재 화면에 보이는 상태에서 점차 투명도가 감소하여 사라진다.
- 사용자의 시선을 이동시키거나 특정 작업의 완료를 나타내기 위해 사용된다.
위와 같이 fadeIn(), fadeOut() 함수는 주로 요소를 부드럽게 보이거나 사라지게 하는 데 사용되며, 오늘 글의 주제인 텍스트 문구 자동 롤링과 같은 기능을 구현하는 데에도 활용할 수 있다.
기능 구현 소스 코드
* 사용 언어 및 라이브러리 버전 정보
- jQuery 3.4.1
- HTML5
- css3
- Visual Studio Code 1.63.2 (사용 tool)
실행 소스 코드
<!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>
위의 소스 코드는 fadeIn, fadeOut 함수를 활용하여 텍스트 롤링처리하는 예제 코드다.
기능 내용을 하나씩 정리해보면,
javascript 영역
1. setInterval(function () { ... }, 3000) 부분은 3초마다 실행되는 반복적인 함수를 설정한다. 이 함수는 텍스트를 자동으로 롤링하기 위해 사용된다.
2. $('#rollingUl li:first').fadeOut(function () { ... }) 부분은 rollingUl 요소의 첫 번째 li 자식 요소를 서서히 사라지레 한다. 그리고 사라진 후에 콜백 함수를 실행한다.
3. $(this).appendTo($('#rollingUl')).fadeIn(100) 부분은 fadeOut() 처리된 요소를 rollingUl의 끝에 추가한 후 서서히 나타나게 한다.
html, css 영역
1. 텍스트 롤링을 위한 요소들을 정의한다. .rolling_div 클래스의 <div>안에는 롤링될 텍스트를 포함하는 <ul>요소가 포함되어 있다.
2. css에서는 롤링 요소들의 스타일을 지정한다. 여기서는 요소들의 배경색, 텍스트 색상, 여백 등을 설정하였다.
위의 소스 코드를 실행하게 되면 아래 결과 화면과 같이 fadeIn, fadeOut 함수를 사용하여 텍스트를 자동으로 롤링하는 기능을 확인할 수 있다.
실행 화면
fadeIn(), fadeOut() 활용 사례
fadeIn()과 fadeOut() 함수는 웹 페이지에서 다양한 상황에서 활용될 수 있다.
1. 모달 창
UI에서 모달 창이 나타나거나 사라질 때 fadeIn, fadeOut 함수를 사용하여 조금 더 부드러운 애니메이션 효과를 줄 수 있다.
2. 알림 메시지
사용자에게 알림이 표시될 때 메시지를 부드럽게 나타내고 사라지게 할 수 있다.
3. 탭 전환
웹 페이지의 탭을 전환할 때 탭의 콘텐츠가 부드럽게 사라지고 새로운 탭의 콘텐츠가 부드럽게 나타나는 효과를 줄 수 있다.
4. 텍스트 롤링
텍스트가 자동으로 롤링되는 기능에서 fadeIn, fadeOut 함수를 사용하여 다음 텍스트가 부드럽게 나타나고 현재 텍스트가 서서히 사라지도록 할 수 있다.
5. 이미지 처리
이미지 갤러리 화면에서 썸네일을 클릭할 때 해당 이미지가 부드럽게 나타나고 사라지도록 처리할 수 있다.
이러한 활용 사례들을 통해 투박하고 딱딱한 느낌의 기능들을 한층 더 부드럽게 효과를 줄 수 있어 유용하게 활용될 수 있다.
fadeIn(), fadeOut() 사용 시 주의사항
fadeIn, fadeOut 함수를 사용할 때에는 몇 가지 유의사항이 있다.
요소의 초기 상태 설정
함수를 사용하기 전에 요소의 초기 상태를 설정해야 한다. 보통 요소를 숨기기 위해 css로 display:none이나 opacity:0과 같은 속성을 사용한다. 초기 상태를 제대로 설정하지 않으면 애니메이션 효과가 비정상적으로 작동할 수 있다.
애니메이션 충돌
여러 애니메이션 효과가 동시에 발생하는 경우 충돌이 발생할 수 있다. 예를 들어, 한 요소에 대해 동시에 fadeIn 및 fadeOut를 호출하면 예상치 못한 동작이 발생할 수 있다. 따라서 여러 애니메이션을 순차적으로 실행하거나, 애니메이션을 중지한 후 새로운 애니메이션을 시작해야 한다.
애니메이션 지속 시간 설정
애니메이션의 지속 시간은 사용자 경험에 영향을 미친다. 지나치게 빠르거나 느린 애니메이션은 사용자에게 오히려 불편함을 줄 수 있다. 적절한 애니메이션 지속 시간을 선택하여 자연스러운 전환 효과를 만들어야 한다.
브라우저 호환성
일부 오래된 버전의 브라우저에서는 fadeIn, fadeOut 함수가 정상적으로 작동하지 않을 수 있다. 따라서 웹 사이트나 애플리케이션을 개발할 때 브라우저 호환성을 고려하여 테스트하고 대안을 마련하는 것이 좋다.
자원 소비
애니메이션은 CPU 및 GPU 등의 자원을 소비하므로 과도한 애니메이션 사용은 성능에 영향을 줄 수 있다. 따라서 필요한 경우에만 애니메이션을 사용하고, 너무 많은 요소에 동시에 애니메이션을 적용하지 않는 것이 좋다.
애니메이션 효과는 사용자의 관점이 매우 중요하기 때문에 너무 느리지도 빠르지도 않아야 하며, 자원을 과하게 낭비하면서까지 사용할 바에는 사용하지 않는 것이 좋다. 그리고 화면 개발은 다양한 브라우저 버전을 고려해야 하므로 애니메이션 효과를 줄 때에는 반드시 이러한 주의사항들을 고민해 보는 것이 좋다.
마무리
오늘은 jQuery의 fadeIn(), fadeOut()을 활용하여 예제를 만들어 봤다. animate 함수와 유사하게 구현 방법과 개념은 매우 간단하고 배우기 쉽지만, 기능이 간단한 만큼 마지막에 정리한 주의사항과 같이 고려해야 하는 부분도 여러 가지가 있었다. UI 개발은 많은 기술들에서 제공되는 기능들이 쉽고 재밌는 만큼 내부적으로도 고려해야 할 부분이 있으므로 주의해서 구현하는 것이 중요하다.
'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 텍스트 문구 자동 롤링 기능 (animate) (0) | 2022.02.17 |
