작업하기소스공유
조회 수 71 추천 수 2 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 댓글로 가기
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기

미리보기 : http://artistudy.com/blurtest/index.html (숫자를 변경하면 블러가 더 많아지기도 적어지기도 합니다)

실제활용 : https://www.artistudy.com/musiclisten/18648

 

https://github.com/GianlucaGuarini/vague.js/

위 소스를 활용합니다.

 

우선 js를 로드합니다

<load target="js/Vague.js" />

 

그리고 로드한곳에 스크립트를 작성해둡니다.

<script>
var vague = $("#blur_bg").Vague({intensity:5});
vague.blur();
</script>

여기 적힌#blur_bg는 기억해두세요. 추후 적용을 원하는 곳에서 불러올때 사용할 div id명입니다.

 

그 다음, CSS를 하나 작성합니다.

#blur_bg {
width:100%;
height:100%;
background:url(../img/blur_bg.jpg) no-repeat center center; /* 블러처리할 이미지를 불러옵니다 */
background-size:cover;
position:absolute;
filter:blur(5px); /* 여기 적힌 수치만큼 블러효과가 커집니다. */
}

 

그리고 적용할 곳에 div로 불러옵니다.(레이아웃,위젯 등..)

<div id="blur_bg"></div>

 

 

 

  • profile
    위파 2017.08.11 11:40:35
    좋은 소스 감사합니다.

서버에 요청 중입니다. 잠시만 기다려 주십시오...