728x90 반응형 javascript/jQuery30 [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. [JAVASCRIPT/JQUERY] 글자 타이핑 효과 1. 초간단 타이핑 느낌내기 CSS animation을 이용해 커서가 깜빡거리는 효과를 구현 animation-duration: 0.3s; animation-iteration-count: infinite; 0.3초동안 애니메이션이 실행되고 infinite 무한으로 반복하기 @keyframes cursor{ 0%{border-right: 1px solid #fff} 50%{border-right: 1px solid #000} 100%{border-right: 1px solid #fff} } border-right가 커서가 깜빡이는 것 처럼 보인다. 이때 border-right 대신 쓸수있는방법은 after를 이용해 width와 height 값을 주고 background 색깔을 지정해 opacity 로 깜빡.. 2019. 4. 8. 이전 1 ··· 5 6 7 8 다음 728x90 반응형