[javaScript] counting flip animation
달력이나 시계가 카운트 되면서 자동으로 넘어가는 자바스크립트 애니메이션 레퍼런스 (핀터레스트) 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 Coun..
클릭한 요소의 데이터 값 가져와서 팝업 띄우기 HTML 팝업열기 팝업 제목 팝업 내용 CSS /* common */ html, body{margin: 0;padding: 0;} /* popup */ #dim{display: none;position: fixed;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);} .pop_container{display: none;position: fixed;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); z-index: 2;width: 90%;max-..
1. chart.js - 구글링 결과 현재 가장 널리 쓰이는 차트 플러그인으로 보임 (레퍼런스가 많다) - 심플한 디자인이고 기본 옵션 외에 커스텀이 어려운 편 https://www.chartjs.org/docs/latest/getting-started/ Getting Started | Chart.js Getting Started Let's get started with Chart.js! Alternatively, see the example below or check samples. Create a Chart In this example, we create a bar chart for a single dataset and render it on an HTML page. Add this code snip..
.list type decimal 출력 결과 : 1. 2. 3. .list_type_nodot 출력 결과 : 1 2 3 .list_type_circle 출력 결과 : ① ② ③ /* list type decimal */ .list_type_decimal{ counter-reset: type-decimal; } .list_type_decimal li{ display: block; } .list_type_decimal li:before{ margin-right: 4px; content: counter(type-decimal) "."; counter-increment: type-decimal; } /* list type decimal remove dot */ .list_type_nodot{ counter-re..
@font-face에서 unicode-range로 폰트를 변경하는 방법 영문과 숫자는 Roboto로 나머지 폰트는 Noto Sans KR로 적용 body {font-family:'Roboto' ,'Noto Sans KR', 'sans-serif';} @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local('※'), url('../fonts/Roboto-Regular.eot'), url('../fonts/Roboto-Regular.eot#iefix') format('embedded-opentype') url('../fonts/Roboto-Regular.woff') format('woff'), url('../fo..
[javaScript] countdown event
자바스크립트로 카운트다운 이벤트 구현하기 HTML DAYS HRS MINS SECS CSS .count_wrap ul{ display: flex; justify-content: center; align-items: center; } .count_wrap ul li{ position: relative; text-align: center; } .count_wrap ul li + li{ margin-left: 40px; padding-left: 40px; } .count_wrap ul li + li:before, .count_wrap ul li + li:after{ display: block; content: ''; position: absolute; top: 20px; left: -4px; width: 8p..
위로 올라가는 텍스트 animation jQuery로 구현하기 jQuery animate 무한 반복은 call back에 함수 이름을 작성해주면 된다 *jQuery animate 사용 방법 (진행 방식과 call back은 생략 가능) .animate({적용되는 속성}, speed, 진행 방식, call back) 진행 방식 값은 linear, swing, null 등이 있음 function scrollTest(){ var scrollRolling = $('.textrolling'), scrollHeight = scrollRolling.height(), scrollTime = scrollHeight * 50; scrollRolling.css('margin-top', '150px'); scrollRolli..