분류 전체보기(401)
-
스크롤시 엘리먼트에 애니메이션 추가하기
HTML 스크롤 시 애니메이션 추가 CSS @keyframes animation-active { 0%{opacity: 0; position:relative; top:50px;} 100%{opacity: 1; position:relative; top:0;} } .animation{opacity: 0;} .animation-active{animation: animation-active 1 .5s; animation-fill-mode:forwards;} JS $( function(){ const Elements = $('.animation'); function scrollSize(){ const scrollTop = $(document).scrollTop(); // 스크롤TOP 값 const windowH =..
2022.05.20
-
19장 프로토타입
보호되어 있는 글입니다.
2022.05.18
-
18장 함수와 일급 객체
보호되어 있는 글입니다.
2022.05.18
-
Timer 타이머
JS // timer function countdown( elementId, seconds ){ var element, endTime, hours, mins, msLeft, time; function updateTimer(){ msLeft = endTime - (+new Date); if ( msLeft < 0 ) { console.log('done'); } else { time = new Date( msLeft ); // hours = time.getUTCHours(); // mins = time.getUTCMinutes(); hours = String(time.getUTCHours()).padStart(2, "0"); mins = String(time.getUTCMinutes()).padStart(2..
2022.05.18
-
input[type="number"] 화살표 및 키보드 막기
CSS input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } JS // input[type="number"] 키보드 막기 $( function(){ $("input[type='number']").on('keydown', function(e){ if(!((e.keyCode > 95 && e.keyCode 47 && e.keyCode < 58) || e.keyCode == 8)) { return false; } }); });
2022.05.18
-
17장 생성자 함수에 의한 객체 생성
보호되어 있는 글입니다.
2022.05.15