以下是 parallax视差立体场景动画效果代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>parallax视差立体场景动画效果</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>
<style type="text/css">
ul,li{ margin:0; padding:0; list-style:none;}
.wrapper{ width:100%; height:1500px; background:#000; padding-top:100px; overflow:hidden;}
.content{ width:923px; height:750px; margin:0 auto;}
#scene{
height: 940px;
list-style: none outside none;
margin: 30px auto 0 auto;
padding: 0;
width: 100%;
position:relative;
}
.layer{ display:block;}
.swing-4 {
-webkit-animation: swing 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
-moz-animation: swing 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
animation: swing 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.swing-4i {
-webkit-animation: swing4i 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
-moz-animation: swing4i 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
animation: swing4i 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }
@-webkit-keyframes swing {
0% {
-webkit-transform: rotateZ(10deg);
-moz-transform: rotateZ(10deg);
transform: rotateZ(10deg); }
100% {
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
transform: rotateZ(-10deg); } }
@-moz-keyframes swing {
0% {
-webkit-transform: rotateZ(10deg);
-moz-transform: rotateZ(10deg);
transform: rotateZ(10deg); }
100% {
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
transform: rotateZ(-10deg); } }
@-ms-keyframes swing {
0% {
-webkit-transform: rotateZ(10deg);
-moz-transform: rotateZ(10deg);
transform: rotateZ(10deg); }
100% {
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
transform: rotateZ(-10deg); } }
@keyframes swing {
0% {
-webkit-transform: rotateZ(10deg);
-moz-transform: rotateZ(10deg);
transform: rotateZ(10deg); }
100% {
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
transform: rotateZ(-10deg); } }
/**/
@-webkit-keyframes swing4i {
0% {
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
transform: rotateZ(-10deg); }
100% {
-webkit-transform: rotateZ(10deg);
-moz-transform: rotateZ(10deg);
transform: rotateZ(10deg); } }
@-moz-keyframes swing4i {
0% {
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
transform: rotateZ(-10deg); }
100% {
-webkit-transform: rotateZ(10deg);
-moz-transform: rotateZ(10deg);
transform: rotateZ(10deg); } }
@-ms-keyframes swing4i {
0% {
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
transform: rotateZ(-10deg); }
100% {
-webkit-transform: rotateZ(10deg);
-moz-transform: rotateZ(10deg);
transform: rotateZ(10deg); } }
@keyframes swing4i {
0% {
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
transform: rotateZ(-10deg); }
100% {
-webkit-transform: rotateZ(10deg);
-moz-transform: rotateZ(10deg);
transform: rotateZ(10deg); } }
/**/
.swing-2 {
-webkit-animation: swing2 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
-moz-animation: swing2 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
animation: swing2 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.swing-6 {
-webkit-animation: swing6 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
-moz-animation: swing6 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
animation: swing6 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.swing-6i {
-webkit-animation: swing6i 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
-moz-animation: swing6i 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
animation: swing6i 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }
@-webkit-keyframes swing2 {
0% {
-webkit-transform: rotateZ(3deg);
-moz-transform: rotateZ(3deg);
transform: rotateZ(3deg); }
100% {
-webkit-transform: rotateZ(-3deg);
-moz-transform: rotateZ(-3deg);
transform: rotateZ(-3deg); } }
@-moz-keyframes swing2 {
0% {
-webkit-transform: rotateZ(3deg);
-moz-transform: rotateZ(3deg);
transform: rotateZ(3deg); }
100% {
-webkit-transform: rotateZ(-3deg);
-moz-transform: rotateZ(-3deg);
transform: rotateZ(-3deg); } }
@-ms-keyframes swing2 {
0% {
-webkit-transform: rotateZ(3deg);
-moz-transform: rotateZ(3deg);
transform: rotateZ(3deg); }
100% {
-webkit-transform: rotateZ(-3deg);
-moz-transform: rotateZ(-3deg);
transform: rotateZ(-3deg); } }
@keyframes swing2 {
0% {
-webkit-transform: rotateZ(3deg);
-moz-transform: rotateZ(3deg);
transform: rotateZ(3deg); }
100% {
-webkit-transform: rotateZ(-3deg);
-moz-transform: rotateZ(-3deg);
transform: rotateZ(-3deg); } }
/**/
@-webkit-keyframes swing6 {
0% {
-webkit-transform: rotateZ(40deg);
-moz-transform: rotateZ(40deg);
transform: rotateZ(40deg); }
100% {
-webkit-transform: rotateZ(-40deg);
-moz-transform: rotateZ(-40deg);
transform: rotateZ(-40deg); } }
@-moz-keyframes swing6 {
0% {
-webkit-transform: rotateZ(40deg);
-moz-transform: rotateZ(40deg);
transform: rotateZ(40deg); }
100% {
-webkit-transform: rotateZ(-40deg);
-moz-transform: rotateZ(-40deg);
transform: rotateZ(-40deg); } }
@-ms-keyframes swing6 {
0% {
-webkit-transform: rotateZ(40deg);
-moz-transform: rotateZ(40deg);
transform: rotateZ(40deg); }
100% {
-webkit-transform: rotateZ(-40deg);
-moz-transform: rotateZ(-40deg);
transform: rotateZ(-40deg); } }
@keyframes swing6 {
0% {
-webkit-transform: rotateZ(40deg);
-moz-transform: rotateZ(40deg);
transform: rotateZ(40deg); }
100% {
-webkit-transform: rotateZ(-40deg);
-moz-transform: rotateZ(-40deg);
transform: rotateZ(-40deg); } }
/**/
@-webkit-keyframes swing6i {
0% {
-webkit-transform: rotateZ(-40deg);
-moz-transform: rotateZ(-40deg);
transform: rotateZ(-40deg); }
100% {
-webkit-transform: rotateZ(40deg);
-moz-transform: rotateZ(40deg);
transform: rotateZ(40deg); } }
@-moz-keyframes swing6i {
0% {
-webkit-transform: rotateZ(-40deg);
-moz-transform: rotateZ(-40deg);
transform: rotateZ(-40deg); }
100% {
-webkit-transform: rotateZ(40deg);
-moz-transform: rotateZ(40deg);
transform: rotateZ(40deg); } }
@-ms-keyframes swing6i {
0% {
-webkit-transform: rotateZ(-40deg);
-moz-transform: rotateZ(-40deg);
transform: rotateZ(-40deg); }
100% {
-webkit-transform: rotateZ(40deg);
-moz-transform: rotateZ(40deg);
transform: rotateZ(40deg); } }
@keyframes swing6i {
0% {
-webkit-transform: rotateZ(-40deg);
-moz-transform: rotateZ(-40deg);
transform: rotateZ(-40deg); }
100% {
-webkit-transform: rotateZ(40deg);
-moz-transform: rotateZ(40deg);
transform: rotateZ(40deg); } }
</style>
<script type="text/javascript">
$(window).load(function() {
$('.wrapper').css('height', $(window).height());
$('.wrapper').css('width', $(window).width());
});
$(window).resize(function(){
$('.wrapper').css('height', $(window).height());
$('.wrapper').css('width', $(window).width());
});
</script>
<body>
<div class="wrapper">
<div class="content">
<ul id="scene">
<li class="layer" data-depth="0.10">
<div style=" width:923px; height:750px;position:absolute; top:0; left:0;"><img src="images/bg.jpg" width="923" height="750" /></div>
<div class="swing-4i" style="width:82px; height:117px; position:absolute; top:433px; left:273px;">
<img src="images/st_ch1_s.png" width="82" height="117" />
</div>
<div style="width:180px; height:140px; position:absolute; top:430px; left:235px;">
<img src="images/st_ch1_m.png" width="180" height="140" />
</div>
<div class="swing-4i" style="width:164px; height:235px; position:absolute; top:603px; left:323px;">
<img src="images/st_ch2_s.png" width="164" height="235" />
</div>
<div style="width:380px; height:270px; position:absolute; top:592px; left:206px;">
<img src="images/st_ch2_m.png" width="380" height="270" />
</div>
<div class="swing-4i" style="width:105px; height:176px; position:absolute; top:500px; left:518px;">
<img src="images/st_ch3_s.png" width="105" height="176" />
</div>
<div style="width:240px; height:150px; position:absolute; top:498px; left:447px;">
<img src="images/st_ch3_m.png" width="240" height="190" />
</div>
<div class="swing-4i" style="width:35px; height:41px; position:absolute; top:447px; left:678px;">
<img src="images/st_ch4_s.png" width="35" height="41" />
</div>
<div style=" width:120px; height:60px; position:absolute; top:447px; left:643px;">
<img src="images/st_ch4_m.png" width="120" height="60" />
</div>
<div class="swing-4" style="width:82px; height:117px; position:absolute; top:317px; left:273px;">
<a href="#"><img src="images/st_ch1.png" width="82" height="117" /></a>
</div>
<div class="swing-4" style="width:164px; height:235px; position:absolute; top:368px; left:323px;">
<a href="#"><img src="images/st_ch2.png" width="164" height="235" /></a>
</div>
<div class="swing-4" style="width:164px; height:235px; position:absolute; top:324px; left:518px;">
<a href="#"><img src="images/st_ch3.png" width="105" height="176" /></a>
</div>
<div class="swing-4" style="width:164px; height:235px; position:absolute; top:407px; left:678px;">
<a href="#"><img src="images/st_ch4.png" width="35" height="41" /></a>
</div>
</li>
<li class="layer" data-depth="0.20">
<div style=" width:271px; height:427px; position:absolute; top:-10px; left:630px;"><img src="images/p5.png" width="271" height="427" /></div>
</li>
<li class="layer" data-depth="0.20">
<div style="width:270px; height:428px; position:absolute; top:-10px; left:0px;"><img src="images/p8.png" width="270" height="428" /></div>
</li>
<li class="layer" data-depth="0.40">
<div style="width:420px; height:314px; position:absolute; top:200px; left:720px;"><img src="images/p4.png" width="240" height="316" /></div>
</li>
<li class="layer" data-depth="0.40">
<div style="width:188px; height:314px; position:absolute; top:200px; left:0px;"><img src="images/p7.png" width="188" height="314" /></div>
</li>
<li class="layer" data-depth="0.50">
<div style="width:468px; height:164px; position:absolute; top:0px; left:235px;"><img src="images/p9.png" width="468" height="164" /></div>
<div class="swing-4" style="width:28px; height:53px; padding-top:53px; position:absolute; top:102px; left:456px;"><a href="#"><img src="images/ch4.png"></a></div>
</li>
<li class="layer" data-depth="0.60">
<div style="width:358px; height:416px; position:absolute; top:-183px; left:500px;"><img src="images/p3.png" width="358" height="416" /></div>
<div class="swing-4" style="width:31px; height:57px; padding-top:57px; position:absolute; top:152px; left:684px;"><a href="#"><img src="images/ch5.png"></a></div>
<div class="swing-6i" style="width:65px; height:80px; padding-top:80px; position:absolute; top:20px; left:740px;"><a href="#"><img src="images/ch3.png"></a></div>
</li>
<li class="layer" data-depth="0.60">
<div style="width:357px; height:416px; position:absolute; top:-180px; left:30px;"><img src="images/p6.png" width="357" height="416" /></div>
<div class="swing-4" style="width:34px; height:45px; padding-top:45px; position:absolute; top:180px; left:160px;"><a href="#"><img src="images/ch6.png"></a></div>
<div class="swing-6" style="width:64px; height:61px; padding-top:61px; position:absolute; top:19px; left:120px;"><a href="#"><img src="images/ch2.png"></a></div>
</li>
<li class="layer" data-depth="0.80">
<div style="width:205px; height:266px; position:absolute; top:-180px; left:405px;"><img src="images/p2.png" width="205" height="266" /></div>
<div class="swing-6" style="width:41px; height:78px; padding-top:78px; position:absolute; top:-108px; left:640px;"><a href="#"><img src="images/ch1.png"></a></div>
</li>
<li class="layer" data-depth="0.90">
<div style="width:242px; height:311px; position:absolute; top:-180px; left:230px;"><img src="images/p1.png" width="242" height="311" /></div>
<div class="swing-2" style="width:33px; height:229px; padding-top:229px; position:absolute; top:-409px; left:210px;"><a href="#"><img src="images/ch7.png"></a></div>
</li>
<li class="layer" data-depth="1.0">
<div class="swing-2" style="width:43px; height:447px; padding-top:447px; position:absolute; top:-627px; left:518px;"><a href="#"><img src="images/ch8.png"></a></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.parallax.js"></script>
<script type="text/javascript">
$('#scene').parallax();
</script>
</body>
</html>
JS代码(jquery.parallax.js):
//============================================================//// The MIT License//// Copyright (C) 2013 Matthew Wagerfield - @mwagerfield//// Permission is hereby granted,free of charge,to any// person obtaining a copy of this software and associated// documentation files (the "Software"),to deal in the// Software without restriction,including without limitation// the rights to use,copy,modify,merge,publish,distribute,// sublicense,and/or sell copies of the Software,and to// permit persons to whom the Software is furnished to do// so,subject to the following conditions://// The above copyright notice and this permission notice// shall be included in all copies or substantial portions// of the Software.//// THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY// OF ANY KIND,EXPRESS OR IMPLIED,INCLUDING BUT NOT// LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO// EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE// FOR ANY CLAIM,DAMAGES OR OTHER LIABILITY,WHETHER IN// AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE// OR OTHER DEALINGS IN THE SOFTWARE.////============================================================/** * jQuery/Zepto Parallax Plugin * @author Matthew Wagerfield - @mwagerfield * @description Creates a parallax effect between an array of layers,* driving the motion from the gyroscope output of a smartdevice. * If no gyroscope is available,the cursor position is used. */
;
(function($,window,document,undefined){
var NAME = 'parallax';
var MAGIC_NUMBER = 30;
var DEFAULTS ={
calibrationThreshold:100,calibrationDelay:500,supportDelay:500,calibrateX:false,calibrateY:true,invertX:true,invertY:true,limitX:false,limitY:false,scalarX:10.0,scalarY:7000.0,frictionX:0.1,frictionY:0.1}
;
function Plugin(element,options){
// DOM Context this.element = element;
// Selections this.$context = $(element).data('api',this);
this.$layers = this.$context.find('.layer');
// Data Extraction var data ={
calibrateX:this.$context.data('calibrate-x') || null,calibrateY:this.$context.data('calibrate-y') || null,invertX:this.$context.data('invert-x') || null,invertY:this.$context.data('invert-y') || null,limitX:parseFloat(this.$context.data('limit-x')) || null,limitY:parseFloat(this.$context.data('limit-y')) || null,scalarX:parseFloat(this.$context.data('scalar-x')) || null,scalarY:parseFloat(this.$context.data('scalar-y')) || null,frictionX:parseFloat(this.$context.data('friction-x')) || null,frictionY:parseFloat(this.$context.data('friction-y')) || null}
;
// Delete Null Data Values for (var key in data){
if (data[key] === null) delete data[key];
}
// Compose Settings Object $.extend(this,DEFAULTS,options,data);
// States this.calibrationTimer = null;
this.calibrationFlag = true;
this.enabled = false;
this.depths = [];
this.raf = null;
// Offset this.ox = 0;
this.oy = 0;
this.ow = 0;
this.oh = 0;
// Calibration this.cx = 0;
this.cy = 0;
// Input this.ix = 0;
this.iy = 0;
// Motion this.mx = 0;
this.my = 0;
// Velocity this.vx = 0;
this.vy = 0;
// Callbacks this.onMouseMove = this.onMouseMove.bind(this);
this.onDeviceOrientation = this.onDeviceOrientation.bind(this);
this.onOrientationTimer = this.onOrientationTimer.bind(this);
this.onCalibrationTimer = this.onCalibrationTimer.bind(this);
this.onAnimationFrame = this.onAnimationFrame.bind(this);
this.onWindowResize = this.onWindowResize.bind(this);
// Initialise this.initialise();
}
Plugin.prototype.transformSupport = function(value){
var element = document.createElement('div');
var propertySupport = false;
var propertyValue = null;
var featureSupport = false;
var cssProperty = null;
var jsProperty = null;
for (var i = 0,l = this.vendors.length;
i < l;
i++){
if (this.vendors[i] !== null){
cssProperty = this.vendors[i][0] + 'transform';
jsProperty = this.vendors[i][1] + 'Transform';
}
else{
cssProperty = 'transform';
jsProperty = 'transform';
}
if (element.style[jsProperty] !== undefined){
propertySupport = true;
break;
}
}
switch(value){
case '2D':featureSupport = propertySupport;
break;
case '3D':if (propertySupport){
document.body.appendChild(element);
element.style[jsProperty] = 'translate3d(1px,1px,1px)';
propertyValue = window.getComputedStyle(element).getPropertyValue(cssProperty);
featureSupport = propertyValue !== undefined && propertyValue.length > 0 && propertyValue !== "none";
document.body.removeChild(element);
}
break;
}
return featureSupport;
}
;
Plugin.prototype.ww = null;
Plugin.prototype.wh = null;
Plugin.prototype.hw = null;
Plugin.prototype.hh = null;
Plugin.prototype.portrait = null;
Plugin.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
Plugin.prototype.vendors = [null,['-webkit-','webkit'],['-moz-','Moz'],['-o-','O'],['-ms-','ms']];
Plugin.prototype.motionSupport = !!window.DeviceMotionEvent;
Plugin.prototype.orientationSupport = !!window.DeviceOrientationEvent;
Plugin.prototype.orientationStatus = 0;
Plugin.prototype.transform2DSupport = Plugin.prototype.transformSupport('2D');
Plugin.prototype.transform3DSupport = Plugin.prototype.transformSupport('3D');
Plugin.prototype.initialise = function(){
// Configure Styles if (this.$context.css('position') === 'static'){
this.$context.css({
position:'relative'}
);
}
this.$layers.css({
position:'absolute',height:'1px',width:'100%',left:0,top:0}
);
this.$layers.first().css({
position:'relative'}
);
// Cache Depths this.$layers.each($.proxy(function(index,element){
this.depths.push($(element).data('depth') || 0);
}
,this));
// Hardware Accelerate Elements this.accelerate(this.$context);
this.accelerate(this.$layers);
// Setup this.updateDimensions();
this.enable();
this.queueCalibration(this.calibrationDelay);
}
;
Plugin.prototype.updateDimensions = function(){
// Cache Context Dimensions this.ox = this.$context.offset().left;
this.oy = this.$context.offset().top;
this.ow = this.$context.width();
this.oh = this.$context.height();
// Cache Window Dimensions this.ww = window.innerWidth;
this.wh = window.innerHeight;
this.hw = this.ww / 2;
this.hh = this.wh / 2;
}
;
Plugin.prototype.queueCalibration = function(delay){
clearTimeout(this.calibrationTimer);
this.calibrationTimer = setTimeout(this.onCalibrationTimer,delay);
}
;
Plugin.prototype.enable = function(){
if (!this.enabled){
this.enabled = true;
if (this.orientationSupport){
this.portrait = null;
window.addEventListener('deviceorientation',this.onDeviceOrientation);
setTimeout(this.onOrientationTimer,this.supportDelay);
}
else{
this.cx = 0;
this.cy = 0;
this.portrait = false;
window.addEventListener('mousemove',this.onMouseMove);
}
window.addEventListener('resize',this.onWindowResize);
this.raf = requestAnimationFrame(this.onAnimationFrame);
}
}
;
Plugin.prototype.disable = function(){
if (this.enabled){
this.enabled = false;
if (this.orientationSupport){
window.removeEventListener('deviceorientation',this.onDeviceOrientation);
}
else{
window.removeEventListener('mousemove',this.onMouseMove);
}
window.removeEventListener('resize',this.onWindowResize);
cancelAnimationFrame(this.raf);
}
}
;
Plugin.prototype.calibrate = function(x,y){
this.calibrateX = x === undefined ? this.calibrateX:x;
this.calibrateY = y === undefined ? this.calibrateY:y;
}
;
Plugin.prototype.invert = function(x,y){
this.invertX = x === undefined ? this.invertX:x;
this.invertY = y === undefined ? this.invertY:y;
}
;
Plugin.prototype.friction = function(x,y){
this.frictionX = x === undefined ? this.frictionX:x;
this.frictionY = y === undefined ? this.frictionY:y;
}
;
Plugin.prototype.scalar = function(x,y){
this.scalarX = x === undefined ? this.scalarX:x;
this.scalarY = y === undefined ? this.scalarY:y;
}
;
Plugin.prototype.limit = function(x,y){
this.limitX = x === undefined ? this.limitX:x;
this.limitY = y === undefined ? this.limitY:y;
}
;
Plugin.prototype.clamp = function(value,min,max){
value = Math.max(value,min);
value = Math.min(value,max);
return value;
}
;
Plugin.prototype.css = function(element,property,value){
var jsProperty = null;
for (var i = 0,l = this.vendors.length;
i < l;
i++){
if (this.vendors[i] !== null){
jsProperty = $.camelCase(this.vendors[i][1] + '-' + property);
}
else{
jsProperty = property;
}
if (element.style[jsProperty] !== undefined){
element.style[jsProperty] = value;
break;
}
}
}
;
Plugin.prototype.accelerate = function($element){
for (var i = 0,l = $element.length;
i < l;
i++){
var element = $element[i];
this.css(element,'transform','translate3d(0,0,0)');
this.css(element,'transform-style','preserve-3d');
this.css(element,'backface-visibility','hidden');
}
}
;
Plugin.prototype.setPosition = function(element,x,y){
x += '%';
y += '%';
if (this.transform3DSupport){
this.css(element,'transform','translate3d('+x+','+y+',0)');
}
else if (this.transform2DSupport){
this.css(element,'transform','translate('+x+','+y+')');
}
else{
element.style.left = x;
element.style.top = y;
}
}
;
Plugin.prototype.onOrientationTimer = function(event){
if (this.orientationSupport && this.orientationStatus === 0){
this.disable();
this.orientationSupport = false;
this.enable();
}
}
;
Plugin.prototype.onCalibrationTimer = function(event){
this.calibrationFlag = true;
}
;
Plugin.prototype.onWindowResize = function(event){
this.updateDimensions();
}
;
Plugin.prototype.onAnimationFrame = function(){
var dx = this.ix - this.cx;
var dy = this.iy - this.cy;
if ((Math.abs(dx) > this.calibrationThreshold) || (Math.abs(dy) > this.calibrationThreshold)){
this.queueCalibration(0);
}
if (this.portrait){
this.mx = (this.calibrateX ? dy:this.iy) * this.scalarX;
this.my = (this.calibrateY ? dx:this.ix) * this.scalarY;
}
else{
this.mx = (this.calibrateX ? dx:this.ix) * this.scalarX;
this.my = (this.calibrateY ? dy:this.iy) * this.scalarY;
}
if (!isNaN(parseFloat(this.limitX))){
this.mx = this.clamp(this.mx,-this.limitX,this.limitX);
}
if (!isNaN(parseFloat(this.limitY))){
this.my = this.clamp(this.my,-this.limitY,this.limitY);
}
this.vx += (this.mx - this.vx) * this.frictionX;
this.vy += (this.my - this.vy) * this.frictionY;
for (var i = 0,l = this.$layers.length;
i < l;
i++){
var depth = this.depths[i];
var layer = this.$layers[i];
var xOffset = this.vx * depth * (this.invertX ? -1:1);
var yOffset = this.vy * depth * (this.invertY ? -1:1);
this.setPosition(layer,xOffset,yOffset);
}
this.raf = requestAnimationFrame(this.onAnimationFrame);
}
;
Plugin.prototype.onDeviceOrientation = function(event){
// Validate environment and event properties. if (!this.desktop && event.beta !== null && event.gamma !== null){
// Set orientation status. this.orientationStatus = 1;
// Extract Rotation var x = (event.beta || 0) / MAGIC_NUMBER;
// -90::90 var y = (event.gamma || 0) / MAGIC_NUMBER;
// -180::180 // Detect Orientation Change var portrait = window.innerHeight > window.innerWidth;
if (this.portrait !== portrait){
this.portrait = portrait;
this.calibrationFlag = true;
}
// Set Calibration if (this.calibrationFlag){
this.calibrationFlag = false;
this.cx = x;
this.cy = y;
}
// Set Input this.ix = x;
this.iy = y;
}
}
;
Plugin.prototype.onMouseMove = function(event){
// Calculate Input this.ix = (event.pageX - this.hw) / this.hw;
this.iy = (event.pageY - this.hh) / this.hh;
}
;
var API ={
enable:Plugin.prototype.enable,disable:Plugin.prototype.disable,calibrate:Plugin.prototype.calibrate,friction:Plugin.prototype.friction,invert:Plugin.prototype.invert,scalar:Plugin.prototype.scalar,limit:Plugin.prototype.limit}
;
$.fn[NAME] = function (value){
var args = arguments;
return this.each(function (){
var $this = $(this);
var plugin = $this.data(NAME);
if (!plugin){
plugin = new Plugin(this,value);
$this.data(NAME,plugin);
}
if (API[value]){
plugin[value].apply(plugin,Array.prototype.slice.call(args,1));
}
}
);
}
;
}
)(window.jQuery || window.Zepto,window,document);
/** * Request Animation Frame Polyfill. * @author Tino Zijdel * @author Paul Irish * @see https://gist.github.com/paulirish/1579671 */
;
(function(){
var lastTime = 0;
var vendors = ['ms','moz','webkit','o'];
for(var x = 0;
x < vendors.length && !window.requestAnimationFrame;
++x){
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame){
window.requestAnimationFrame = function(callback,element){
var currTime = new Date().getTime();
var timeToCall = Math.max(0,16 - (currTime - lastTime));
var id = window.setTimeout(function(){
callback(currTime + timeToCall);
}
,timeToCall);
lastTime = currTime + timeToCall;
return id;
}
;
}
if (!window.cancelAnimationFrame){
window.cancelAnimationFrame = function(id){
clearTimeout(id);
}
;
}
}
());
分享到QQ
分享到微博
微信扫一扫
