JavaScript로 아이콘 애니메이션 효과 만드는 방법

아이콘 라이브러리인 Font Awesome과 JavaScript의 타이머 함수를 조합하면, 아이콘이 일정한 시간 간격으로 자동으로 전환되는 애니메이션 효과를 손쉽게 구현할 수 있습니다. 아래 예제에서는 사용자 관련 아이콘 세 개가 1초 간격으로 순차적으로 바뀌며, 이 과정이 4초 주기로 계속 반복됩니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<style>
    #user {
        font-size: 60px;
        color: rgb(106, 33, 201);
    }
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        padding: 20px;
    }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<h1>Animating Icon example</h1>
<div id="user" class="fa"></div>
<script>
    function userShift() {
        var userEle;
        userEle = document.getElementById("user");
        userEle.innerHTML = "";
        setTimeout(function() {
            userEle.innerHTML = "";
        }, 1000);
        setTimeout(function() {
            userEle.innerHTML = "";
        }, 2000);
    }
    userShift();
    setInterval(userShift, 4000);
</script>
</body>
</html>

코드 설명

<link> 태그: CDN을 통해 Font Awesome 4.7.0 스타일시트를 불러와 다양한 아이콘을 사용할 수 있도록 합니다.
#user 스타일: 아이콘의 크기를 60px로 키우고, 색상은 보라색 계열(rgb(106, 33, 201))로 지정합니다.
userShift() 함수: id가 "user"인 요소에 먼저 기본 사용자 아이콘(fa-user)을 표시하고, 1초 후에는 사용자 추가 아이콘(fa-user-plus), 2초 후에는 사용자 삭제 아이콘(fa-user-times)으로 차례대로 변경합니다.
setInterval(userShift, 4000): userShift 함수를 4초마다 반복 호출하여 애니메이션이 끊기지 않고 계속 이어지도록 합니다.

실행 결과

위 코드를 실행하면 보라색 사용자 아이콘이 1초 간격으로 모양이 바뀌고, 이 과정이 4초 주기로 무한히 반복되는 것을 화면에서 확인할 수 있습니다.

JavaScript로 아이콘 애니메이션 효과 만드는 방법