크롬80버전 결제 이슈, 영카트5 주요패치 확인!

이미지 블러 처리하기 (망할 익스때문에 JS) > 그누보드5 팁자료실

그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티

그누보드5 팁자료실

이미지 블러 처리하기 (망할 익스때문에 JS) 정보

이미지 블러 처리하기 (망할 익스때문에 JS)

첨부파일

첨부파일 blurify.js (4.1K) 11회 다운로드 2020-03-12 14:00:22

본문

이미지 블러 효과.. css로 처리하면 참 쉽죠..

 

filter: blur(10px);
-webkit-filter: blur(10px);

 

이런식으로 필터만 주면되는데 문제는 이 망할 익스플로러..

국내에선 아직도 익스 11 사용자가 많으므로 크로스브라우징에 애를 먹네요..

 

익스 9 이상부터 11 까지는 filter: blur가 먹질 않아서

온갖 삽질끝에 익스도 적용했네요.. ㅠ

혹시나 필요하실까봐,, 고생하지마시라고 공유합니다.

 

첨부된 JS파일을 편한곳에 업로드하고 호출합니다.

 

<script src="/경로/blurify.js"></script>

 

 

블러가 적용될 이미지에 class="blurify" 를 주고 src 대신 data-src 로 바꿔줍니다.

 

<img data-src="ex.png" class="blurify">

 

 

스크립트를 추가합니다.

 

<script>
(function () {
    blurify({
        images: document.querySelectorAll('.blurify'),
        blur: 5, // 높을수록 블러가 강하게 들어갑니다.
        mode: 'auto',
    });
})();
</script>

 

 

참 쉽죠?

 

추천7

댓글 전체

전체 1,690 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT