blur effect 웹사이트 : CSS masking

---

[기능 구현]

1. 배경 blur 처리

backdrop-filter:blur(정수px) 를 통해서 배경에 blur 효과를 준다.

2. blur처리를 해제 하는 원형 모양 생성

masking 이란 요소나 이미지의 선택된 부분을 브라우저 화면에 표시하고 나머지는 숨길수 있는 기술이다.

이러한 마스킹은 페이지의 이미지 또는 다른 요소의 일부를 숨기기 위해 PNG이미지, css 그라디언트, svg 요소를 사용하여 수행된다.

 

CSS 그라디언트를 통해 마스킹 할때는

mask-image: 그라디언트 종류(위치값, 그라디언트 시작시작색상, 그라디언트 종료색상);

으로 표현합니다. 

이때 

black 은 이미지, 요소를 보여주는 색상

투명한 항목은 이미지,요소를 숨기는 색상 입니다.

 

EX)

mask-image: radial-gradient(200px at 50% 50%, black 100%, transparent 50%);

(black -> 투명) 으로 퍼져 나가는 방사형 그라디언트

mask-image: radial-gradient(200px at 50% 50%, transparent 50%, black 100%);

(투명 -> black) 으로 퍼져 나가는 방사형 그라디언트

 

위 예제처럼 기존에 만든 화면에 (시작점:투명 -> 끝: black)으로 퍼져나가는 방사형 그라디언트를 적용한다.

 

3. 원형 모양을 마우스 위치에 따라 이동

원형 모양을 마우스 위치에 따라 이동하는 인터렉션은 

원형 masking되어있는 blur 요소의 x축과 y축을 마우스의 이동값에따라 계속 변경하는 방식으로 구현한다.  

 

이를 위해서 기존에 blur요소의 크기를 키우고 원형masking을 감추기위해 위치를 이동시킨다.

  /* 기존 요소의 속성 */
  top: 0vh;
  left: 0vw;
  width: 100vw;
  height: 100vh;

  /* 이동을 위해 변경한 속성 */
  top: -100vh;
  left: -100vw;
  width: 200vw;
  height: 200vh;

마우스 이동값에 따른 blur요소의 이동은 javascript로 구현한다.

•  onmousemove 로 요소위에서 커서의 이동 값을 구한다.
• blur요소에 css transform 을 통해 구한 이동값을 대입한다. 

// blurArea 변수생성
var blurArea = document.getElementById("blur-area");

// onmousemove -> 마우스 포인터가 요소 위에서 이동했을때 발생하는 이벤트
document.onmousemove = function (e) {
  //이벤트 값에 따라 blurarea의 x축과y축을 변경한다.
  // pageX,pageY -> 전체문서를 기준으로 한 좌표
  blurArea.style.transform = `translate(${e.pageX}px, ${e.pageY}px)`;
};

 

---

blurwebsite.zip

4.03MB

 

 

참조:

https://www.youtube.com/watch?v=f-lSGDjeHCk 

https://www.digitalocean.com/community/tutorials/css-masking-with-mask-image

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

https://shlee1353.github.io/2019/07/15/css-clip-mask/