@ -1,358 +1,94 @@
/ * ! //
* parallax . js v1 . 3.1 ( http : //pixelcog.github.io/parallax.js/)
// parralax.js
* @ copyright 2015 PixelCog , Inc .
//
* @ license MIT ( https : //github.com/pixelcog/parallax.js/blob/master/LICENSE)
// Author:
* /
// Paul Schneider <paul@pschneider.fr>
//
; ( function ( $ , window , document , undefined ) { // Copyright (c) 2015 GNU GPL
//
// Polyfill for requestAnimationFrame
// This program is free software: you can redistribute it and/or modify
// via: https://gist.github.com/paulirish/1579671
// it under the terms of the GNU Lesser General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
( function ( ) {
// (at your option) any later version.
var lastTime = 0 ;
//
var vendors = [ 'ms' , 'moz' , 'webkit' , 'o' ] ;
// This program is distributed in the hope that it will be useful,
for ( var x = 0 ; x < vendors . length && ! window . requestAnimationFrame ; ++ x ) {
// but WITHOUT ANY WARRANTY; without even the implied warranty of
window . requestAnimationFrame = window [ vendors [ x ] + 'RequestAnimationFrame' ] ;
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
window . cancelAnimationFrame = window [ vendors [ x ] + 'CancelAnimationFrame' ]
// GNU Lesser General Public License for more details.
|| window [ vendors [ x ] + 'CancelRequestAnimationFrame' ] ;
//
}
// You should have received a copy of the GNU Lesser General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
if ( ! window . requestAnimationFrame )
window . requestAnimationFrame = function ( callback ) {
var currTime = new Date ( ) . getTime ( ) ;
$ ( document ) . ready ( function ( ) {
var timeToCall = Math . max ( 0 , 16 - ( currTime - lastTime ) ) ;
var $window = $ ( window ) ;
var id = window . setTimeout ( function ( ) { callback ( currTime + timeToCall ) ; } ,
var onPos = function ( bgobj , dx , dy ) {
timeToCall ) ;
x = $window . scrollLeft ( ) + dx ;
lastTime = currTime + timeToCall ;
y = $window . scrollTop ( ) + dy ;
return id ;
} ;
var speed = bgobj . data ( 'speed' ) ;
var xPos = bgobj . attr ( 'orgbgpx' ) - Math . round ( x / speed ) ;
if ( ! window . cancelAnimationFrame )
var yPos = bgobj . attr ( 'orgbgpy' ) - Math . round ( y / speed ) ;
window . cancelAnimationFrame = function ( id ) {
// Put together our final background position
clearTimeout ( id ) ;
var coords = '' + xPos + bgobj . attr ( 'orgbgpxu' ) + yPos + bgobj . attr ( 'orgbgpyu' ) ;
// Move the background
bgobj . css ( { backgroundPosition : coords } ) ;
} ;
} ;
} ( ) ) ;
var tiltLR = 0 ;
var titleFB = 0 ;
// Parallax Constructor
function Parallax ( element , options ) {
var self = this ;
if ( typeof options == 'object' ) {
delete options . refresh ;
delete options . render ;
$ . extend ( this , options ) ;
}
this . $element = $ ( element ) ;
$ ( '[data-type="background"]' ) . each ( function ( ) {
var $bgobj = $ ( this ) ; // assigning the object
// get the initial background position, assumes a "X% Yem" ?
var orgpos = $bgobj . css ( 'backgroundPosition' ) ;
var bgpos = orgpos . split ( " " ) ;
if ( ! this . imageSrc && this . $element . is ( 'img' ) ) {
var bgposx = bgpos [ 0 ] ;
this . imageSrc = this . $element . attr ( 'src' ) ;
var bgposy = bgpos [ 1 ] ;
if ( /%$/ . test ( bgposx ) ) {
bgposx = bgposx . substr ( 0 , bgposx . length - 1 ) ;
$bgobj . attr ( 'orgbgpxu' , '% ' ) ;
}
}
else if ( /em$/ . test ( bgposx ) ) {
var positions = ( this . position + '' ) . toLowerCase ( ) . match ( /\S+/g ) || [ ] ;
bgposx = bgposx . substr ( 0 , bgposx . length - 2 ) ;
$bgobj . attr ( 'orgbgpxu' , 'em ' ) ;
if ( positions . length < 1 ) {
positions . push ( 'center' ) ;
}
if ( positions . length == 1 ) {
positions . push ( positions [ 0 ] ) ;
}
if ( positions [ 0 ] == 'top' || positions [ 0 ] == 'bottom' || positions [ 1 ] == 'left' || positions [ 1 ] == 'right' ) {
positions = [ positions [ 1 ] , positions [ 0 ] ] ;
}
if ( this . positionX != undefined ) positions [ 0 ] = this . positionX . toLowerCase ( ) ;
if ( this . positionY != undefined ) positions [ 1 ] = this . positionY . toLowerCase ( ) ;
self . positionX = positions [ 0 ] ;
self . positionY = positions [ 1 ] ;
if ( this . positionX != 'left' && this . positionX != 'right' ) {
if ( isNaN ( parseInt ( this . positionX ) ) ) {
this . positionX = 'center' ;
} else {
this . positionX = parseInt ( this . positionX ) ;
}
}
if ( this . positionY != 'top' && this . positionY != 'bottom' ) {
if ( isNaN ( parseInt ( this . positionY ) ) ) {
this . positionY = 'center' ;
} else {
this . positionY = parseInt ( this . positionY ) ;
}
}
else if ( /px$/ . test ( bgposx ) ) {
bgposx = bgposx . substr ( 0 , bgposx . length - 2 ) ;
$bgobj . attr ( 'orgbgpxu' , 'px ' ) ;
}
}
else { $bgobj . attr ( 'orgbgpxu' , 'px ' ) ; }
this . position =
if ( /%$/ . test ( bgposy ) ) {
this . positionX + ( isNaN ( this . positionX ) ? '' : 'px' ) + ' ' +
bgposy = bgposy . substr ( 0 , bgposy . length - 1 ) ;
this . positionY + ( isNaN ( this . positionY ) ? '' : 'px' ) ;
$bgobj . attr ( 'orgbgpyu' , '% ' ) ;
if ( navigator . userAgent . match ( /(iPod|iPhone|iPad)/ ) ) {
if ( this . iosFix && ! this . $element . is ( 'img' ) ) {
this . $element . css ( {
backgroundImage : 'url(' + this . imageSrc + ')' ,
backgroundSize : 'cover' ,
backgroundPosition : this . position
} ) ;
}
return this ;
}
if ( navigator . userAgent . match ( /(Android)/ ) ) {
if ( this . androidFix && ! this . $element . is ( 'img' ) ) {
this . $element . css ( {
backgroundImage : 'url(' + this . imageSrc + ')' ,
backgroundSize : 'cover' ,
backgroundPosition : this . position
} ) ;
}
return this ;
}
this . $mirror = $ ( '<div />' ) . prependTo ( 'body' ) ;
this . $slider = $ ( '<img />' ) . prependTo ( this . $mirror ) ;
this . $mirror . addClass ( 'parallax-mirror' ) . css ( {
visibility : 'hidden' ,
zIndex : this . zIndex ,
position : 'fixed' ,
top : 0 ,
left : 0 ,
overflow : 'hidden'
} ) ;
this . $slider . addClass ( 'parallax-slider' ) . one ( 'load' , function ( ) {
if ( ! self . naturalHeight || ! self . naturalWidth ) {
self . naturalHeight = this . naturalHeight || this . height || 1 ;
self . naturalWidth = this . naturalWidth || this . width || 1 ;
}
self . aspectRatio = self . naturalWidth / self . naturalHeight ;
Parallax . isSetup || Parallax . setup ( ) ;
Parallax . sliders . push ( self ) ;
Parallax . isFresh = false ;
Parallax . requestRender ( ) ;
} ) ;
this . $slider [ 0 ] . src = this . imageSrc ;
if ( this . naturalHeight && this . naturalWidth || this . $slider [ 0 ] . complete ) {
this . $slider . trigger ( 'load' ) ;
}
} ;
// Parallax Instance Methods
$ . extend ( Parallax . prototype , {
speed : 0.2 ,
bleed : 0 ,
zIndex : - 100 ,
iosFix : true ,
androidFix : true ,
position : 'center' ,
overScrollFix : false ,
refresh : function ( ) {
this . boxWidth = this . $element . outerWidth ( ) ;
this . boxHeight = this . $element . outerHeight ( ) + this . bleed * 2 ;
this . boxOffsetTop = this . $element . offset ( ) . top - this . bleed ;
this . boxOffsetLeft = this . $element . offset ( ) . left ;
this . boxOffsetBottom = this . boxOffsetTop + this . boxHeight ;
var winHeight = Parallax . winHeight ;
var docHeight = Parallax . docHeight ;
var maxOffset = Math . min ( this . boxOffsetTop , docHeight - winHeight ) ;
var minOffset = Math . max ( this . boxOffsetTop + this . boxHeight - winHeight , 0 ) ;
var imageHeightMin = this . boxHeight + ( maxOffset - minOffset ) * ( 1 - this . speed ) | 0 ;
var imageOffsetMin = ( this . boxOffsetTop - maxOffset ) * ( 1 - this . speed ) | 0 ;
if ( imageHeightMin * this . aspectRatio >= this . boxWidth ) {
this . imageWidth = imageHeightMin * this . aspectRatio | 0 ;
this . imageHeight = imageHeightMin ;
this . offsetBaseTop = imageOffsetMin ;
var margin = this . imageWidth - this . boxWidth ;
if ( this . positionX == 'left' ) {
this . offsetLeft = 0 ;
} else if ( this . positionX == 'right' ) {
this . offsetLeft = - margin ;
} else if ( ! isNaN ( this . positionX ) ) {
this . offsetLeft = Math . max ( this . positionX , - margin ) ;
} else {
this . offsetLeft = - margin / 2 | 0 ;
}
} else {
this . imageWidth = this . boxWidth ;
this . imageHeight = this . boxWidth / this . aspectRatio | 0 ;
this . offsetLeft = 0 ;
var margin = this . imageHeight - imageHeightMin ;
if ( this . positionY == 'top' ) {
this . offsetBaseTop = imageOffsetMin ;
} else if ( this . positionY == 'bottom' ) {
this . offsetBaseTop = imageOffsetMin - margin ;
} else if ( ! isNaN ( this . positionY ) ) {
this . offsetBaseTop = imageOffsetMin + Math . max ( this . positionY , - margin ) ;
} else {
this . offsetBaseTop = imageOffsetMin - margin / 2 | 0 ;
}
}
else if ( /em$/ . test ( bgposy ) ) {
bgposy = bgposy . substr ( 0 , bgposy . length - 2 ) ;
$bgobj . attr ( 'orgbgpyu' , 'em ' ) ;
}
}
} ,
else if ( /px$/ . test ( bgposy ) ) {
bgposy = bgposy . substr ( 0 , bgposy . length - 2 ) ;
render : function ( ) {
$bgobj . attr ( 'orgbgpyu' , 'px ' ) ;
var scrollTop = Parallax . scrollTop ;
var scrollLeft = Parallax . scrollLeft ;
var overScroll = this . overScrollFix ? Parallax . overScroll : 0 ;
var scrollBottom = scrollTop + Parallax . winHeight ;
if ( this . boxOffsetBottom > scrollTop && this . boxOffsetTop < scrollBottom ) {
this . visibility = 'visible' ;
} else {
this . visibility = 'hidden' ;
}
}
this . mirrorTop = this . boxOffsetTop - scrollTop ; else { $bgobj . attr ( 'orgbgpyu' , 'px ' ) ; }
this . mirrorLeft = this . boxOffsetLeft - scrollLeft ; $bgobj . attr ( 'orgbgpx' , parseInt ( bgposx ) ) ;
this . offsetTop = this . offsetBaseTop - this . mirrorTop * ( 1 - this . speed ) ; $bgobj . attr ( 'orgbgpy' , parseInt ( bgposy ) ) ;
this . $mirror . css ( {
$ ( window ) . scroll ( function ( ) {
transform : 'translate3d(0px, 0px, 0px)' ,
onPos ( $bgobj , tiltLR , titleFB ) ;
visibility : this . visibility ,
top : this . mirrorTop - overScroll ,
left : this . mirrorLeft ,
height : this . boxHeight ,
width : this . boxWidth
} ) ;
} ) ;
if ( window . DeviceOrientationEvent ) {
this . $slider . css ( {
window . addEventListener ( 'deviceorientation' , function ( event ) {
transform : 'translate3d(0px, 0px, 0px)' ,
tiltLR = event . gamma ;
position : 'absolute' ,
titleFB = event . beta ;
top : this . offsetTop ,
onPos ( $bgobj , tiltLR , titleFB ) ;
left : this . offsetLeft ,
} , false ) ;
height : this . imageHeight ,
$ ( window ) . mousemove ( function ( e ) {
width : this . imageWidth ,
tiltLR = e . pageX ;
maxWidth : 'none'
titleFB = e . pageY ;
onPos ( $bgobj , tiltLR , titleFB ) ;
} ) ;
} ) ;
}
}
} ) ;
} ) ;
// Parallax Static Methods
$ . extend ( Parallax , {
scrollTop : 0 ,
scrollLeft : 0 ,
winHeight : 0 ,
winWidth : 0 ,
docHeight : 1 << 30 ,
docWidth : 1 << 30 ,
sliders : [ ] ,
isReady : false ,
isFresh : false ,
isBusy : false ,
setup : function ( ) {
if ( this . isReady ) return ;
var $doc = $ ( document ) , $win = $ ( window ) ;
$win . on ( 'scroll.px.parallax load.px.parallax' , function ( ) {
var scrollTopMax = Parallax . docHeight - Parallax . winHeight ;
var scrollLeftMax = Parallax . docWidth - Parallax . winWidth ;
Parallax . scrollTop = Math . max ( 0 , Math . min ( scrollTopMax , $win . scrollTop ( ) ) ) ;
Parallax . scrollLeft = Math . max ( 0 , Math . min ( scrollLeftMax , $win . scrollLeft ( ) ) ) ;
Parallax . overScroll = Math . max ( $win . scrollTop ( ) - scrollTopMax , Math . min ( $win . scrollTop ( ) , 0 ) ) ;
Parallax . requestRender ( ) ;
} )
. on ( 'resize.px.parallax load.px.parallax' , function ( ) {
Parallax . winHeight = $win . height ( ) ;
Parallax . winWidth = $win . width ( ) ;
Parallax . docHeight = $doc . height ( ) ;
Parallax . docWidth = $doc . width ( ) ;
Parallax . isFresh = false ;
Parallax . requestRender ( ) ;
} ) ; } ) ;
this . isReady = true ;
} ,
configure : function ( options ) {
if ( typeof options == 'object' ) {
delete options . refresh ;
delete options . render ;
$ . extend ( this . prototype , options ) ;
}
} ,
refresh : function ( ) {
$ . each ( this . sliders , function ( ) { this . refresh ( ) } ) ;
this . isFresh = true ;
} ,
render : function ( ) {
this . isFresh || this . refresh ( ) ;
$ . each ( this . sliders , function ( ) { this . render ( ) } ) ;
} ,
requestRender : function ( ) {
var self = this ;
if ( ! this . isBusy ) {
this . isBusy = true ;
window . requestAnimationFrame ( function ( ) {
self . render ( ) ;
self . isBusy = false ;
} ) ;
}
}
} ) ;
// Parallax Plugin Definition
function Plugin ( option ) {
return this . each ( function ( ) {
var $this = $ ( this ) ;
var options = typeof option == 'object' && option ;
if ( this == window || this == document || $this . is ( 'body' ) ) {
Parallax . configure ( options ) ;
}
else if ( ! $this . data ( 'px.parallax' ) ) {
options = $ . extend ( { } , $this . data ( ) , options ) ;
$this . data ( 'px.parallax' , new Parallax ( this , options ) ) ;
}
if ( typeof option == 'string' ) {
Parallax [ option ] ( ) ;
}
} )
} ;
var old = $ . fn . parallax ;
$ . fn . parallax = Plugin ;
$ . fn . parallax . Constructor = Parallax ;
// Parallax No Conflict
$ . fn . parallax . noConflict = function ( ) {
$ . fn . parallax = old ;
return this ;
} ;
// Parallax Data-API
$ ( document ) . on ( 'ready.px.parallax.data-api' , function ( ) {
$ ( '[data-parallax="scroll"]' ) . parallax ( ) ;
} ) ;
} ( jQuery , window , document ) ) ;
