오늘도 갑자기 쓸데없는게 생각나서..
우연히 배경을 검색하다가 우주배경 예쁜게 너무많아서 ㅠ_ㅠ 동시에 여러개의 배경을 사용하고 싶어서
포스팅 작성을 시작하게 되었습니다....
오늘의 목표
여러개의 배경화면은 자동으로 페이드인 페이드아웃 효과를 주면서
교체하는 방법을 알아보겠습니다.
예쁘쥬??
사실 요즘 애플스타일 같은 페이지가 많이 나타나면서.. 쭉스크롤을 내리면 배경이 바뀌는 스크립트는 많은데
의외로 페이드인 페이드아웃으로 배경이 계속 바뀌는 것은 잘 없더라구요.
우선 PURE CSS!! 아이러브 퓨어시에스에스!!!♡ 로 하는 방법도 있긴합니다.
@keyframes background-changer {
0%, 100% {
background-image: url(./images/배경1.jpg); }
50% {
background-image: url(./images/배경2.jpg);
}
}
body {
animation: background-changer 5s infinite;
}
하지만 이방법의 단점은.. 오직 크롬에서만 보여지게 됩니다.
그래서 jQuery를 사용하는 방법이 있는데 아래 코드를 사용하면 됩니다.
var images = ["BlueMac.jpg", "BlackHole.jpg", "StarPeople.jpg", "MountainLion.jpg"];
$(function () {
var i = 0;
$("body").css("background-image", "url(./images/" + images[i] + ")");
setInterval(function () {
i++;
if (i == images.length) {
i = 0;
}
$("body").fadeOut(3000, function () {
$(this).css("background-image", "url(./images/" + images[i] + ")");
$(this).fadeIn(3000);
});
}, 1000);
});
하지만 이코드를 사용하면 ㅡㅡ 이런 아스트랄....
콘텐츠영역이 상속(?)되어버려서 전체 fade 효과가 적용됩니다. jQuery의 페이드 효과은 불투명도opacity를 조절하기 때문이죠
단순히 배경색이면 rgba를 사용해서 적용할 수도 있겠는데.. 배경이미지라..
또 저게 배경이미지를 순차적으로 불러오면서 화면 깜빡임 현상도 최초 1회 존재하게 됩니다. -ㅠ-
그래서.. 해외 소스사이트를 살펴보니 대부분 이미지를 여러개 불러오고 z-index 값을 변경해주거나
페이드 효과를 주어서 변경하는 방식을 많이 사용합니다.
만약 위 코드를 그대로 사용하려면 셀렉터를 body를 안주고 아래와 같이 준다면 되겠죠???
<div id="background-changer"></div>
<style>
#background-changer{
position:absolute;
top:0;
width:100%;
height:auto;
z-index:-1
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var images = ["BlueMac.jpg", "BlackHole.jpg", "StarPeople.jpg", "MountainLion.jpg"];
$(function () {
var i = 0;
$("#background-changer").css("background-image", "url(images/" + images[i] + ")");
setInterval(function () {
i++;
if (i == images.length) {
i = 0;
}
$("#background-changer").fadeOut("slow", function () {
$(this).css("background-image", "url(images/" + images[i] + ")");
$(this).fadeIn("slow"); // 1000 = 1초
});
}, 1000);
});
</script>
해보지는 않았습니다. 되겠죠 아마.. ㅠ_ㅠ
만약 데스크탑 해상도에서 적용하려면
if (window.matchMedia('(min-width: 992px)').matches){
/* the viewport is at least 992 pixels wide */
}
감싸주면 되겠죠?!!
암튼 끝!!!!!!!
추가적인 방법.....
var cnt=0, bg;
var $body = $('body');
var arr = [1, 2, 3, 4, 5, 6];//var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg'];
var bgrotater = setInterval(function() {
if (cnt==5) cnt=0;
//bg = 'url("' + arr[cnt] + '")';
bg = 'url("./images/' + arr[cnt] + '")';
cnt++;
$body.css({'background-image': bg, 'background-size':'cover', 'transition': '6s'});
}, 6000);
이렇게 하면 크롬에서는 페이드효과가 보이고 그외 브라우저는
뚝뚝 그냥 6초마다 효과 없이 바뀝니다. + 최초 이미지 로드 깜빡임 현상 + 크롬도.. 두개씩 이미지 페이드가 겹쳐짐
개인적으로 이렇게 할바엔.. 차라리 css @keyframes 사용하는 방식을 해서 크롬이라도 제대로 보이게 하는게..
결국 설치하자마자 때버림.. 이게 우주가 자꾸 바뀌니깐 멀미 날 것 같음
아무튼 다음에는 랜덤 배경화면을 불러오는 방법!(http://cocosoft.kr/401)
특정 카테고리에서만 보이는 배경화면 하는 방법을 소개해보겠습니다. 찬찬히 작성할 예정
