728x90 반응형 javascript71 [jQuery]마우스 움직임에 따라 이미지 위치 변경 mousemove이벤트를 등록해 "background-position": -e.pageX+"px "+ -e.pageY+"px" 현재 마우스 위치로 배경이미지 포지션을 지정해준다. See the Pen VOgPxw by gahyun (@gahyun) on CodePen. 2019. 6. 3. [jQuery] Scroll event 적용하기 스크롤할 때 영역 밖에 가려지는 컨텐츠 반투명하게 설정했다가 스크롤로 영역 안으로 들어왔을 때 다시 투명하지 않게 바꾸는 애니메이션 if(wheel>0){ //스크롤 올림(영역이 아래로 내려감) var max= $(".open").length; //현재 opacity:1 인 box 의 갯수를 가져온다 for(var i=0; i check+350 ){ // 윗부분이 영역 밖으로 넘어갔을때 다시 투명하게 설정 $(".open").eq(i).removeClass("open"); } } }else { //스크롤 내림(영역이 위로 올라옴) var max = $(".box").length; //전체 box 갯수를함 for(var i=0; i 2019. 5. 31. [자바스크립트플러그인]slick progressbar 만들기 [CSS] - [CSS]animation - 애니메이션 효과 중지했다가 다시 시작하기 [javascript] - [JAVASCRIPT/JQUERY]이미지슬라이드 플러그인 slick 옵션 설정하는 법(사용법) progressbar1 - 1개의 슬라이드에 대한 progress 슬릭 옵션중 pauseOnHover:true를 이용해서 마우스를 hover했을 때 자동 슬라이드가 멈추도록 설정했습니다. pauseOnHover:true CSS를 이용해 마우스가 hover되면 progress bar 의 애니메이션도 멈추도록 합니다. animation-play-state: paused; slick의 이벤트 afterChange(슬라이드 아이템이 바뀌고 나서) beforeChange(슬라이드 아이템 바뀌기 전에) 애니메이.. 2019. 5. 28. [자바스크립트플러그인]원형(도넛) 차트 그려주는 플러그인 옵션설정 https://github.com/rendro/easy-pie-chart rendro/easy-pie-chart easy pie chart is a lightweight plugin to draw simple, animated pie charts for single values - rendro/easy-pie-chart github.com 차트를 직접그릴수 있지만,, [CSS] - [CSS]CSS만을 이용해서 차트 그리기 이글에서 소개한 방법은 반원만 가능하다.... [CSS] - [CSS]그라디언트를 이용해 간단하게 원형차트/도넛차트 그리기(애니메이션으로 차트그리기 ) 이글에서 소개한 방법은 실제 웹사이트에 적용시 버벅거림 현상이 보인다.. 이러한 여러가지 단점들을 보안하기위해 플러그인을 쓰는것도 좋다.. 2019. 5. 27. 이전 1 ··· 6 7 8 9 10 11 12 ··· 18 다음 728x90 반응형