728x90 반응형 분류 전체보기298 [JAVASCRIPT/JQUERY]애니메이션 - 숫자가 0부터 점점 커지는 롤링애니메이션 숫자가 0 부터 롤링되어 키지면서 지정한 숫자가 되도록 하는 애니메이션이다 . memberCountConTxt 에 숫자를 지정해 준다. duration 으로 숫자가 커지는 시간을 지정해주고 숫자에 , 를 추가해주는 함수 (3자리마다 , 추가) function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } See the Pen 제이쿼리_숫자_애니메이션_카운트 by gahyun (@gahyun) on CodePen. 2019. 4. 8. [JAVASCRIPT/JQUERY]이미지 리스트 반응형으로 구현할 때 참고 웹에서는 탭메뉴로 리스트를 보여주고 모바일에서는 가로 스크롤로 각 탭의 리스트를 볼 수 있도록 구현 모바일에서는 탭메뉴가 순서대로 보이고 가로스크롤로 각각 탭메뉴에 해당하는 리스트가 보여지도록 한다. 웹에서는 탭메뉴로 세로스크롤로 리스트가 보여지고 각각의 탭을 선택하면 해당 탭메뉴에 해당하는 리스트가 보여진다. See the Pen 반응형 리스트 탭메뉴 by gahyun (@gahyun) on CodePen. 2019. 4. 8. [애니메이션 효과 - css]CSS animation 옵션값 설정 방법 하나의 animation으로 설정할 때 .aniBox{ /* 하나로 묶어서 작성할 때 */ animation: name duration timing-function delay iteration-count direction fill-mode; /* animation: ani1 0.5s linear 1s 1 backwards; */ } 각각의 옵션을 나누어서 설정할 때 animation-name: ani1; /* animation 이름 즉 @keyframes로 선언한 이름 */ animation-duration: 0.5s; /* animation이 진행될 시간 0.5s 동안 진행된 */ animation-timing-function: linear; /* 진행되는 동안의 속도에 관한 설정 기본값 ease ea.. 2019. 4. 8. [JAVASCRIPT/JQUERY] 스크롤 감지 이벤트 (mousewheel) - 스크롤이 위로올라가는중인지 내려가는중인지 현재 어느위치에 있는지.. 마우스를 올렸는지.. 내렸는지 확인해 이벤트 등록하기 보통 웹사이트 헤더 부분이 마우스를 내렸을때 상단에 고정되도록하거나 스크롤 동작에따라 헤더에 이벤트를 주는 경우가 많다. 또는 본문에 스크롤이 어느정도 왔을 때에 따라 이벤트를 주기도 한다. 다음과 같이 이벤트를 설정할 수 있다. $(".box").on('mousewheel',function(e){ var wheel = e.originalEvent.wheelDelta; //스크롤값을 가져온다. if(wheel>0){ //스크롤 올릴때 $("p.result").html("올림.."); } else { //스크롤 내릴때 $("p.result").html("내림.."); } }); $(window).scrollTop()을 이용하면 현재 위치도 알 수 있고 .. 2019. 4. 8. 이전 1 ··· 71 72 73 74 75 다음 728x90 반응형
