js를 통한 이미지 블러 처리하기

미리보기 : 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>

js를 통한 이미지 블러 처리하기

LOGIN