Created
January 7, 2018 11:58
-
-
Save roeeyossef/97abd616eadf0cafaf9c40b1a13e57ad to your computer and use it in GitHub Desktop.
handles 360 panoramic images
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- JS --> | |
(function($){ | |
$(document).ready(function () { | |
//call imagePanning fn when DOM is ready | |
$("#savvy_vr_visit img").imagePanning(); | |
}); | |
//imagePanning fn | |
$.fn.imagePanning = function () { | |
var init = "center"; | |
var speed = 800; //animation/tween speed | |
//custom js tween | |
_tweenTo = function (el, prop, to, duration, easing, overwrite) { | |
if (!el._mTween) { | |
el._mTween = {top: {}, left: {}}; | |
} | |
var startTime = _getTime(), _delay, progress = 0, from = el.offsetTop, elStyle = el.style, _request, tobj = el._mTween[prop]; | |
if (prop === "left") { | |
from = el.offsetLeft; | |
} | |
var diff = to - from; | |
if (overwrite !== "none") { | |
_cancelTween(); | |
} | |
_startTween(); | |
function _step() { | |
progress = _getTime() - startTime; | |
_tween(); | |
if (progress >= tobj.time) { | |
tobj.time = (progress > tobj.time) ? progress + _delay - (progress - tobj.time) : progress + _delay - 1; | |
if (tobj.time < progress + 1) { | |
tobj.time = progress + 1; | |
} | |
} | |
if (tobj.time < duration) { | |
tobj.id = _request(_step); | |
} | |
} | |
function _tween() { | |
if (duration > 0) { | |
tobj.currVal = _ease(tobj.time, from, diff, duration, easing); | |
elStyle[prop] = Math.round(tobj.currVal) + "px"; | |
} else { | |
elStyle[prop] = to + "px"; | |
} | |
} | |
function _startTween() { | |
_delay = 1000 / 60; | |
tobj.time = progress + _delay; | |
_request = (!window.requestAnimationFrame) ? function (f) { | |
_tween(); | |
return setTimeout(f, 0.01); | |
} : window.requestAnimationFrame; | |
tobj.id = _request(_step); | |
} | |
function _cancelTween() { | |
if (tobj.id == null) { | |
return; | |
} | |
if (!window.requestAnimationFrame) { | |
clearTimeout(tobj.id); | |
} else { | |
window.cancelAnimationFrame(tobj.id); | |
} | |
tobj.id = null; | |
} | |
function _ease(t, b, c, d, type) { | |
var ts = (t /= d) * t, tc = ts * t; | |
return b + c * (0.499999999999997 * tc * ts + -2.5 * ts * ts + 5.5 * tc + -6.5 * ts + 4 * t); | |
} | |
function _getTime() { | |
if (window.performance && window.performance.now) { | |
return window.performance.now(); | |
} else { | |
if (window.performance && window.performance.webkitNow) { | |
return window.performance.webkitNow(); | |
} else { | |
if (Date.now) { | |
return Date.now(); | |
} else { | |
return new Date().getTime(); | |
} | |
} | |
} | |
} | |
}; | |
return this.each(function () { | |
var $this = $(this), timer, dest; | |
if ( $this.data("imagePanning") ) return; | |
$this.data("imagePanning", 1) | |
//create markup | |
.wrap("<div class='img-pan-container' />") | |
.after("<div class='resize' style='position:absolute; width:auto; height:auto; top:0; right:0; bottom:0; left:0; margin:0; padding:0; overflow:hidden; visibility:hidden; z-index:-1'><iframe style='width:100%; height:0; border:0; visibility:visible; margin:0' /><iframe style='width:0; height:100%; border:0; visibility:visible; margin:0' /></div>") | |
.after("<div class='video_content aligned'>" + | |
"<div class='container'>" + | |
"<div class='row text-white center-align'>" + | |
"<div class='col-xs-12 col-lg-8 col-lg-offset-2'>" + | |
"<div class='vr-icon'></div>" + | |
"<h2 class='page_title margin'>Visit Barcelona With</br>Our VR Tour</h2>" + | |
"<div class='page_subtitle'>Put on your VR cardboard and enjoy a fulfilling experience</div>" + | |
"<a class='button purple_bg' target='_blank' href='http://lp.startapp.com/mwc2017/'>Start Tour</a>" + | |
"</div></div></div></div>") | |
.one("load", function () { | |
setTimeout(function () { | |
$this.addClass("loaded").trigger("mousemove", 1); | |
}, 1); | |
}).each(function () { //run load fn even if cached | |
if (this.complete) $(this).load(); | |
}) | |
.parent().on("mousemove touchmove MSPointerMove pointermove", function (e, p) { | |
var cont = $(this); | |
e.preventDefault(); | |
var contH = cont.height(), contW = cont.width(), | |
isTouch = e.type.indexOf("touch") !== -1, isPointer = e.type.indexOf("pointer") !== -1, | |
evt = isPointer ? e.originalEvent : isTouch ? e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] : e, | |
coords = [ | |
!p ? evt.pageY - cont.offset().top : init === "center" ? contH / 2 : 0, | |
!p ? evt.pageX - cont.offset().left : init === "center" ? contW / 2 : 0 | |
]; | |
dest = [Math.round(($this.outerHeight(true) - contH) * (coords[0] / contH)), Math.round(($this.outerWidth(true) - contW) * (coords[1] / contW))]; | |
}) | |
//resize fn | |
.find(".resize iframe").each(function () { | |
$(this.contentWindow || this).on("resize", function () { | |
$this.trigger("mousemove", 1); | |
}); | |
}); | |
//panning animation 60FPS | |
if (timer) clearInterval(timer); | |
timer = setInterval(function () { | |
_tweenTo($this[0], "top", -dest[0], speed); | |
_tweenTo($this[0], "left", -dest[1], speed); | |
}, 16.6); | |
}); | |
} | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment