주행 거리계를 사용하여 사이트에 애니메이션 숫자 추가

프로젝트에 숫자 애니메이션을 추가하고 싶으십니까? 나는 최근에 그것을했고 지금 당신과 그것을 공유하는 시간을 갖습니다. 어떻게 할 수 있는지 함께 봅시다.

숫자 애니메이션을 가능한 한 원활하게 통합하기 위해 주행 기록계 스크립트 및 스타일을 구현하는 단계를 살펴보겠습니다.

코드 준비

Odometer website 또는 Github으로 이동하여 파일을 다운로드할 수 있습니다.

CDN은 없지만 여기에 CSS 및 Javascript 소스가 있습니다.

<link href="https://github.hubspot.com/odometer/themes/odometer-theme-default.css" rel="stylesheet">
<script src="https://github.hubspot.com/odometer/odometer.js"></script>

이제 html 요소가 주행 거리계 역할을 하기를 원할 것입니다. 주행 거리계를 사용하려면 odometer id를 추가해야 합니다.

<p id="odometer"></p>

그리고 마지막으로 애니메이션을 구현해야 합니다. HTML 요소의 번호를 변경해야 합니다.

setTimeout(function(){
    odometer.innerHTML = 986;
}, 100);

이제 기본 스타일의 주행 거리계 애니메이션이 있습니다. 스타일을 바꿔야 한다면?

주행 거리계 스타일 선택

Odomoter에서 만든 range of stylesheets 중에서 선택할 수 있습니다.

Please note that as of publication date (23 Sep 2020) the CSS on that Odometer page are not working. I hope it's fixed soon. In the meantime, adapt the CSS link I use in my example and Codepen.

물론 자체 주행 거리계 스타일을 만들 수도 있습니다.

Codepen의 라이브 예제

예는 백만 단어의 가치가 있지 않습니까? 😄


정말 가볍고 간단한 통합입니다.
HubSpot 감사합니다!

계속 플레이하여 배우세요! 🔥

내가 제공하는 것에 가치가 있다면 주저하지 말고 buy me a coffee 😇