728x90 반응형 javascript71 [JAVASCRIPT/JQUERY]이미지 리스트 반응형으로 구현할 때 참고 웹에서는 탭메뉴로 리스트를 보여주고 모바일에서는 가로 스크롤로 각 탭의 리스트를 볼 수 있도록 구현 모바일에서는 탭메뉴가 순서대로 보이고 가로스크롤로 각각 탭메뉴에 해당하는 리스트가 보여지도록 한다. 웹에서는 탭메뉴로 세로스크롤로 리스트가 보여지고 각각의 탭을 선택하면 해당 탭메뉴에 해당하는 리스트가 보여진다. See the Pen 반응형 리스트 탭메뉴 by gahyun (@gahyun) on CodePen. 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. [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 ··· 15 16 17 18 다음 728x90 반응형
