해준(plip****)
카페매니저1:1대화



https://cafe.naver.com/imwebcomm/1396 주소복사



첨부파일(2)



시작에 앞서

아래 GIF 이미지처럼 화면을 스크롤할 경우, 숫자가 올라가는 효과를 낼 수 있습니다. 코드를 사용해야 하기 때문에, 다소 어려울 수 있지만, 따라 하시는 경우 그리 어렵지 않게 적용하실 수 있으리라 믿습니다.





*공개 코드는 최대한 사용이 쉽도록 만들고자 노력합니다.

*코드의 경우 개인에 맞춰 수정해드리지 않습니다. 코드는 한 번 쓰면 디자인까지 코드로 일일이 고쳐드려야 하는 경우가 빈번하게 발생하여 도저히 모든 분들을 도와드릴 수가 없어 양해부탁드립니다.






1단계, 페이지 꾸미기

이번에 소개할 스크립트는 기본적으로 숫자만 카운팅되는 스크립트입니다. 따라서 숫자 주변에 해당 숫자가 무얼 의미하는지 먼저 [텍스트]나 [아이콘], [이미지] 위젯 등으로 꾸며줍니다.

*이 때 미리 숫자들을 어느 부분에 위치시킬지 미리 정해두면 좋습니다.







2단계, 코드 위젯 추가하기


움직이는 숫자는 모두 코드로 입력될 것입니다. 따라서 제 경우 각 아이콘 하단에 코드 위젯을 추가했습니다. 여러분께서도 숫자가 여러 개 쓰이는 경우 필요한 만큼 추가하고 배치해주세요.








3단계, 각 코드 위젯에 스크립트 붙여넣기



본 강좌 우측 상단에 첨부해드린 코드를 보시면 2개의 텍스트 파일이 있습니다.


1) Code_1_script_styles.txt : 공통 코드로 애니메이션, 카운팅 스크립트 외 숫자의 크기를 조절할 수 있습니다.

2) Code_2_counter.txt : counter 코드는 숫자의 시작과 끝 데이터를 입력하는 코드입니다. 항목별로 다르게 수치를 정할 수 있습니다.

*하단을 보시면 공통 코드(Code_1)는 하단에 두었으며, 숫자 코드(Code_2)는 항목 별로 추가해 넣은 걸 보실 수 있습니다.










4단계, 카운터 코드 자세히 보기

여러분께서는 카운터(Code_2) 코드에서 [최대숫자], [타이틀], [시작숫자] 3가지를 편집하실 수 있습니다.



<div id="counter">


<div class="counter-value" data-count="최대숫자" data-desc="타이틀">시작숫자</div>


</div>




1) 최대숫자 : 시작숫자부터 최대 몇 까지 표시해줄 건지 정할 수 있습니다.

2) 타이틀 : 항목을 입력할 수 있습니다. *예: CLASS

3) 시작숫자 : 0부터 시작하거나 기존 데이터가 있는 경우 13, 88 등 자유롭게 입력합니다. 단, 최대숫자보다 같거나 크면 안 됩니다.






150

사업자등록번호 : 106-04-80687

통신판매업신고번호 : 제 2015-서울용산-00950 호

Copyright© Adliving. All right reserved. 


고객지원 : 고객지원 게시판

운영시간 : 평일 AM 10:00 ~ PM 18:00(공휴일 휴무)

점심시간 : AM 11:30 ~ PM 1:00

주소 : 서울시 마포구 도화동 173 삼창프라자빌딩 1539호

고객지원 : 고객지원 게시판

운영시간 : 평일 AM 10:00 ~ PM 18:00(공휴일 휴무)

점심시간 : AM 11:30 ~ PM 1:00

주소 : 서울시 마포구 도화동 173 삼창프라자빌딩 1539호


사업자등록번호 : 106-04-80687

통신판매업신고번호 : 제 2015-서울용산-00950 호

Copyright© Adliving. All right reserved.