Peep

저는 step을 3등분해서 보여줄거라 다운로드 받은 이미지를 포토샵으로 비율을 맞춰줬습니다.

CSS

.hands{
  // 이건 애니메이션 보여지는 크기
  width:125px;
  height: 175px;

  // 연결된 이미지 bg로 깔고 이미지 크기 정함.
  background:url('/images/hands2.jpg')no-repeat;
  background-size:384px;

  // 0.5초동안 step 3으로 나누어서 무한 실행
  animation: animate .5s steps(3,end) infinite;
}

// 100%까지 bg이미지 크기 position-x로 지정
@keyframes animate{
  0%{
  	background-position-x:0;
  }
  100%{
  	background-position-x:-384px;
  }
}

예제는 https://leeyoonseo.github.io/css_animate_ex1/ 여기서 확인 가능합니다.

마우스 휠로 0 ~ 100까지 숫자 조절이 가능하게 하는 작업을 하게 되었다.

비록 취소되어 사용은 안했지만, 간단하게 검토하던 것을 적어두려고 한다!

처음에는 <input type="number"> 태그를 사용하여 간단히 작업하려고 했는데,

정책상 브라우저 호환에 문제가 있어서 <input type="text"> 태그로 작업을 진행하게 되었다.

HTML

<input id="target" type="text">

jQuery

// Firefox
$('#target').on('wheel', function(e){
   e.preventDefault();
   var num = $(this).val();
   
   if(e.originalEvent.deltaY < 0){
     if(num >= 100) return false;

     console.log('업');
   }else{
     if(num <= 0) return false;

     console.log('다운');
   }
});

// 그 외 브라우저
$('#target').on('mousewheel',function (e) {
      e.preventDefault();
      var num = Number($(this).val());

      if(e.originalEvent.wheelDelta > 0){
        if(num >= 100) return false;
		$(this).val(num + 1);
        console.log('업');
        
      }else{
        if(num <= 0) return false;
        $(this).val(num - 1);

        console.log('다운');
      }
});

Firefox만 스크롤 이벤트의 메서드가 약간 다르기때문에 분기하여 작성했다.

브라우저 체크 후 조건문으로 분기하는 작업이 필요하다.

Javascript

자바스크립트는 예제를 만들기 위해 작성하였기 때문에 크롬만 테스트를 했다.

const target = document.getElementById('target');

target.addEventListener('mousewheel',function (e) {
      e.preventDefault();
      var num = Number(this.value);
                       
      if(e.wheelDeltaY > 0){
        if(num >= 100) return false;
		this.value = num + 1 ;
        console.log('업');
        
      }else{
        if(num <= 0) return false;
		this.value = num - 1 ;
        console.log('다운');
      }
});

예제

See the Pen aRjgGO by leeyoonseo (@okayoon) on CodePen.