풀 스크린 배경

이번 글에서는 풀 스크린 배경을 설정하는 법에 대해서 알아보겠습니다. 결과물은 아래와 같습니다.

예시 코드

<!doctype html>

<html>

<head>

<title>Vegas.js 플러그인</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h1>Fullscreen Background Image</h1>

<p><strong><a href="http://vegas.jaysalvat.com/">Veagas.js</a></strong> 플러그인을 이용한<br>풀스크린 배경 이미지.</p>

</div>

$(function(){

$('body').vegas({

slides:[

{src:'images/nature-1.jpg'},

{src:'images/nature-2.jpg'},

{src:'images/nature-3.jpg'},

{src:'images/swans.jpg',

video:{

src:['videos/Swans.mp4'],

loop:false, // 반복 x

mute:true // 소리 끄기

}

delay:3500

});

</script>

</body>

</html>

코드는 간단합니다. 자바스크립트를 통해 body에 vegas를 통해 사진 3장과 동영상 하나를 넣어서 3.5초마다 슬라이드 형식으로 화면이 바뀌도록 설정하였습니다.

L3m0n $0ju