자바스크립트. 스크롤 시 뒷 배경이미지 블러 처리 도와주세요ㅠㅠ
본문
테스트하고 있는 주소
http://qpqp8726.dothome.co.kr/themes/bliart/
입니다.
두번째 섹션으로 넘어갈때 뒷배경 블러처리 되게 하고싶습니다
아래 방법 두가지 다 써보았는데 안되네용 뭐가 문제일까요?
아니면 fullpage.js 플러그인 사용시 충돌 때문일수잇나요?
<script>
$(document).ready(function(){
$(window).scroll(function(e) {
var distanceScrolled = $(this).scrollTop();
$('.visual_img').css('-webkit-filter', 'blur('+distanceScrolled/60+'px)');
});
});
</script>
이방법이랑
<script>
$(document).ready(function(){
$(window).scroll(function(e) {
var distanceScrolled = $(this).scrollTop();
$('.visual_img').css('-webkit-filter', 'blur('+distanceScrolled/60+'px)');
});
});
</script>
.blur {-webkit-filter: blur(4px);}
답변 1
fullpage.js 사용하시면 body 요소에 현재 보여지고 있는 섹션에대한 클래스명을 붙입니다.
이를 활용해서 CSS만으로 해당 섹션이 아닐때는 blur 처리하는 방식이나 반대의 경우로 만드는게 더 간단하지 않을까요.
답변을 작성하시기 전에 로그인 해주세요.
