[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..
[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..
data-tab 값을 활용해 filter로 해당 data 값 가진 요소 찾는 click event $('.btn_tab').on('click', function(){ var tabData = $(this).data('tab'), tabMenu = $('.tab_menu'), tabConbox = $('.tab_conbox'); tabMenu.children().removeClass('active'); tabMenu.children().filter('[data-tab=' + tabData + ']').addClass('active'); tabConbox.hide(); tabConbox.filter('[data-tab=' + tabData + ']').stop().fadeIn(); })
탭 메뉴에 data-name 값을 각각 부여하고 이동할 섹션에는 ID값으로 같은 값을 부여한 뒤 탭 클릭 시 해당하는 섹션으로 스크롤 이동하도록 구현 HTML menu1 menu2 menu3 jQuery $('.tab_menu li a').on('click', function(){ var targetId = $(this).data('name'), targetSec = $('#' + targetId).offset().top; $('html').animate({ scrollTop : targetSec }, '2000'); return false; })