728x90 반응형 javascript71 [자바스크립트 플러그인]쉽고 간단하게 스크롤 애니메이션 등록하기 WOW.js https://wowjs.uk/ wow.js — Reveal Animations When Scrolling wowjs.uk 이 페이지와 같이 다양한 스크롤 이벤트를 등록할 수 있다. 방법은 매우 쉽고 간단하다. 스크롤할때 이 애니메이션으로 동작해! 라고 클래스로 등록해주기만 하면 스크롤에 따라 알아서 적용된다 . 적용방법도 간단하다 일단 필요한 두가지 CSS파일 스크립트 그후 class의 wow 는 스크롤이벤트를 등록하겠다는 의미 flash 애니메이션 명으로 flash 이외에도 bounceInDown 나 rotateIn 와 같이 이름을 그대로 써주면 해당 애니메이션으로 동작한다. 이 이름은 (https://daneden.github.io/animate.css/) 해당 사이트에서 효과를 보고 선택하면 된다.. 2019. 6. 17. [javascript]체크박스(input[type="checkbox"]) 제어하기 fieldset, legend을 이용해 보기쉽게 그룹으로 묶어줄 수 있습니다. (자동으로 외곽선과 타이틀이 정리됩니다) checkbox에 onchange 함수를 적용해 체크했는지 체크해제했는지를 확인해서 아래 input text 영역에 값을 넣어준다. 선택하면 getAttribute 로 값을 가져와서 추가 선택했던걸 해제하면 ,로 잘라(split) 배열로 만들고 일치하는 특정 배열을 자르고(splice) 다시 배열을 합쳐 문자열로 만들어준다(join(",")) See the Pen checked by gahyun (@gahyun) on CodePen. [javascript/javascript] - 체크박스 input[type="checkbox"] 전체 체크 구현 [CSS/CSS 응용] - input[ty.. 2019. 6. 14. [자바스크립트 플러그인]모바일 최적화(터치기능) 반응형 이미지 슬라이드 모달(팝업)창 플러그인 https://photoswipe.com/ PhotoSwipe: Responsive JavaScript Image Gallery Touch-friendly JavaScript image gallery for mobile and desktop, without dependencies. Responsive layout. Swipe and zoom gestures. photoswipe.com 터치 - 스와이프(이미지넘기기) , 줌(확대) , 닫기(스와이프로 닫기) 등의 기능 제공 확대, 전체화면, 공유 기능 버튼 기본제공 썸네일, 이미지, 텍스트설명 기능 위 사이트에서 제공하는 예제를 통해 한번 살펴보면 다른 플러그인에 비해 설정해주어야할게 많지만 예제가 잘 나와있어서 복사해서 변형해서 써도되고 스크립트를 잘 .. 2019. 6. 12. [javascript]특정시간 이후에 동작하는 setTimeout / 특정 시간마다 반복동작하는 setInterval / setInterval을 종료하는 clearInterval setTimeout : 지정시간 이후에 1번 동작 setTimeout(function(){ },시간); setInterval : 지정시간 마다 반복동작 (무한반복) setInterval(function(){ }, 시간); clearInterval : setInterval을 종료 var interval = setInterval(function(){ },시간); clearInterval(interval); See the Pen JQoyoG by gahyun (@gahyun) on CodePen. 2019. 6. 12. 이전 1 ··· 4 5 6 7 8 9 10 ··· 18 다음 728x90 반응형