티스토리 뷰

WebPublisher/JavaScript & jQuery

[javaScript] counting flip animation

amanda 2024. 1. 11. 13:26

달력이나 시계가 카운트 되면서 자동으로 넘어가는 자바스크립트 애니메이션

 

 

레퍼런스 (핀터레스트)

https://www.pinterest.co.kr/pin/1047016613354267908/

 

A Flip Clock Flips Quickly Stock Footage Video [Video] | Clock, Instagram story ads, Facebook create

 

www.pinterest.co.kr

 

 

 

codepen에서 찾은 javascript animation 소스

https://codepen.io/ademilter/pen/nazxPX

 

Countdown Clock

...

codepen.io

 

 

 

풀어서 설명하는 velog

 

1. 라이브러리 없이 Vanilla CSS 만으로 플립 시계 카운터 (Flip Counter) 만들기

https://velog.io/@medistream/%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%97%86%EC%9D%B4-Vanilla-CSS-%EB%A7%8C%EC%9C%BC%EB%A1%9C-%ED%94%8C%EB%A6%BD-%EC%B9%B4%EC%9A%B4%ED%84%B0-Flip-Counter-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0

 

라이브러리 없이 Vanilla CSS 만으로 플립 시계 카운터 (Flip Counter) 만들기

안녕하세요 인티그레이션 프론트엔드 개발자 박정연입니다. 플립 카운터 애니메이션은 메디마켓 공동구매 프로젝트에서 사용자들의 눈을 사로잡는 요소를 넣기 위해 만들게 되었습니다.플립

velog.io

 

2. 플립 시계 만들기 with JS (2020)

https://velog.io/@oneook/%ED%94%8C%EB%A6%BD-%EC%8B%9C%EA%B3%84-%EB%A7%8C%EB%93%A4%EA%B8%B0-with-JS-Split-Flap-Project

 

플립 시계 만들기 with JS (2020)

숫자판이 틱,틱 소리를 돌아가며 가벼이 넘어간다. 지금 이 순간 흐르는 시간이 내는 소리다. 우리를 둘러싼 수 많은 장치들이 아날로그에서 디지털로 바뀌어 버린것도 이젠 오래 전이 되어버렸

velog.io

 

 

 

플러그인

1. flip.js

https://www.cssscript.com/demo/flip-clock-countdown-counter/

 

Flip.js Flip Clock Example

 

www.cssscript.com

 

 

https://www.jqueryscript.net/blog/best-flip-clock-countdown.html

 

7 Best Flip Clock Style Countdown Plugins In JavaScript (2023 Update) | jQuery Script

Flip Clock is a type of desktop clocks that indicates the time by numbers that are sequentially revealed by a split-flap display. Want to have a flip clock style countdown timer to improve the countdown experience on your sales, under construction, or comi

www.jqueryscript.net

 

 

저작자표시

'WebPublisher > JavaScript & jQuery' 카테고리의 다른 글

[javaScript] 브라우저의 높이값, 너비값 가져오기  (0) 2024.01.30
[javaScript] slot machine counting animation  (0) 2024.01.11
[javaScript] click 요소 data value로 popup창 띄우기  (0) 2023.12.29
[javaScript] chart 플러그인  (1) 2023.12.27
[javaScript] countdown event  (0) 2023.12.13