Parallax.js頁面視差滾動插件使用說明



108 431 144



特效描述:Parallax.js 頁面視差滾動插件,Parallax.js制作網頁背景視差滾動展示、點擊網頁背景彈出背景圖片更換列表。 下面是簡單使用說明方法。 自定義設置: target: 應用視差效應的目標元素。 speed: 這個設置定義了背景滾動的速度。 vertical: 定義背景是否應垂直滾動。 vertical_inversed: 定義垂直滾動是否應該倒置。 horizontal: 定義背景是否應水平滾動。 horizontal_inversed: 定義是否應該反轉水平滾動。

代碼結構

1. 引入CSS

<link href='http://apps.bdimg.com/libs/bootstrap/2.3.2/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<link href='css/prettify.css' rel='stylesheet' type='text/css'>
<link href='css/index.css' rel='stylesheet' type='text/css'>
<link href='http://apps.bdimg.com/libs/bootstrap/2.3.2/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<link href='css/prettify.css' rel='stylesheet' type='text/css'>
<link href='css/index.css' rel='stylesheet' type='text/css'>

2. 引入JS

<script type='text/javascript' src='js/javascript.js'></script>
<script type='text/javascript' src='js/javascript.js'></script>

3. HTML代碼

?<!DOCTYPE html>
<html>
<head>
<title>不含jQuery的頁面背景切換</title>
</head>
<body class='body' onload='cdj()'>
	<div class='container'>
		<div class='header'>
			<span>
				justParallax.js 
			</span>
			An easy to use parallax plugin.
		</div>
		<div class='content'>
			<div class='head'>
				Feature navigation
			</div>
			<a class='scroll-to' href='#introduction'>
				Introduction
			</a>
			<br>
			<a class='scroll-to'  href='#support'>
				Wide browser support
			</a>
			<br>
			<a class='scroll-to'  href='#setup'>
				Easy set-up
			</a>
			<br>
			<a class='scroll-to'  href='#customize'>
				Customizable parallax settings
			</a>
			<br>
			<a class='scroll-to'  href='#jquery'>
				No jQuery needed
			</a>
			<br>
			<a class='scroll-to'  href='#notes'>
				Notes
			</a>
			<br>
			<a class='scroll-to'  href='#playground'>
				Playground
			</a>
		</div>
		<hr>
		<div class='content' id='introduction'>
			<div class='head'>
				Introduction
			</div>
			<p>
				<strong>justParallax.js</strong> is a lightweight javascript plugin which allows users to make the background of their webpage have a subtle parallax effect with just 2 lines of code. 
				<br><br>
				<strong>justParallax.js</strong> is also fully customizable and does not depend on any Javascript library to function.
				<br><br>
				<strong class='pull-right'>
					點擊背景改變它。<i class='icon icon-arrow-right'></i>
				</strong>
			</p>
		</div>
		<hr>
		<div class='content' id='support'>
			<div class='head'>
				Wide browser support
			</div>
			<p>
				<strong>justParallax.js</strong> supports all major browsers including  IE7+, Google Chrome, Mozilla Firefox, Safari, Opera and many more.
			</p>
		</div>
		<hr>
		<div class='content' id='setup'>
			<div class='head'>
				Easy set-up
			</div>
			<p>
				Get <strong>justParallax.js</strong> up and running in just 4 easy steps.
				<ol class='sum'>
					<li>
						Add a background to your &lt;body&gt; tag.
					</li>
					<li>
						Include <strong>justParallax.js</strong> to your html document.
					</li>
					<li>
						Customize your parallax settings. (optional)
					</li>
					<li>
						Call &uml;initParallax(settings);&uml; when your page is ready.
					</li>
				</ol>
			</p>
		</div>
		<hr>
		<div class='content' id='customize'>
			<div class='head'>
				Customizable parallax settings
			</div>
			<p>
				<strong>justParallax.js</strong> supports multiple customizations, here is a list of all options and it's default values.
				<br>
				<pre class='prettyprint linenums'><ol class='linenums'><li><span class='tag'>&lt;script src='./js/justParallax.js' type='text/javascript'&gt;&lt;script&gt;</span></li><li><span class='tag'>&lt;script&gt;</span></li><li>//Default settings</li><li><span class='pln'>speed: 8;</span> //The speed of the scrolling background, 1 is faster than 10.</li><li><span class='pln'>vertical: true;</span> //Set to true if the background should scroll vertically.</li><li><span class='pln'>vertical_inversed: false;</span> //Set to true if the vertical direction should be inversed.</li><li><span class='pln'>horizontal: true;</span> //Set to true if the background should scroll horizontally.</li><li><span class='pln'>horizontal_inversed: false;</span> //Set to true if the horizontal direction should be inversed.</li><li></li><li>//An example of the usage of justParallax.js</li><li><span class='pln'>var settings = {</span></li><li>	<span class='pln'>speed: 5,</span></li><li><span class='pln'>	vertical: true,</span></li><li><span class='pln'>	vertical_inversed: true,</span></li><li><span class='pln'>	horizontal: true,</span></li><li><span class='pln'>	horizontal_inversed: false</span></li><li><span class='pln'>};</span></li><li><span class='pln'>initParallax(settings);</span></li><li><span class='tag'>&lt;/script&gt;</span></li></ol></pre>
				You only have to define the settings in the variable that you want to change. All undefined settings will fall back to their default setting. 
			</p>
		</div>
		<hr>
		<div class='content' id='jquery'>
			<div class='head'>
				No jQuery needed
			</div>
			<p>
				<strong>justParallax.js</strong> works with plain Javascript which gives the best performance and doesn&acute;t need jQuery or any other Javascript library to function.
			</p>
		</div>
		<hr>
		<div class='content' id='notes'>
			<div class='head'>
				Notes
			</div>
			<p>
				<strong>justParallax.js</strong> is merely a tool to achieve a great website, here are some tips and tricks about how to use the tool.
				<br>
				<br>
				<ol class='sum'>
					<li>
						<strong>Watch the users screen size.</strong>
						<br>
						When the user scrolls, the background image will move and it will repeat itself when it has reached it's max. A good solution for this is to use patterns, patterns will repeat themselves and no one will have this problem.
						<br><br>
					</li>
					<li>
						<strong>Play around with the settings</strong>
						<br>
						By playing with the settings you will create the most wonderfull effects. For example: when you combine the vertical and horizontal scroll, the background will scroll diagonal.
						<br><br>
					</li>
					<li>
						<strong>Request new features</strong>
						<br>
						When you have some new ideas for features to this tool you can report them to this e-mail address or you can add a comment on the Codecanyon page .
						<br><br>
					</li>
				</ol>
			</p>
		</div>
		<hr>
		<div class='content' id='playground'>
			<div class='head'>
				Playground
			</div>
			<p>
				<strong>
					<i class='icon icon-arrow-left'></i>Click the background to change it.
				</strong>
				<table id='settingTable' class='table table-hover'>
					<thead>
						<tr>
							<th>
								Option
							</th>
							<th>
								Setting
							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								Speed:
							</td>
							<td>
								<select class='speed active'>
									<option value='1'>
										1
									</option>
									<option value='2'>
										2
									</option>
									<option value='3'>
										3
									</option>
									<option value='4'>
										4
									</option>
									<option value='5'>
										5
									</option>
									<option value='6'>
										6
									</option>
									<option value='7'>
										7
									</option>
									<option selected='true' value='8'>
										8
									</option>
									<option value='9'>
										9
									</option>
									<option value='10'>
										10
									</option>
							</td>
						</tr>
						<tr>
							<td>
								vertical:
							</td>
							<td>
								<div class='btn-group' data-toggle="buttons-radio">
									<button class='btn  btn-small active'value=true>
										true
									</button>
									<button class='btn btn-danger btn-small'value=false>
				 						false
									</button>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								vertical_inversed:
							</td>
							<td>
								<div class='btn-group' data-toggle="buttons-radio">
									<button class='btn  btn-small ' value=true>
										true
									</button>
									<button class='btn btn-danger btn-small active' value=false>
										false
									</button>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								horizontal:
							</td>
							<td>
								<div class='btn-group' data-toggle="buttons-radio">
									<button class='btn  btn-small ' value=true>
										true
									</button>
									<button class='btn btn-danger btn-small active' value=false>
										false
									</button>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								horizontal_inversed:
							</td>
							<td>
								<div class='btn-group' data-toggle="buttons-radio">
									<button class='btn  btn-small ' value=true>
										true
									</button>
									<button class='btn btn-danger btn-small active' value=false>
										false
									</button>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</p>
		</div>
	</div>
	<div class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<strong>Choose background.</strong>
		</div>
		<div class="modal-body">
			<div class='img-holder img-rounded pull-left'>
				<img src='images/robots.png' />
			</div>
			<div class='img-holder img-rounded pull-left'>
				<img src='images/cartographer.png' />
			</div>
			<div class='img-holder img-rounded pull-left'>
				<img src='images/escheresque_ste.png' />
			</div>
			<div class='img-holder img-rounded pull-left'>
				<img src='images/cuppycake.png' />
			</div>
			<div class='img-holder img-rounded pull-left'>
				<img src='images/monsturs.png' />
			</div>
			<div class='img-holder img-rounded pull-left'>
				<img src='images/colours.png' />
			</div>
		</div>
		<div class="modal-footer">
		<button class="btn" data-toggle='modal' data-target=".modal">Close</button>
		</div>
	</div>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 圖片滾動 圖片滾動條 全屏滾動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子