利用jQuery實現視差滾動parallax插件



58 228 77



特效描述:利用jQuery實現 視差滾動 parallax,利用jQuery實現視差滾動parallax插件

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="assets/styles/css/styles.css"/>

2. 引入JS

<script src="assets/scripts/js/libraries.min.js"></script>
<script src="deploy/jquery.parallax.js"></script>

3. HTML代碼

	<div id="fb-root"></div>
	<div id="container" class="wrapper">
		<ul id="scene" class="scene unselectable"
			data-friction-x="0.1"
			data-friction-y="0.1"
			data-scalar-x="25"
			data-scalar-y="15">
			<li class="layer" data-depth="0.00"></li>
			<li class="layer" data-depth="0.10"><div class="background"></div></li>
			<li class="layer" data-depth="0.10"><div class="light orange b phase-4"></div></li>
			<li class="layer" data-depth="0.10"><div class="light purple c phase-5"></div></li>
			<li class="layer" data-depth="0.10"><div class="light orange d phase-3"></div></li>
			<li class="layer" data-depth="0.15">
				<ul class="rope depth-10">
					<li><img src="assets/images/rope.png" alt="Rope"></li>
					<li class="hanger position-2">
						<div class="board cloud-2 swing-1"></div>
					</li>
					<li class="hanger position-4">
						<div class="board cloud-1 swing-3"></div>
					</li>
					<li class="hanger position-8">
						<div class="board birds swing-5"></div>
					</li>
				</ul>
			</li>
			<li class="layer" data-depth="0.30">
				<ul class="rope depth-30">
					<li><img src="assets/images/rope.png" alt="Rope"></li>
					<li class="hanger position-1">
						<div class="board cloud-1 swing-3"></div>
					</li>
					<li class="hanger position-5">
						<div class="board cloud-4 swing-1"></div>
					</li>
				</ul>
			</li>
			<li class="layer" data-depth="0.30"><div class="wave paint depth-30"></div></li>
			<li class="layer" data-depth="0.40"><div class="wave plain depth-40"></div></li>
			<li class="layer" data-depth="0.50"><div class="wave paint depth-50"></div></li>
			<li class="layer" data-depth="0.60"><div class="lighthouse depth-60"></div></li>
			<li class="layer" data-depth="0.60">
				<ul class="rope depth-60">
					<li><img src="assets/images/rope.png" alt="Rope"></li>
					<li class="hanger position-3">
						<div class="board birds swing-5"></div>
					</li>
					<li class="hanger position-6">
						<div class="board cloud-2 swing-2"></div>
					</li>
					<li class="hanger position-8">
						<div class="board cloud-3 swing-4"></div>
					</li>
				</ul>
			</li>
			<li class="layer" data-depth="0.60"><div class="wave plain depth-60"></div></li>
			<li class="layer" data-depth="0.80"><div class="wave plain depth-80"></div></li>
			<li class="layer" data-depth="1.00"><div class="wave paint depth-100"></div></li>
		</ul>
		<section id="about" class="wrapper about hide accelerate">
			<div class="cell accelerate">
				<div class="cables center accelerate">
					<div class="panel accelerate">
						<header>
							<h1>parallax<em>.js</em></h1>
						</header>
						<p>WOW, that&#39;s deep man! <strong>parallax.js</strong> 
						reacts to the orientation of your smart device, 
						offsetting layers depending on their depth within a 
						scene... Oh, you don&#39;t have a smart device? No worries, 
						if no gyroscope or motion detection hardware is 
						available, <strong>parallax.js</strong> uses the 
						position of your cursor instead. Radical.</p>
						<p>This project is a collaboration between<br>
						Matthew Wagerfield &amp; 
						Claudio Guglieri.</p>
						<div class="social">
							Follow <span class="handle">@mwagerfield</span>
							Follow <span class="handle">@claudioguglieri</span>
						</div>
						<ul class="links">
							<li><a class="download" href="http://51qianduan.com">
							51前端</a></li>
							<li><a class="github" target="_blank" href="http://51qianduan.com">
							51前端</a></li>
						</ul>
					</div>
				</div>
			</div>
		</section>
		<button id="toggle" class="toggle i">
			<div class="cross">
				<div class="x"></div>
				<div class="y"></div>
			</div>
		</button>
		<div id="prompt" class="wrapper prompt hide accelerate">
			<div class="cell accelerate">
				<div class="panel center unselectable accelerate">
					<button id="dismiss" class="dismiss">
						<div class="cross">
							<div class="x"></div>
							<div class="y"></div>
						</div>
					</button>
					<div class="tilt-scene">
						<img class="tilt" src="assets/images/tilt.png">
					</div>
					<h2>Tilting is fun!</h2>
					<p>For the best experience, check out this site on a mobile 
					or tablet equipped with a gyroscope</p>
					<p>(iPads are the coolest)</p>
				</div>
			</div>
		</div>
	</div>
	<!-- Scripts -->
	<script>
	// jQuery Selections
	var $html = $('html'),
			$container = $('#container'),
			$prompt = $('#prompt'),
			$toggle = $('#toggle'),
			$about = $('#about'),
			$scene = $('#scene');
	// Hide browser menu.
	(function() {
		setTimeout(function(){window.scrollTo(0,0);},0);
	})();
	// Setup FastClick.
	FastClick.attach(document.body);
	// Add touch functionality.
	if (Hammer.HAS_TOUCHEVENTS) {
		$container.hammer({drag_lock_to_axis: true});
		_.tap($html, 'a,button,[data-tap]');
	}
	// Add touch or mouse class to html element.
	$html.addClass(Hammer.HAS_TOUCHEVENTS ? 'touch' : 'mouse');
	// Resize handler.
	(resize = function() {
		$scene[0].style.width = window.innerWidth + 'px';
		$scene[0].style.height = window.innerHeight + 'px';
		if (!$prompt.hasClass('hide')) {
			if (window.innerWidth < 600) {
				$toggle.addClass('hide');
			} else {
				$toggle.removeClass('hide');
			}
		}
	})();
	// Attach window listeners.
	window.onresize = _.debounce(resize, 200);
	window.onscroll = _.debounce(resize, 200);
	function showDetails() {
		$about.removeClass('hide');
		$toggle.removeClass('i');
	}
	function hideDetails() {
		$about.addClass('hide');
		$toggle.addClass('i');
	}
	// Listen for toggle click event.
	$toggle.on('click', function(event) {
		$toggle.hasClass('i') ? showDetails() : hideDetails();
	});
	// Pretty simple huh?
	$scene.parallax();
	// Check for orientation support.
	setTimeout(function() {
		if ($scene.data('mode') === 'cursor') {
			$prompt.removeClass('hide');
			if (window.innerWidth < 600) $toggle.addClass('hide');
			$prompt.on('click', function(event) {
				$prompt.addClass('hide');
				if (window.innerWidth < 600) {
					setTimeout(function() {
						$toggle.removeClass('hide');
					},1200);
				}
			});
		}
	},1000);
	</script>
<div style="text-align:center;clear:both">
</div>



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


熱門標簽: 加載動畫 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表