안녕하세요.
풀 스크린 배경인 웹 페이지는 특정 주제를 강조하거나
정보를 쉽게 전달할 수 있습니다.
웹 페이지로 풀 스크린 배경을 제작하는 방법은 여러 방법이 있습니다.
j Query, bootstrap 등의 플러그인을 사용해서 쉽게 제작할 수 있습니다.
j Query에는 풀 스크린 배경을 지원하는 Backstretch이 있습니다.
플러그인은 j Query에 포함되어 있기 때문에 쉽게 소스 코드로 구현할 수 있습니다.
Backstretch 페이지(http://www.jquery-backstretch.com/)에 접속하시면 다운로드와 함께 사용방법을 얻을 수 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!--
Copyright (c) 2012 Scott Robbin
-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>codeomni.tistory.com j Query 플러그인 풀 스크린 배경 Backstretch.js 플러그인 소스 코드</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<style>
body {
padding: 350px 100px;
color: #d9cbb3;
}
</style>
</head>
<body>
<div>
<h1>Backstretch.js</h1>
<p><b>codeomni.tistory.com</b> j Query 플러그인 풀 스크린 배경 Backstretch.js 플러그인 소스 코드</p>
</div>
<script>
$(function(){
$.backstretch([
"backstretch1.png", "backstretch2.png", "backstretch3.png"
], {duration:2500, fade:750});
});
</script>
</body>
</html>
|
cs |
▲ 실행 화면입니다.
참고 문헌
Backstretch . (Aug 14 2018). http://www.jquery-backstretch.com/.
Backstretch: a simple jQuery plugin that allows you to add a dynamically-resized background image to any page
Backstretch a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element by Scott Robbin Download Backstretch Now link to a hosted copy on cdnjs.com or download the entire project, including
www.jquery-backstretch.com
댓글