(function($){ var methods = { init : function( options ) { var settings = { bufferRatio: 1.5 , invert: true } return this.each(function(){ if ( options ){ $.extend(settings, options); } var $this = $(this) , windowSelector = $(window) , documentSelector = $(document) , thisHeight = 0 , innerHolderObj , mediaHolderObj , infoObj , imageObj , innerHolderHeight , thisOffsetTop , heightBuffer = 0 , check_mp4 , check_webm , check_ogv , check_poster , check_none_format , check_all_format , statusDevice = "desktop" , typeMedia = "video" , msie8 = Boolean(navigator.userAgent.match(/MSIE ([8]+)\./)) , checkBrowser , bufferRatio = parseFloat(settings.bufferRatio) ; _constructor(); function _constructor(){ innerHolderObj = $('.parallax_inner', $this); mediaHolderObj = $('.parallax_media', $this); typeMedia = $this.data("type-media"); checkBrowser = checkBrowser(); check_mp4 = $this.data("mp4"); check_webm = $this.data("webm"); check_ogv = $this.data("ogv"); check_poster = $this.data("poster"); (!check_mp4 && !check_webm && !check_ogv)? check_none_format = false : check_none_format = true; (check_mp4 && check_webm && check_ogv)? check_all_format = true : check_all_format = false; if (device.mobile() || device.tablet() || msie8 || checkBrowser == 'Safari') { statusDevice = "mobile"; posterUrl = mediaHolderObj.attr('poster'); innerHolderObj.css({"background-image": "url("+posterUrl+")" }); $this.addClass('mobileState'); mediaHolderObj.remove(); } if (typeMedia == "video"){ sourcesCheckInfo(); } addEventsFunction(); } function addEventsFunction(){ //------------------ window scroll event -------------// windowSelector.on('scroll', function(){ if(statusDevice=="desktop"){ mainScrollFunction(); } } ).trigger('scroll'); //------------------ window resize event -------------// windowSelector.on("resize", function(){ $this.width(windowSelector.width()); $this.css({'width' : windowSelector.width(), 'margin-left' : Math.floor(windowSelector.width()*-0.5), 'left' : '50%'}); if(statusDevice=="desktop"){ mainResizeFunction(); } } ).trigger('resize'); } //------------------ window scroll function -------------// function mainScrollFunction(){ parallaxEffect(); } //------------------ window resize function -------------// function mainResizeFunction(){ parallaxEffect(); if (typeMedia == "image"){ objectResize($('.parallax_media', innerHolderObj), innerHolderObj, "fill"); }else{ videoResize($('.parallax_media', innerHolderObj), innerHolderObj); } } function parallaxEffect(){ var documentScrollTop , startScrollTop , endScrollTop , visibleScrollValue ; thisHeight = $this.outerHeight(); windowHeight = windowSelector.height(); thisOffsetTop = $this.offset().top; documentScrollTop = documentSelector.scrollTop(); innerHolderHeight = thisHeight*bufferRatio; heightBuffer = innerHolderHeight-thisHeight; startScrollTop = documentScrollTop + windowHeight; endScrollTop = documentScrollTop - thisHeight; visibleScrollValue = startScrollTop - endScrollTop; if( ( startScrollTop > thisOffsetTop ) && ( endScrollTop < thisOffsetTop ) ){ pixelScrolled = documentScrollTop - (thisOffsetTop - windowHeight); percentScrolled = pixelScrolled / visibleScrollValue; thisHidenScrollVal = thisOffsetTop - documentScrollTop; deltaTopScrollVal = heightBuffer * percentScrolled; if(settings.invert){ _x = - heightBuffer + (deltaTopScrollVal); _height = thisHeight*bufferRatio; innerHolderObj.css({"top": _x, "height": _height}); }else{ _x = - deltaTopScrollVal; _height = thisHeight*bufferRatio; innerHolderObj.css({"top": _x, "height": _height}); } } } //-------------------------------- objectResize --------------------------------------// //objectResize($('> img', primaryImageHolder), mainImageHolder, "fill"); function objectResize(obj, container, type){ var prevImgWidth = 0 , prevImgHeight = 0 , imageRatio , newImgWidth , newImgHeight , newImgTop , newImgLeft , alignIMG = 'center' ; prevImgWidth = parseInt(obj.data('base-width')); prevImgHeight = parseInt(obj.data('base-height')); imageRatio = prevImgHeight/prevImgWidth; containerRatio = container.height()/container.width(); switch(type){ case 'fill': if(containerRatio > imageRatio){ newImgHeight = container.height(); newImgWidth = Math.round( (newImgHeight*prevImgWidth) / prevImgHeight ); }else{ newImgWidth = container.width(); newImgHeight = Math.round( (newImgWidth*prevImgHeight) / prevImgWidth ); } obj.css({width: newImgWidth, height: newImgHeight}); screenWidth = container.width(); screenHeight = container.height(); imgWidth = obj.width(); imgHeight = obj.height(); switch(alignIMG){ case "top": newImgLeft=-(imgWidth-screenWidth)*.5; newImgTop=0; break; case "bottom": newImgLeft=-(imgWidth-screenWidth)*.5; newImgTop=-(imgHeight-screenHeight); break; case "right": newImgLeft=-(imgWidth-screenWidth); newImgTop=-(imgHeight-screenHeight)*.5; break; case "left": newImgLeft=0; newImgTop=-(imgHeight-screenHeight)*.5; break; case "top_left": newImgLeft=0; newImgTop=0; break; case "top_right": newImgLeft=-(imgWidth-screenWidth); newImgTop=0; break; case "bottom_right": newImgLeft=-(imgWidth-screenWidth); newImgTop=-(imgHeight-screenHeight); break; case "bottom_left": newImgLeft=0; newImgTop=-(imgHeight-screenHeight); break; default: newImgLeft=-(imgWidth-screenWidth)*.5; newImgTop= -(imgHeight-screenHeight)*.5; } break case 'fit': if(containerRatio > imageRatio){ newImgWidth = container.width(); newImgHeight = (prevImgHeight*container.width())/prevImgWidth; newImgTop = container.height()/2 - newImgHeight/2; newImgLeft = 0; }else{ newImgWidth = (prevImgWidth*container.height())/prevImgHeight; newImgHeight = container.height(); newImgTop = 0; newImgLeft = container.width()/2 - newImgWidth/2; } obj.css({width: newImgWidth, height: newImgHeight}); break } obj.css({top: newImgTop, left: newImgLeft}); } function videoResize(obj, container){ var prevImgWidth = 0 , prevImgHeight = 0 , imageRatio , newImgWidth , newImgHeight ; prevImgWidth = parseInt(obj.data('base-width')); prevImgHeight = parseInt(obj.data('base-height')); imageRatio = prevImgHeight/prevImgWidth; containerRatio = container.height()/container.width(); if(containerRatio > imageRatio){ newImgHeight = container.height(); newImgWidth = "auto"; }else{ newImgWidth = container.width(); newImgHeight = "auto"; } obj.css({width: newImgWidth, height: newImgHeight}); imgHeight = obj.height(); newImgTop = -(imgHeight-container.height())*.5; obj.css({top: newImgTop}); } /*----------------------- sourcesCheckInfo --------------------------------------------------------*/ function sourcesCheckInfo(){ var infostring = "" , formatCounter = 0 , posterUrl ; $this.append("