[JS/CSS] 모자이크 처리를 해보자! (filter blur)

#자바스크립트 #모자이크이벤트 #CSS #필터

1. filter blur?

여러분! CSS를 통해서 객체에 모자이크를 입힐 수 있다는 것 아셨나요?

웹개발 경력 10년이 지났는데, 저도 확실히 새로운 것을 안알아보긴 하나봐요! 이게 CSS로 아주 쉽게 되네요?

filter:blur(5px)

단지 이렇게 CSS만 입혀주면 끝이라는 사실!

정도는 0px이 모자이크 필터를 안 입힌 상태인거고 숫자가 커질수록 당연히 점점 모자이크가 심해져요. 위 그림은 5px이라는 점!

2. 간단한 예제를 해보자

이런 재미있는 기능을 알게되었는데 활용해봐야겠지요!

모자이크 된 블럭이 있다.

마우스를 블럭 위에 올리면 모자이크가 해제되어 안에 내용이 보이고
마우스를 블럭 위에서 제어하면 다시 모자이크가 된다.

어때요? 위와 같이 짜보는거! 재미있겠죠?

3. mouseover, mouseout

여기에 활용 될 이벤트는 바로 mouseover와 mouseout 입니다.

"마우스를 블럭 위에 올리면" : mouseover
"마우스를 블럭 위에서 제거하면" : mouseout

자, 어떻게 해야할지 보이지요?

답을 한번 알아보겠습니다!

$(document).ready(function() {
 $(".blurDiv").mouseover(function(){
  $(this).css("filter","blur(0px)");
 });
 $(".blurDiv").mouseout(function(){
  $(this).css("filter","blur(5px)");
 });
});

바로 이렇게 짜시면 되요! 올렸을 때에는 blur 값을 0으로 지정하고 다시 내렸을 때에는 blur값을 줌으로써 모자이크를 시키는 것이지요.

그러면 이렇게! 재미있는 기능이 완성됩니다!