,




아래 동영상처럼 동작하는 코드를 만들어서 스터디그룹에 있던 사람들과 공유해 봤다.



배경화면이 위의 동영상같이 동작(위의 동영상에 사용된 배경화면은 DSLR 원본 사진이다)하게 만드는 방법은 생각외로 아주 간단한 편이다.


다만 방법을 모르면 만들어야 하는데, 그 만드는데 쉽지만은 않다.


가장 간단하게 CSS3로 만드는 방법은 다음과 같다.





body { margin:0; padding:0; background:url("background001.JPG") no-repeat center center; background-attachment:fixed; background-size:cover; }





근데 background-size:cover 속성을 모르는 상태에서 만들려면... jquery 또는 javascript로 다음과 같은 기능을 만들어줘야 하는데, 사실 코드상으로는 간단하지만 어떻게 짜야지 라고 생각해내는것이 쉽지만은 않다. 특히 if 문 조건은 생각해내는게 쉽지 않다.




1. jquery사용


$(document).ready(function(){

resizeBgFull();

});


function resizeBgFull(){

var wheight = document.body.clientHeight;

var wwidth = document.body.clientWidth;

if(wheight*4288 >= wwidth*2848){

$("body").css("background-size",wheight*4288/2848+"px "+wheight+"px");

}

else {

$("body").css("background-size",wwidth+"px "+wwidth*2848/4288+"px");

}

}




2. javascript로만!


window.onload = function(){

resizeBgFull();

};


function resizeBgFull(){

var wheight = document.body.clientHeight;

var wwidth = document.body.clientWidth;

if(wheight*4288 >= wwidth*2848){

document.body.style.backgroundSize=wheight*4288/2848+"px "+wheight+"px";

//$("body").css("background-size",wheight*4288/2848+"px "+wheight+"px");

}

else {

document.body.style.backgroundSize=wwidth+"px "+wwidth*2848/4288+"px";

//$("body").css("background-size",wwidth+"px "+wwidth*2848/4288+"px");

}

}




위의 코드를 적용시킨 다음에 html 의 body 태그에 <body onresize="resizeBgFull();"> 코드를 적용시켜주면 된다.





다음에는 css3 없이 만들어 봐야겠다. 근데 막상 해보니까 매끄럽게 동작하지 않아서 좀 빡친다는게 문제... 어떡하지?





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

티스토리 툴바