기본적으로 배경이미지에 대해 스크롤시키거나 점점 사라졌다 나오게 할수 없습니다.
대신 다음과 같은 개념으로 점점 사라졌다 다른 배경이미지로 나오는 효과를 줄 수 있습니다.
전체화면의 배경이미지에 효과를 줄때 유용한 방법이겠죠.
기본개념은 배경이 보일 셀의 자식셀을 추가로 만들어 해당 자식셀에도 배경이미지를 설정한후 해당 셀의 불투명도를 0(완전투명)으로 바뀌게하는 애니메이션효과를 주어 부모셀의 배경이미지가 보이게 하는겁니다.
사전 설정해야할 부분
- 아래 예제는 bg_1.jpg, bg_2.jpg, bg_3.jpg 총 3개의 이미지를 /img 폴더에 올려놓았다고 가정합니다.
- 부모셀(대부분 div 태그를 사용하겠죠.) 의 ID 를 "부모셀" 로 지정했다고 가정합니다.
- 자식셀의 ID 는 "자식셀"로 지정했다고 가정합니다.
- 부모셀의 스타일은 position:relative; background:url(/img/bg_2.jpg) no-repeat center center; background-size:cover;
- 자식셀의 스타일은 position:absolute; left:0; top:0; background:url(/img/bg_1.jpg) no-repeat center center; background-size:cover; width:100%; height:100%
[예제]
<script>
jQuery(document).ready(function() {
//배경이미지 개수. 이미지 개수를 달리할때 이부분만 수정하면 됩니다.
var bgimg_cnt=3;
//첫애니메인션에서 보여줄 이미지순서
var bgimg_id=1;
function replace_bg() {
//1000(1초) 간 자식셀을 투명하게 만듭니다. 그러면 그 아래에 있는 부모셀의 배경이미지(두번째이미지)가 보이겠죠.
$('#자식셀').animate({'opacity':0}, 1000, function() {
//투명하게된 자식셀을 다시 불투명하게 복귀시키면서 부모셀에 지정했던 배경이미지를 자식셀에 똑같이 지정합니다.
$('#자식셀').css({'background-image':'url(/img/banner_'+(bgimg_id+1)+'.jpg)', 'opacity':1});
//다음에 보여줄 이미지순서를 계산
bgimg_id=(bgimg_id+1) % bgimg_cnt;
//부모셀에(현재는 자식셀에 가려져서 안보이겠죠.) 다음에 보여줄 배경이미지를 지정합니다.
$('#부모셀').css({'background-image':'url(/img/banner_'+(bgimg_id+1)+'.jpg)'});
});
//다시 5초뒤에 배경이 바뀌게 호출함
setTimeout(replace_bg, 5000);
}
//5초뒤에 다음 이미지로 보이게 합니다.
setTimeout(replace_bg, 5000);
});
</script>