20'C 흐림
서울 강남구
Flip.js는 오픈 소스이며 완벽하게 사용자 정의가 가능하고 매우 훌륭하며 바닐라 JavaScript 및 CSS로 된 고전적인 플립 시계 스타일 카운트다운 및 카운터 구성 요소입니다.
스톱워치, 시계, 방문자 카운터, 이벤트 카운트다운, 광고판 및 공항 스타일 텍스트 플립 애니메이션 등에 이상적입니다.
1. 패키지를 다운로드하고 다음 JavaScript 및 CSS 파일을 HTML 페이지에 로드하세요.
<link rel="stylesheet" href="flip/flip.min.css" /> <script src="flip/flip.min.js"></script>
<div class="tick" data-value="1234" data-did-init="setupFlip"> <div data-repeat="true"> <span data-view="flip"></span> </div> </div>
function setupFlip(tick) { Tick.helper.interval(function() { tick.value++; }, 1000); }
<div class="tick" data-did-init="handleTickInit"> <div data-repeat="true" data-layout="horizontal center fit" data-transform="preset(d, h, m, s) -> delay"> <div class="tick-group"> <div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay"> <span data-view="flip"></span> </div> <span data-key="label" data-view="text" class="tick-label"></span> </div> </div> </div>
function handleTickInit(tick) { var nextYear = (new Date()).getFullYear() + 1; Tick.count.down(nextYear + '-01-01').onupdate = function(value) { tick.value = value; }; }
<div class="tick" data-did-init="handleTickInit"> <div data-layout="horizontal fit"> <span data-key="hours" data-transform="pad(00)" data-view="flip"></span> <span data-view="text" data-key="sep" class="tick-text-inline"></span> <span data-key="minutes" data-transform="pad(00)" data-view="flip"></span> <span data-view="text" data-key="sep" class="tick-text-inline"></span> <span data-key="seconds" data-transform="pad(00)" data-view="flip"></span> </div> </div>
function handleTickInit(tick) { Tick.helper.interval(function(){ var d = Tick.helper.date(); tick.value = { sep: '.', hours: d.getHours(), minutes: d.getMinutes(), seconds: d.getSeconds() }; }); }
<div class="tick" data-value="0" data-did-init="handleTickInit"> <div data-layout="horizontal fit" data-value-mapping="indexes"> <span class="tick-group"> <span data-view="flip"></span> <span class="tick-text-inline">m</span> </span> <span class="tick-group"> <span data-repeat="true" data-transform="pad(00) -> split"> <span data-view="flip"></span> </span> <span class="tick-text-inline">s</span> </span> <span class="tick-group"> <span data-repeat="true" data-transform="pad(000) -> substring(0,2) -> split"> <span data-view="text" class="tick-text-inline"></span> </span> <span class="tick-text-inline">ms</span> </span> </div> </div>
<div class="tick-controls"> <button type="button" data-action="start">start</button> <button type="button" data-action="stop" style="display:none;">stop</button> <button type="button" data-action="reset">reset</button> </div>
function handleTickInit(tick) { // start a timer that is updated each 16 milliseconds var timer = Tick.helper.interval(function(passed) { // calculate duration in minutes, seconds and milliseconds tick.value = Tick.helper.duration(passed, ['m', 's', 'ms']); }, 16, { autostart:false } ); // create the controls and listen to user interaction with the controls var buttonStart = document.querySelector('[data-action=start]'); var buttonStop = document.querySelector('[data-action=stop]'); var buttonReset = document.querySelector('[data-action=reset]'); buttonStart.addEventListener('click', function() { timer.start(); // show stop button buttonStop.style.display = ''; // hide start button buttonStart.style.display = 'none'; }); buttonStop.addEventListener('click', function() { timer.pause(); // hide stop button buttonStop.style.display = 'none'; // show start button buttonStart.style.display = ''; }); buttonReset.addEventListener('click', function() { timer.reset(); // show stop button buttonStop.style.display = ''; // hide start button buttonStart.style.display = 'none'; }) }
6. 광고판 스타일의 텍스트 뒤집기 애니메이션을 만듭니다.
<div class="tick" data-did-init="handleTickInit"> <div data-repeat="true" data-layout="horizontal fit" data-transform="upper -> split -> delay(random, 100, 150)"> <span data-view="flip" data-transform="ascii -> arrive -> round -> char(a-zA-Z)" class="tick-char"></span> </div> </div>
function handleTickInit(tick) { // words to show on billboard var rotation = [ 'Tick ', 'Counter', 'Is ', 'Flippin', 'Awesome' ]; // current rotation index (we start at the first word) var index = 0; // each 3 seconds we'll update the billboard Tick.helper.interval(function(){ // get the word at the current index tick.value = rotation[index]; // when we reach the end we start over at zero index = index < rotation.length - 1 ? index + 1 : 0; }, 3000); }
7. 전체 API를 보려면 Tick 설명서를 방문하세요.
More previews: