[2015.12.30] notification with count - 숫자가 표시되는 알림 아이콘

보통 알림 아이콘에 이렇게 숫자 뱃지를 표시하는 형태가 많은데요.

애니메이션 효과를 줘서 알림 맥박을 구현했네요 ㅎㅎ

 

스크립트를 간단히 살펴보면..

2초에 한번씩 div.badge-num 요소를 지우고 다시 1이 더 큰 숫자로 생성하여 추가해준거네요..

실제로 사용할때는 이렇게 쓰지는 않을테니 크게 신경쓰지는 않아도 될듯합니다.

(function(d){
  var i = 1;
  var badge = document.getElementById('badge');

  var int = window.setInterval(updateBadge, 2000); //Update the badge ever 5 seconds
  var badgeNum;    
  function updateBadge(){//To rerun the animation the element must be re-added back to the DOM
        var badgeChild = badge.children[0];
            if(badgeChild.className==='badge-num')
                badge.removeChild(badge.children[0]);

        badgeNum = document.createElement('div'); 
      badgeNum.setAttribute('class','badge-num');
           badgeNum.innerHTML = i++;
        var insertedElement = badge.insertBefore(badgeNum,badge.firstChild); 
      console.log(badge.children[0]);
  }
})(document);

맥박 효과를 구현 하는 애니메이션 부분은 여기 인데요..

pulse, sonar 애니메이션을 정의하여서 사용하였네요.

.badge-num {
  ...
  animation: pulse 1.5s 1;
}
.badge-num:after {
  ...
  animation: sonar 1.5s 1;
}
@keyframes sonar { 
  0% {transform: scale(.9); opacity:1;}
  100% {transform: scale(2);opacity: 0;}
}
@keyframes pulse {
  0% {transform: scale(1);}
  20% {transform: scale(1.4); } 
  50% {transform: scale(.9);} 
  80% {transform: scale(1.2);} 
  100% {transform: scale(1);}
}

​

animation: pulse 1.5s 1; 

이 의미는 pulse라고 정의한 animation 을 1.5초 간격으로 1번 실행하겠다는 의미이구요..

css animation 의 자세한  방법 및 예제는 여기를 참고하시기 바랍니다.

 > CSS3 애니메이션 사용하기

 > CSS3 animations

간단한 사용 예제 및 Demo

See the Pen notification with count by Mahesh (@maheshambure21) on CodePen.