以下是 视差滚动parallax插件代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>视差滚动parallax插件</title>
<!-- Behavioral Meta Data -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="assets/styles/css/styles.css"/>
</head>
<body>
<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'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'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 &
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="#">
测试</a></li>
<li><a class="github" target="_blank" href="#">
提交</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 src="assets/scripts/js/libraries.min.js"></script>
<script src="deploy/jquery.parallax.js"></script>
<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>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
