Created
March 6, 2017 03:48
-
-
Save 0b01/47605a25fdb72f3e541fff4f80b3c603 to your computer and use it in GitHub Desktop.
parallax.html
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
| <html> | |
| <head> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
| <script> | |
| (function ($) { | |
| var maxfps = 25, | |
| delay = 1 / maxfps * 1000, | |
| lastRender = new Date().getTime(), | |
| layers = [], | |
| plaxActivityTarget = {}, | |
| motionDegrees = 30, | |
| motionMax = 1, | |
| motionMin = -1, | |
| motionStartX = null, | |
| motionStartY = null, | |
| ignoreMoveable = false, | |
| options = null; | |
| var defaults = { | |
| useTransform : true | |
| }; | |
| // Public Methods | |
| $.fn.plaxify = function (params){ | |
| options = $.extend({}, defaults, params); | |
| options.useTransform = (options.useTransform ? supports3dTransform() : false); | |
| return this.each(function () { | |
| var layerExistsAt = -1; | |
| var layer = { | |
| "xRange": $(this).data('xrange') || 0, | |
| "yRange": $(this).data('yrange') || 0, | |
| "zRange": $(this).data('zrange') || 0, | |
| "invert": $(this).data('invert') || false, | |
| "background": $(this).data('background') || false | |
| }; | |
| for (var i=0;i<layers.length;i++){ | |
| if (this === layers[i].obj.get(0)){ | |
| layerExistsAt = i; | |
| } | |
| } | |
| for (var param in params) { | |
| if (layer[param] == 0) { | |
| layer[param] = params[param]; | |
| } | |
| } | |
| layer.inversionFactor = (layer.invert ? -1 : 1); // inversion factor for calculations | |
| // Add an object to the list of things to parallax | |
| layer.obj = $(this); | |
| if(layer.background) { | |
| // animate using the element's background | |
| pos = (layer.obj.css('background-position') || "0px 0px").split(/ /); | |
| if(pos.length != 2) { | |
| return; | |
| } | |
| x = pos[0].match(/^((-?\d+)\s*px|0+\s*%|left)$/); | |
| y = pos[1].match(/^((-?\d+)\s*px|0+\s*%|top)$/); | |
| if(!x || !y) { | |
| // no can-doesville, babydoll, we need pixels or top/left as initial values (it mightbe possible to construct a temporary image from the background-image property and get the dimensions and run some numbers, but that'll almost definitely be slow) | |
| return; | |
| } | |
| layer.originX = layer.startX = x[2] || 0; | |
| layer.originY = layer.startY = y[2] || 0; | |
| layer.transformOriginX = layer.transformStartX = 0; | |
| layer.transformOriginY = layer.transformStartY = 0; | |
| layer.transformOriginZ = layer.transformStartZ = 0; | |
| } else { | |
| // Figure out where the element is positioned, then reposition it from the top/left, same for transform if using translate3d | |
| var position = layer.obj.position(), | |
| transformTranslate = get3dTranslation(layer.obj); | |
| layer.obj.css({ | |
| 'transform' : transformTranslate.join() + 'px', | |
| 'top' : position.top, | |
| 'left' : position.left, | |
| 'right' :'', | |
| 'bottom':'' | |
| }); | |
| layer.originX = layer.startX = position.left; | |
| layer.originY = layer.startY = position.top; | |
| layer.transformOriginX = layer.transformStartX = transformTranslate[0]; | |
| layer.transformOriginY = layer.transformStartY = transformTranslate[1]; | |
| layer.transformOriginZ = layer.transformStartZ = transformTranslate[2]; | |
| } | |
| layer.startX -= layer.inversionFactor * Math.floor(layer.xRange/2); | |
| layer.startY -= layer.inversionFactor * Math.floor(layer.yRange/2); | |
| layer.transformStartX -= layer.inversionFactor * Math.floor(layer.xRange/2); | |
| layer.transformStartY -= layer.inversionFactor * Math.floor(layer.yRange/2); | |
| layer.transformStartZ -= layer.inversionFactor * Math.floor(layer.zRange/2); | |
| if(layerExistsAt >= 0){ | |
| layers.splice(layerExistsAt,1,layer); | |
| } else { | |
| layers.push(layer); | |
| } | |
| }); | |
| }; | |
| // Get the translate position of the element | |
| // | |
| // return 3 element array for translate3d | |
| function get3dTranslation(obj) { | |
| var translate = [0,0,0], | |
| matrix = obj.css("-webkit-transform") || | |
| obj.css("-moz-transform") || | |
| obj.css("-ms-transform") || | |
| obj.css("-o-transform") || | |
| obj.css("transform"); | |
| if(matrix !== 'none') { | |
| var values = matrix.split('(')[1].split(')')[0].split(','); | |
| var x = 0, | |
| y = 0, | |
| z = 0; | |
| if(values.length == 16){ | |
| // 3d matrix | |
| x = (parseFloat(values[values.length - 4])); | |
| y = (parseFloat(values[values.length - 3])); | |
| z = (parseFloat(values[values.length - 2])); | |
| }else{ | |
| // z is not transformed as is not a 3d matrix | |
| x = (parseFloat(values[values.length - 2])); | |
| y = (parseFloat(values[values.length - 1])); | |
| z = 0; | |
| } | |
| translate = [x,y,z]; | |
| } | |
| return translate; | |
| } | |
| // Check if element is in viewport area | |
| // | |
| // Returns boolean | |
| function inViewport(element) { | |
| if (element.offsetWidth === 0 || element.offsetHeight === 0) return false; | |
| var height = document.documentElement.clientHeight, | |
| rects = element.getClientRects(); | |
| for (var i = 0, l = rects.length; i < l; i++) { | |
| var r = rects[i], | |
| in_viewport = r.top > 0 ? r.top <= height : (r.bottom > 0 && r.bottom <= height); | |
| if (in_viewport) return true; | |
| } | |
| return false; | |
| } | |
| // Check support for 3dTransform | |
| // | |
| // Returns boolean | |
| function supports3dTransform() { | |
| var el = document.createElement('p'), | |
| has3d, | |
| transforms = { | |
| 'webkitTransform':'-webkit-transform', | |
| 'OTransform':'-o-transform', | |
| 'msTransform':'-ms-transform', | |
| 'MozTransform':'-moz-transform', | |
| 'transform':'transform' | |
| }; | |
| document.body.insertBefore(el, null); | |
| for (var t in transforms) { | |
| if (el.style[t] !== undefined) { | |
| el.style[t] = "translate3d(1px,1px,1px)"; | |
| has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]); | |
| } | |
| } | |
| document.body.removeChild(el); | |
| return (has3d !== undefined && has3d.length > 0 && has3d !== "none"); | |
| } | |
| // Determine if the device has an accelerometer | |
| // | |
| // returns true if the browser has window.DeviceMotionEvent (mobile) | |
| function moveable(){ | |
| return (ignoreMoveable===true) ? false : window.DeviceOrientationEvent !== undefined; | |
| } | |
| // The values pulled from the gyroscope of a motion device. | |
| // | |
| // Returns an object literal with x and y as options. | |
| function valuesFromMotion(e) { | |
| x = e.gamma; | |
| y = e.beta; | |
| // Swap x and y in Landscape orientation | |
| if (Math.abs(window.orientation) === 90) { | |
| var a = x; | |
| x = y; | |
| y = a; | |
| } | |
| // Invert x and y in upsidedown orientations | |
| if (window.orientation < 0) { | |
| x = -x; | |
| y = -y; | |
| } | |
| motionStartX = (motionStartX === null) ? x : motionStartX; | |
| motionStartY = (motionStartY === null) ? y : motionStartY; | |
| return { | |
| x: x - motionStartX, | |
| y: y - motionStartY | |
| }; | |
| } | |
| // Move the elements in the `layers` array within their ranges, | |
| // based on mouse or motion input | |
| // | |
| // Parameters | |
| // | |
| // e - mousemove or devicemotion event | |
| // | |
| // returns nothing | |
| function plaxifier(e) { | |
| if (new Date().getTime() < lastRender + delay) return; | |
| lastRender = new Date().getTime(); | |
| var leftOffset = (plaxActivityTarget.offset() != null) ? plaxActivityTarget.offset().left : 0, | |
| topOffset = (plaxActivityTarget.offset() != null) ? plaxActivityTarget.offset().top : 0, | |
| x = e.pageX-leftOffset, | |
| y = e.pageY-topOffset; | |
| if (!inViewport(layers[0].obj[0].parentNode)) return; | |
| if(moveable()){ | |
| if(e.gamma === undefined){ | |
| ignoreMoveable = true; | |
| return; | |
| } | |
| values = valuesFromMotion(e); | |
| // Admittedly fuzzy measurements | |
| x = values.x / motionDegrees; | |
| y = values.y / motionDegrees; | |
| // Ensure not outside of expected range, -1 to 1 | |
| x = x < motionMin ? motionMin : (x > motionMax ? motionMax : x); | |
| y = y < motionMin ? motionMin : (y > motionMax ? motionMax : y); | |
| // Normalize from -1 to 1 => 0 to 1 | |
| x = (x + 1) / 2; | |
| y = (y + 1) / 2; | |
| } | |
| var hRatio = x/((moveable() === true) ? motionMax : plaxActivityTarget.width()), | |
| vRatio = y/((moveable() === true) ? motionMax : plaxActivityTarget.height()), | |
| layer, i; | |
| for (i = layers.length; i--;) { | |
| layer = layers[i]; | |
| if(options.useTransform && !layer.background){ | |
| newX = layer.transformStartX + layer.inversionFactor*(layer.xRange*hRatio); | |
| newY = layer.transformStartY + layer.inversionFactor*(layer.yRange*vRatio); | |
| newZ = layer.transformStartZ; | |
| layer.obj | |
| .css({'transform':'translate3d('+newX+'px,'+newY+'px,'+newZ+'px)'}); | |
| }else{ | |
| newX = layer.startX + layer.inversionFactor*(layer.xRange*hRatio); | |
| newY = layer.startY + layer.inversionFactor*(layer.yRange*vRatio); | |
| if(layer.background) { | |
| layer.obj | |
| .css('background-position', newX+'px '+newY+'px'); | |
| } else { | |
| layer.obj | |
| .css('left', newX) | |
| .css('top', newY); | |
| } | |
| } | |
| } | |
| } | |
| $.plax = { | |
| // Begin parallaxing | |
| // | |
| // Parameters | |
| // | |
| // opts - options for plax | |
| // activityTarget - optional; plax will only work within the bounds of this element, if supplied. | |
| // | |
| // Examples | |
| // | |
| // $.plax.enable({ "activityTarget": $('#myPlaxDiv')}) | |
| // # plax only happens when the mouse is over #myPlaxDiv | |
| // | |
| // returns nothing | |
| enable: function(opts){ | |
| if (opts) { | |
| if (opts.activityTarget) plaxActivityTarget = opts.activityTarget || $(document.body); | |
| if (typeof opts.gyroRange === 'number' && opts.gyroRange > 0) motionDegrees = opts.gyroRange; | |
| } else { | |
| plaxActivityTarget = $(document.body); | |
| } | |
| plaxActivityTarget.bind('mousemove.plax', function (e) { | |
| plaxifier(e); | |
| }); | |
| if(moveable()){ | |
| window.ondeviceorientation = function(e){plaxifier(e);}; | |
| } | |
| }, | |
| // Stop parallaxing | |
| // | |
| // Examples | |
| // | |
| // $.plax.disable() | |
| // # plax no longer runs | |
| // | |
| // $.plax.disable({ "clearLayers": true }) | |
| // # plax no longer runs and all layers are forgotten | |
| // | |
| // returns nothing | |
| disable: function(opts){ | |
| $(document).unbind('mousemove.plax'); | |
| window.ondeviceorientation = undefined; | |
| if (opts && typeof opts.restorePositions === 'boolean' && opts.restorePositions) { | |
| for(var i = layers.length; i--;) { | |
| layer = layers[i]; | |
| if(options.useTransform && !layer.background){ | |
| layer.obj | |
| .css('transform', 'translate3d('+layer.transformOriginX+'px,'+layer.transformOriginY+'px,'+layer.transformOriginZ+'px)') | |
| .css('top', layer.originY); | |
| }else{ | |
| if(layers[i].background) { | |
| layer.obj.css('background-position', layer.originX+'px '+layer.originY+'px'); | |
| } else { | |
| layer.obj | |
| .css('left', layer.originX) | |
| .css('top', layer.originY); | |
| } | |
| } | |
| } | |
| } | |
| if (opts && typeof opts.clearLayers === 'boolean' && opts.clearLayers) layers = []; | |
| } | |
| }; | |
| if (typeof ender !== 'undefined') { | |
| $.ender($.fn, true); | |
| } | |
| })(function () { | |
| return typeof jQuery !== 'undefined' ? jQuery : ender; | |
| }()); | |
| </script> | |
| <style> | |
| #shell{ | |
| display: block; | |
| position: relative; | |
| margin: 100px auto; | |
| width: 860px; | |
| height: 770px; | |
| z-index: 0; | |
| } | |
| #base_parallax { | |
| overflow: hidden; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| } | |
| #logo_parallax { | |
| top:5%; | |
| left:7%; | |
| display: block; | |
| margin: 0 auto; | |
| position: relative; | |
| width:10%; | |
| float:left; | |
| } | |
| #bubble_parallax{ | |
| z-index: 1000; | |
| top:43%; | |
| left:10%; | |
| display: block; | |
| margin: 0 auto; | |
| position: relative; | |
| width:20%; | |
| float:left; | |
| } | |
| #text_parallax{ | |
| z-index: 1; | |
| top:40%; | |
| left:-23%; | |
| display: block; | |
| margin: 0 auto; | |
| position: relative; | |
| width:70%; | |
| float:left; | |
| } | |
| #texthl_parallax{ | |
| z-index: 1; | |
| top: 28%; | |
| left: 7%; | |
| display: block; | |
| margin: 0 auto; | |
| position: relative; | |
| width: 35%; | |
| float: left; | |
| } | |
| #title_parallax{ | |
| z-index: 1; | |
| top: -2%; | |
| left: -29%; | |
| display: block; | |
| margin: 0 auto; | |
| position: relative; | |
| width: 60%; | |
| float: left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="shell"> | |
| <div id="base_parallax"> | |
| <img id="base" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzQ1LjkgMjMzLjA4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6dXJsKCNsaW5lYXItZ3JhZGllbnQpO30uY2xzLTJ7ZmlsbDojM2JhYWI2O30uY2xzLTN7ZmlsbDojMmY4NmJjO30uY2xzLTR7ZmlsbDojMmU4MmIxO30uY2xzLTEyLC5jbHMtNXtmaWxsOiNmZmY7fS5jbHMtNntmaWxsOiNhMmEyYTE7fS5jbHMtN3tmaWxsOiNiMGIxYjI7fS5jbHMtOHtmaWxsOiNjMmMzYzE7fS5jbHMtOXtmaWxsOiNmZGZlZmU7fS5jbHMtMTB7ZmlsbDojYzdjOWM3O30uY2xzLTExe2ZpbGw6IzgyODM4Mjt9LmNscy0xMntzdHJva2U6IzIzMWYyMDt9PC9zdHlsZT48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudCIgeDE9IjE3Mi45NSIgeTE9IjIwOC42OCIgeDI9IjE3Mi45NSIgeTI9IjIyMi41NiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2Q4ZjBmNyIvPjxzdG9wIG9mZnNldD0iMC45OSIgc3RvcC1jb2xvcj0iI2FlZTFmNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjx0aXRsZT5iZzwvdGl0bGU+PGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj48cmVjdCBjbGFzcz0iY2xzLTEiIHdpZHRoPSIzNDUuOSIgaGVpZ2h0PSIyMzMuMDgiLz48cmVjdCBjbGFzcz0iY2xzLTIiIHg9IjIyLjMxIiB5PSI1NS45OSIgd2lkdGg9IjIyOC42NyIgaGVpZ2h0PSIxOC41Ii8+PHJlY3QgY2xhc3M9ImNscy0zIiB4PSIyMi45MyIgeT0iNzkuNTgiIHdpZHRoPSIzMS4wMSIgaGVpZ2h0PSI1LjI1Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyMi4zMSIgeT0iMzIuMiIgd2lkdGg9IjM1Ljg2IiBoZWlnaHQ9IjUuMjUiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjY5LjY4IiB5PSIzMi4yIiB3aWR0aD0iMzUuODYiIGhlaWdodD0iNS4yNSIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMTE4LjMxIiB5PSIzMi4yIiB3aWR0aD0iMzAuNCIgaGVpZ2h0PSI1LjI1Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIxNjkuMDciIHk9IjMyLjIiIHdpZHRoPSIyMy45OCIgaGVpZ2h0PSI1LjI1Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyMTAuMzgiIHk9IjMyLjIiIHdpZHRoPSIzNC44MyIgaGVpZ2h0PSI1LjI1Ii8+PHJlY3QgY2xhc3M9ImNscy01IiB4PSIyNzEuMTEiIHk9IjMyLjIiIHdpZHRoPSIzOS43OSIgaGVpZ2h0PSI1LjI1Ii8+PHJlY3QgY2xhc3M9ImNscy02IiB4PSIzMTAuOSIgeT0iMzIuMiIgd2lkdGg9IjUuMjUiIGhlaWdodD0iNS4yNSIvPjxyZWN0IGNsYXNzPSJjbHMtNyIgd2lkdGg9IjM0NS45IiBoZWlnaHQ9IjkuMDYiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjE5Ni4xMSIgeT0iMTUuMDUiIHdpZHRoPSI5LjY5IiBoZWlnaHQ9IjIuNjIiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjE4MS42NCIgeT0iMTUuMDUiIHdpZHRoPSI5LjY5IiBoZWlnaHQ9IjIuNjIiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjIxMC4zOCIgeT0iMTUuMDUiIHdpZHRoPSI5LjY5IiBoZWlnaHQ9IjIuNjIiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjIyNi43NCIgeT0iMTUuMDUiIHdpZHRoPSI5LjY5IiBoZWlnaHQ9IjIuNjIiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjEzNi45NSIgeT0iMTUuMDUiIHdpZHRoPSI5LjY5IiBoZWlnaHQ9IjIuNjIiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjEyMi40OSIgeT0iMTUuMDUiIHdpZHRoPSI5LjY5IiBoZWlnaHQ9IjIuNjIiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjE1MS4yMiIgeT0iMTUuMDUiIHdpZHRoPSI5LjY5IiBoZWlnaHQ9IjIuNjIiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjE2Ny41OCIgeT0iMTUuMDUiIHdpZHRoPSI5LjY5IiBoZWlnaHQ9IjIuNjIiLz48cmVjdCBjbGFzcz0iY2xzLTgiIHg9IjI3MS4xMSIgeT0iMTUuMDUiIHdpZHRoPSI5Ljg2IiBoZWlnaHQ9IjIuNjIiLz48cmVjdCBjbGFzcz0iY2xzLTgiIHg9IjI0NS4wNiIgeT0iMTUuMDUiIHdpZHRoPSIyMC4yNCIgaGVpZ2h0PSIyLjYyIi8+PHJlY3QgY2xhc3M9ImNscy05IiB4PSIzMzkuNiIgeT0iMi4yNiIgd2lkdGg9IjQuNTUiIGhlaWdodD0iNC41NSIvPjxyZWN0IGNsYXNzPSJjbHMtMTAiIHg9IjM0MC41NiIgeT0iOS4wNiIgd2lkdGg9IjUuMzQiIGhlaWdodD0iMjI0LjAyIi8+PHJlY3QgY2xhc3M9ImNscy0xMSIgeD0iMzQwLjU2IiB5PSIzMi4yIiB3aWR0aD0iNS4zNCIgaGVpZ2h0PSIyMi4wNSIvPjxwYXRoIGNsYXNzPSJjbHMtMTIiIGQ9Ik0wLDE0MyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQuMzUpIi8+PC9nPjwvZz48L3N2Zz4=" /> | |
| </div> | |
| <div id="logo_parallax"> | |
| <img id="logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTcuMTIgNC4yNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM2MzEwMTE7fS5jbHMtMntmaWxsOiNmMDYxMjg7fS5jbHMtM3tmaWxsOnVybCgjcmFkaWFsLWdyYWRpZW50KTt9LmNscy00e2ZpbGw6dXJsKCNyYWRpYWwtZ3JhZGllbnQtNSk7fS5jbHMtNXtmaWxsOiNmNjg3MjI7fS5jbHMtNntmaWxsOiNmNGFjMWU7fTwvc3R5bGU+PHJhZGlhbEdyYWRpZW50IGlkPSJyYWRpYWwtZ3JhZGllbnQiIGN4PSItMTc0OC42MyIgY3k9Ii0xMjEuNDEiIHI9IjAiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIyNjEuNzEgLTE1NC4xNykgcm90YXRlKDE4MCkgc2NhbGUoMS4zIDEuMykiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAuMzYiIHN0b3AtY29sb3I9IiNmNDgwMjAiLz48c3RvcCBvZmZzZXQ9IjAuMzgiIHN0b3AtY29sb3I9IiNmNzhmMjMiLz48c3RvcCBvZmZzZXQ9IjAuNDEiIHN0b3AtY29sb3I9IiNmYWEyMjAiLz48c3RvcCBvZmZzZXQ9IjAuNDQiIHN0b3AtY29sb3I9IiNmYWIwMWQiLz48c3RvcCBvZmZzZXQ9IjAuNDgiIHN0b3AtY29sb3I9IiNmY2JjMWYiLz48c3RvcCBvZmZzZXQ9IjAuNTMiIHN0b3AtY29sb3I9IiNmZmM4MWQiLz48c3RvcCBvZmZzZXQ9IjAuNiIgc3RvcC1jb2xvcj0iI2ZmY2UxYiIvPjxzdG9wIG9mZnNldD0iMC43OCIgc3RvcC1jb2xvcj0iI2ZmY2UxYyIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJyYWRpYWwtZ3JhZGllbnQtNSIgY3g9Ii0xNzQ4LjYxIiBjeT0iLTEyMS40IiB4bGluazpocmVmPSIjcmFkaWFsLWdyYWRpZW50Ii8+PHN5bWJvbCBpZD0idGhpbmtfMiIgZGF0YS1uYW1lPSJ0aGluayAyIiB2aWV3Qm94PSIwIDAgMjUwLjgyIDcwLjg0Ij48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0wLDExSDguNTZWMy4xOUwxNi4yNiwwVjExSDI2Ljc4djUuNjJIMTYuMjZWNDEuOTRsLjEzLDIuNjguMywxLjQxcS43MiwyLjM0LDQuNDcsMi4yNmEzMS42OCwzMS42OCwwLDAsMCw1LjYyLS42NHY1Ljc1QTYyLDYyLDAsMCwxLDE5LDU0UTkuMDcsNTQsOC42LDQ2bDAtNC4zNHYtMjVIMFoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00OS44MSwzMS4zNCwzNC4xLDExSDQ0LjMyTDU1LjE0LDI2LjI3LDY2LjEyLDExaDguOTRMNTkuMzUsMzAuOTEsNzYsNTIuODRINjYuMTJMNTQsMzYuMTksNDIsNTIuODRIMzNaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNODAuMzksMTFoOC41NlYzLjE5TDk2LjY1LDBWMTFoMTAuNTJ2NS42Mkg5Ni42NVY0MS45NGwuMTMsMi42OC4zLDEuNDFxLjcyLDIuMzQsNC40NywyLjI2YTMxLjY4LDMxLjY4LDAsMCwwLDUuNjItLjY0djUuNzVhNjIsNjIsMCwwLDEtNy43OS42NFE4OS40Niw1NCw4OSw0NmwwLTQuMzR2LTI1SDgwLjM5WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEyNi4yNCwxNC42cTQuNDMtNC43MywxMi00Ljc3YTE4LjA1LDE4LjA1LDAsMCwxLDcsMS40MSwxNS4xOCwxNS4xOCwwLDAsMSw1LjExLDMuNDVxNS42Miw1Ljg4LDUuNTgsMTd0LTUuNTMsMTdhMTUuNzksMTUuNzksMCwwLDEtNS42OCwzLjk0QTE4LjM2LDE4LjM2LDAsMCwxLDEzNy42MSw1NHEtNy41OCwwLTExLjkyLTQuNmwtMS4wNi0xLjE5djIwLjFsLTcuNzEsMi41MVYxMWg3LjcxdjUuNTRabS0xLjgzLDE3LjhhMjQuMTIsMjQuMTIsMCwwLDAsMS40MSw4Ljc3cTIuNDcsNy4xMSwxMC4wOSw3LjExYTEwLjYyLDEwLjYyLDAsMCwwLDQuNTYtLjg1cTcuNDEtMyw3LjQ1LTE1Ljg0YTIzLjkxLDIzLjkxLDAsMCwwLTEuNTgtOC44NnEtMi42LTcuMTUtMTAtNy4xNWExMC4yMiwxMC4yMiwwLDAsMC05LjYyLDUuNTRRMTI0LjQ1LDI1LjE2LDEyNC40MSwzMi40WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE3NCw0MS4zNGE5LjUxLDkuNTEsMCwwLDAsNS41Myw2LDExLjIsMTEuMiwwLDAsMCw0LjY4Ljg5cTguNjQtLjA4LDEwLTguODFoOHEtLjk0LDUuNTQtMi44MSw4YTE1LjA2LDE1LjA2LDAsMCwxLTYuNzMsNS4xMUEyMywyMywwLDAsMSwxODQuMjMsNTRxLTkuNzksMC0xNC43Ny02LTQuODEtNS43OS00LjczLTE1LjVhMzIuMjIsMzIuMjIsMCwwLDEsMi4wOS0xMi4xOCwxNS42NSwxNS42NSwwLDAsMSw3LTgsMTkuNSwxOS41LDAsMCwxLDEwLjM5LTIuNnExNywuMTMsMTguMjIsMTcuMmwuMTMsNmgtMjkuOEEzMS42NCwzMS42NCwwLDAsMCwxNzQsNDEuMzRabS0xLjI0LTE0aDIxLjhxLS4yMS02LjE3LTIuMy04LjYtMi42OC0zLjE1LTguMTctMy4xOS04LjY5LDAtMTAuNjQsOC40M1oiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMTMuMzEsMTFoNy4ydjUuNzFxNC45LTYuODEsMTQuNDMtNi45YTIwLjU2LDIwLjU2LDAsMCwxLDcuNDksMS4zMnE3Ljc5LDIuOTQsOC4zNSwxNC44MmwwLDJWNTIuODRoLTcuNzFWMjcuNzZxMC05LjA3LTUuNjItMTEuMzNhMTIuMzEsMTIuMzEsMCwwLDAtNC42OC0uODVxLTExLjY3LDAtMTEuNzksMTIuMThWNTIuODRoLTcuNzFaIi8+PC9zeW1ib2w+PC9kZWZzPjx0aXRsZT5sb2dvPC90aXRsZT48ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIj48ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEiPjxwYXRoIGlkPSJfUGF0aF8iIGRhdGEtbmFtZT0iJmx0O1BhdGgmZ3Q7IiBjbGFzcz0iY2xzLTIiIGQ9Ik02LjIzLDMuMDciLz48cGF0aCBpZD0iX1BhdGhfMiIgZGF0YS1uYW1lPSImbHQ7UGF0aCZndDsiIGNsYXNzPSJjbHMtMyIgZD0iTTMuMjUsMy4xMVoiLz48cGF0aCBpZD0iX1BhdGhfMyIgZGF0YS1uYW1lPSImbHQ7UGF0aCZndDsiIGNsYXNzPSJjbHMtMyIgZD0iTTMuMjUsMy4xMVoiLz48cGF0aCBpZD0iX1BhdGhfNCIgZGF0YS1uYW1lPSImbHQ7UGF0aCZndDsiIGNsYXNzPSJjbHMtMyIgZD0iTTMuMjUsMy4xMVoiLz48cGF0aCBpZD0iX1BhdGhfNSIgZGF0YS1uYW1lPSImbHQ7UGF0aCZndDsiIGNsYXNzPSJjbHMtMyIgZD0iTTMuMjUsMy4xMVoiLz48cGF0aCBpZD0iX1BhdGhfNiIgZGF0YS1uYW1lPSImbHQ7UGF0aCZndDsiIGNsYXNzPSJjbHMtNCIgZD0iTTMuMjMsMy4wOVoiLz48cGF0aCBpZD0iX1BhdGhfNyIgZGF0YS1uYW1lPSImbHQ7UGF0aCZndDsiIGNsYXNzPSJjbHMtMiIgZD0iTTAsMy4wN2MwLC42OCwxLjM3LDEuMiwzLjA3LDEuMnMzLjA3LS41LDMuMDctMS4yaDBBMy4wNywzLjA3LDAsMSwwLDAsMy4wN1oiLz48cGF0aCBpZD0iX1BhdGhfOCIgZGF0YS1uYW1lPSImbHQ7UGF0aCZndDsiIGNsYXNzPSJjbHMtNSIgZD0iTTEuMDksM2MwLC40NC44OS43NiwyLC43NnMyLS4zMywyLS43NmEyLDIsMCwwLDAtMi0yLDIsMiwwLDAsMC0yLDJaIi8+PHBhdGggaWQ9Il9QYXRoXzkiIGRhdGEtbmFtZT0iJmx0O1BhdGgmZ3Q7IiBjbGFzcz0iY2xzLTYiIGQ9Ik0zLjc1LDMuMDdjMCwuMTUtLjI2LjI2LS42NS4yNnMtLjY4LS4xMS0uNjUtLjI2aDBhLjY4LjY4LDAsMCwxLC42NS0uNy43MS43MSwwLDAsMSwuNjUuN1oiLz48cGF0aCBpZD0iX1BhdGhfMTAiIGRhdGEtbmFtZT0iJmx0O1BhdGgmZ3Q7IiBjbGFzcz0iY2xzLTYiIGQ9Ik0yLjM3LDMuMDlaIi8+PHBhdGggaWQ9Il9QYXRoXzExIiBkYXRhLW5hbWU9IiZsdDtQYXRoJmd0OyIgY2xhc3M9ImNscy02IiBkPSJNMy43NywzLjA5WiIvPjxwYXRoIGlkPSJfUGF0aF8xMiIgZGF0YS1uYW1lPSImbHQ7UGF0aCZndDsiIGNsYXNzPSJjbHMtNiIgZD0iTTIuMzcsMy4wOVoiLz48cGF0aCBpZD0iX1BhdGhfMTMiIGRhdGEtbmFtZT0iJmx0O1BhdGgmZ3Q7IiBjbGFzcz0iY2xzLTYiIGQ9Ik0zLjc3LDMuMDlaIi8+PHBhdGggaWQ9Il9QYXRoXzE0IiBkYXRhLW5hbWU9IiZsdDtQYXRoJmd0OyIgY2xhc3M9ImNscy02IiBkPSJNMi4zNywzLjA5WiIvPjx1c2UgaWQ9InRoaW5rXzItMyIgZGF0YS1uYW1lPSJ0aGluayAyIiB3aWR0aD0iMjUwLjgyIiBoZWlnaHQ9IjcwLjg1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2LjUyIDEuMjgpIHNjYWxlKDAuMDQpIiB4bGluazpocmVmPSIjdGhpbmtfMiIvPjwvZz48L2c+PC9zdmc+" /> | |
| </div> | |
| <div id="bubble_parallax"> | |
| <img id="bubble" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNzAuMTQgNTUuMzkiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO3N0cm9rZTojMjMxZjIwO30uY2xzLTJ7ZmlsbDojYTBkY2YxO30uY2xzLTN7ZmlsbDojZWNlNzBlO30uY2xzLTR7ZmlsbDojZjE1ZjI2O30uY2xzLTV7ZmlsbDojZjY4OTIyO30uY2xzLTZ7ZmlsbDp1cmwoI3JhZGlhbC1ncmFkaWVudCk7fS5jbHMtN3tmaWxsOnVybCgjcmFkaWFsLWdyYWRpZW50LTMpO30uY2xzLTh7ZmlsbDp1cmwoI3JhZGlhbC1ncmFkaWVudC01KTt9LmNscy05e2ZpbGw6I2Y4YWMxYzt9PC9zdHlsZT48cmFkaWFsR3JhZGllbnQgaWQ9InJhZGlhbC1ncmFkaWVudCIgY3g9Ii0xMDI4LjcxIiBjeT0iMjI0LjQ2IiByPSIwIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0wLjkyLCAtMC45MiwgLTAuOTIsIDAuOTIsIC02NzQuNTEsIC0xMTM5LjQ5KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMC4zNiIgc3RvcC1jb2xvcj0iI2Y1ODAyMCIvPjxzdG9wIG9mZnNldD0iMC4zOCIgc3RvcC1jb2xvcj0iI2Y3OGYyMiIvPjxzdG9wIG9mZnNldD0iMC40MSIgc3RvcC1jb2xvcj0iI2ZhYTIyMCIvPjxzdG9wIG9mZnNldD0iMC40NCIgc3RvcC1jb2xvcj0iI2ZjYjExZCIvPjxzdG9wIG9mZnNldD0iMC40OCIgc3RvcC1jb2xvcj0iI2ZlYmQxZSIvPjxzdG9wIG9mZnNldD0iMC41MyIgc3RvcC1jb2xvcj0iI2ZmYzcxYyIvPjxzdG9wIG9mZnNldD0iMC42IiBzdG9wLWNvbG9yPSIjZmZjYzFhIi8+PHN0b3Agb2Zmc2V0PSIwLjc4IiBzdG9wLWNvbG9yPSIjZmZjZTE5Ii8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9InJhZGlhbC1ncmFkaWVudC0zIiBjeD0iLTEwMjguNzEiIGN5PSIyMjQuNDYiIHI9IjAuMDEiIHhsaW5rOmhyZWY9IiNyYWRpYWwtZ3JhZGllbnQiLz48cmFkaWFsR3JhZGllbnQgaWQ9InJhZGlhbC1ncmFkaWVudC01IiBjeD0iLTEwMjguNjgiIGN5PSIyMjQuNDYiIHI9IjAiIHhsaW5rOmhyZWY9IiNyYWRpYWwtZ3JhZGllbnQiLz48L2RlZnM+PHRpdGxlPmJ1YmJsZTwvdGl0bGU+PGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMjQuNTggNDMgMC41IDQzIDAuNSAwLjUgNjkuNjQgMC41IDY5LjY0IDQzIDQ1LjU2IDQzIDM1LjA3IDU0LjY0IDI0LjU4IDQzIi8+PHJlY3QgY2xhc3M9ImNscy0yIiB4PSIxMC45MiIgeT0iNy4xMSIgd2lkdGg9IjQ1LjI5IiBoZWlnaHQ9IjIuNDEiLz48cmVjdCBjbGFzcz0iY2xzLTIiIHg9IjUuMzMiIHk9IjExLjM1IiB3aWR0aD0iNTAuODgiIGhlaWdodD0iMi40MSIvPjxyZWN0IGNsYXNzPSJjbHMtMiIgeD0iNS4zMyIgeT0iMTUuMzkiIHdpZHRoPSI0My41OSIgaGVpZ2h0PSIyLjQxIi8+PHJlY3QgY2xhc3M9ImNscy0yIiB4PSIxMC45MiIgeT0iMTkuODUiIHdpZHRoPSI0NS4yOSIgaGVpZ2h0PSIyLjQxIi8+PHJlY3QgY2xhc3M9ImNscy0yIiB4PSI1LjMzIiB5PSIyNC4zMSIgd2lkdGg9IjUwLjg4IiBoZWlnaHQ9IjIuNDEiLz48cmVjdCBjbGFzcz0iY2xzLTIiIHg9IjUuMzMiIHk9IjI4Ljc3IiB3aWR0aD0iNTAuODgiIGhlaWdodD0iMi40MSIvPjxyZWN0IGNsYXNzPSJjbHMtMiIgeD0iNS4zMyIgeT0iMzMuMDgiIHdpZHRoPSIzOS44IiBoZWlnaHQ9IjIuNDEiLz48cG9seWxpbmUgY2xhc3M9ImNscy0zIiBwb2ludHM9IjU0LjgzIDAuOTkgNjkuMTQgMC45OSA2OS4xNCAxNS4zIi8+PHBhdGggaWQ9Il9QYXRoXyIgZGF0YS1uYW1lPSImbHQ7UGF0aCZndDsiIGNsYXNzPSJjbHMtNCIgZD0iTTU5LjQ0LDUuNjNjLS41NS41Ni4xNiwyLjEyLDEuNTUsMy41MnMyLjk1LDIuMTEsMy41LDEuNTVoMGEzLjU4LDMuNTgsMCwwLDAtNS4wNS01LjA2WiIvPjxwYXRoIGlkPSJfUGF0aF8yIiBkYXRhLW5hbWU9IiZsdDtQYXRoJmd0OyIgY2xhc3M9ImNscy00IiBkPSJNNjQuNDgsMTAuNjYiLz48cGF0aCBpZD0iX1BhdGhfMyIgZGF0YS1uYW1lPSImbHQ7UGF0aCZndDsiIGNsYXNzPSJjbHMtNSIgZD0iTTYwLjM4LDYuNDljLS4zNS4zNi4wOSwxLjM1LDEsMi4yNXMxLjksMS4zNiwyLjI2LDFhMi4zMiwyLjMyLDAsMCwwLDAtMy4yNiwyLjI5LDIuMjksMCwwLDAtMy4yNCwwWiIvPjxwYXRoIGlkPSJfUGF0aF80IiBkYXRhLW5hbWU9IiZsdDtQYXRoJmd0OyIgY2xhc3M9ImNscy02IiBkPSJNNjIuMSw4LjMyWiIvPjxwYXRoIGlkPSJfUGF0aF81IiBkYXRhLW5hbWU9IiZsdDtQYXRoJmd0OyIgY2xhc3M9ImNscy02IiBkPSJNNjIuMSw4LjMyWiIvPjxwYXRoIGlkPSJfUGF0aF82IiBkYXRhLW5hbWU9IiZsdDtQYXRoJmd0OyIgY2xhc3M9ImNscy03IiBkPSJNNjIuMTEsOC4zMmgwWiIvPjxwYXRoIGlkPSJfUGF0aF83IiBkYXRhLW5hbWU9IiZsdDtQYXRoJmd0OyIgY2xhc3M9ImNscy03IiBkPSJNNjIuMTEsOC4zMloiLz48cGF0aCBpZD0iX1BhdGhfOCIgZGF0YS1uYW1lPSImbHQ7UGF0aCZndDsiIGNsYXNzPSJjbHMtOCIgZD0iTTYyLjA4LDguMjlaIi8+PHBhdGggaWQ9Il9QYXRoXzkiIGRhdGEtbmFtZT0iJmx0O1BhdGgmZ3Q7IiBjbGFzcz0iY2xzLTkiIGQ9Ik02Mi41MSw4LjcxYy0uMTMuMTItLjQ0LDAtLjc1LS4zMnMtLjQ1LS42NS0uMzMtLjc3aDBhLjc3Ljc3LDAsMCwxLDEuMSwwLC43OC43OCwwLDAsMSwwLDEuMTFoMFoiLz48cGF0aCBpZD0iX1BhdGhfMTAiIGRhdGEtbmFtZT0iJmx0O1BhdGgmZ3Q7IiBjbGFzcz0iY2xzLTkiIGQ9Ik02MS40LDcuNloiLz48cGF0aCBpZD0iX1BhdGhfMTEiIGRhdGEtbmFtZT0iJmx0O1BhdGgmZ3Q7IiBjbGFzcz0iY2xzLTkiIGQ9Ik02Mi41Miw4LjcyWiIvPjxwYXRoIGlkPSJfUGF0aF8xMiIgZGF0YS1uYW1lPSImbHQ7UGF0aCZndDsiIGNsYXNzPSJjbHMtOSIgZD0iTTYxLjQsNy42WiIvPjxwYXRoIGlkPSJfUGF0aF8xMyIgZGF0YS1uYW1lPSImbHQ7UGF0aCZndDsiIGNsYXNzPSJjbHMtOSIgZD0iTTYyLjUyLDguNzJaIi8+PHBhdGggaWQ9Il9QYXRoXzE0IiBkYXRhLW5hbWU9IiZsdDtQYXRoJmd0OyIgY2xhc3M9ImNscy05IiBkPSJNNjEuMzksNy41OVoiLz48L2c+PC9nPjwvc3ZnPg==" /> | |
| </div> | |
| <div id="text_parallax"> | |
| <img id="text" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMjguMDUgOTUuNTEiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO308L3N0eWxlPjwvZGVmcz48dGl0bGU+dGV4dDwvdGl0bGU+PGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj48cmVjdCBjbGFzcz0iY2xzLTEiIHk9IjE0LjE3IiB3aWR0aD0iMTk0LjA2IiBoZWlnaHQ9IjUuMjUiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHk9IjcuMDgiIHdpZHRoPSIyMjguMDUiIGhlaWdodD0iNS4yNSIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgd2lkdGg9IjIxMC41NiIgaGVpZ2h0PSI1LjI1Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB5PSIzNS40MiIgd2lkdGg9IjE2MS4zIiBoZWlnaHQ9IjUuMjUiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHk9IjI4LjMzIiB3aWR0aD0iMjI4LjA1IiBoZWlnaHQ9IjUuMjUiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHk9IjIxLjI1IiB3aWR0aD0iMjEwLjU2IiBoZWlnaHQ9IjUuMjUiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHk9IjQ5LjU4IiB3aWR0aD0iMjI4LjA1IiBoZWlnaHQ9IjUuMjUiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHk9IjQyLjUiIHdpZHRoPSIyMTAuNTYiIGhlaWdodD0iNS4yNSIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMTE2LjczIiB5PSI2MS41OCIgd2lkdGg9IjExMS4zMiIgaGVpZ2h0PSI1Ljk1Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB5PSI4My4xOCIgd2lkdGg9IjE5OS40OCIgaGVpZ2h0PSI1LjI1Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB5PSI3Ni4xIiB3aWR0aD0iMjI4LjA1IiBoZWlnaHQ9IjUuMjUiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHk9IjY5LjAxIiB3aWR0aD0iMjEwLjU2IiBoZWlnaHQ9IjUuMjUiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHk9IjkwLjI2IiB3aWR0aD0iMjEwLjU2IiBoZWlnaHQ9IjUuMjUiLz48L2c+PC9nPjwvc3ZnPg==" /> | |
| </div> | |
| <div id="texthl_parallax"> | |
| <img id="texthl" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTEuMzIgNS45NSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNlY2U3MGU7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT50ZXh0LWhsPC90aXRsZT48ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIj48ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEiPjxyZWN0IGNsYXNzPSJjbHMtMSIgd2lkdGg9IjExMS4zMiIgaGVpZ2h0PSI1Ljk1Ii8+PC9nPjwvZz48L3N2Zz4=" /> | |
| </div> | |
| <div id="title_parallax"> | |
| <img id="title" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMzYuODYgMTguNzkiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMjMxZjIwO308L3N0eWxlPjwvZGVmcz48dGl0bGU+dGl0bGU8L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMy4yMSwyVjQuNzNINS43MlY2LjA2SDMuMjF2NS4yMWMwLDEuMi4zNCwxLjg4LDEuMzIsMS44OGEzLjkyLDMuOTIsMCwwLDAsMS0uMTJsLjA4LDEuMzJhNC4zLDQuMywwLDAsMS0xLjU2LjI0LDIuNDMsMi40MywwLDAsMS0xLjg5LS43NCwzLjU3LDMuNTcsMCwwLDEtLjY4LTIuNTFWNi4wNkgwVjQuNzNIMS41VjIuNDFaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNOC41MSw0LjczLDkuODksNi44Yy4zNi41NC42NiwxLDEsMS41OGguMDZjLjMyLS41OC42NC0xLjA4LDEtMS42bDEuMzYtMi4wNWgxLjg5TDExLjg0LDkuMzlsMy4zOSw1aC0ybC0xLjQyLTIuMTdjLS4zOC0uNTYtLjctMS4xLTEtMS42OGgwYy0uMzIuNTgtLjY2LDEuMS0xLDEuNjhsLTEuNCwyLjE3SDYuNEw5LjgzLDkuNDUsNi41Niw0LjczWiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE5LjMsMlY0LjczaDIuNTFWNi4wNkgxOS4zdjUuMjFjMCwxLjIuMzQsMS44OCwxLjMyLDEuODhhMy45MiwzLjkyLDAsMCwwLDEtLjEybC4wOCwxLjMyYTQuMyw0LjMsMCwwLDEtMS41Ni4yNCwyLjQzLDIuNDMsMCwwLDEtMS44OS0uNzQsMy41NywzLjU3LDAsMCwxLS42OC0yLjUxVjYuMDZoLTEuNVY0LjczaDEuNVYyLjQxWiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIzLjc4LDcuODhjMC0xLjI0LDAtMi4yMy0uMDgtMy4xNWgxLjU4bC4wOCwxLjY2aDBhMy43OSwzLjc5LDAsMCwxLDMuNDMtMS44N2MyLjMzLDAsNC4wOSwyLDQuMDksNC45MSwwLDMuNDctMi4xMSw1LjE5LTQuMzksNS4xOWEzLjM5LDMuMzksMCwwLDEtMy0xLjUyaDB2NS4yNUgyMy43OFptMS43MywyLjU3YTMuOTMsMy45MywwLDAsMCwuMDguNzIsMi43MSwyLjcxLDAsMCwwLDIuNjMsMi4wNWMxLjg1LDAsMi45My0xLjUyLDIuOTMtMy43MywwLTEuOTMtMS0zLjU5LTIuODctMy41OWEyLjgsMi44LDAsMCwwLTIuNjUsMi4xNywyLjg2LDIuODYsMCwwLDAtLjEyLjcyWiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTM2LjEsOS44N2EzLjA5LDMuMDksMCwwLDAsMy4zMSwzLjM1LDYuMzUsNi4zNSwwLDAsMCwyLjY3LS41bC4zLDEuMjZhNy44Miw3LjgyLDAsMCwxLTMuMjEuNmMtMywwLTQuNzUtMi00Ljc1LTQuODdTMzYuMTQsNC41MSwzOSw0LjUxYzMuMTUsMCw0LDIuNzcsNCw0LjU1YTYuNyw2LjcsMCwwLDEtLjA2LjgyWm01LjE1LTEuMjZjMC0xLjEyLS40Ni0yLjg1LTIuNDMtMi44NS0xLjc4LDAtMi41NSwxLjY0LTIuNjksMi44NVoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00NS4xMiw3LjM0YzAtMSwwLTEuODEtLjA4LTIuNjFoMS41NmwuMSwxLjZoMGEzLjU1LDMuNTUsMCwwLDEsMy4xOS0xLjgxYzEuMzQsMCwzLjQxLjgsMy40MSw0LjExdjUuNzZINTEuNThWOC44MUM1MS41OCw3LjI2LDUxLDYsNDkuMzQsNkEyLjQ5LDIuNDksMCwwLDAsNDcsNy43NmEyLjU0LDIuNTQsMCwwLDAtLjEyLjgydjUuOEg0NS4xMloiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik02MC4zMywxNC4zOGMwLS42Ni4wOC0xLjY0LjA4LTIuNDlWLjIyaDEuNzRWNi4yOGgwYTMuNiwzLjYsMCwwLDEsMy4yOS0xLjc3YzIuMzksMCw0LjA5LDIsNC4wNyw0LjkzLDAsMy40NS0yLjE3LDUuMTctNC4zMyw1LjE3QTMuNDQsMy40NCwwLDAsMSw2MiwxMi43OGgtLjA2bC0uMDgsMS42Wm0xLjgyLTMuODdhMy4yNywzLjI3LDAsMCwwLC4wOC42NCwyLjcxLDIuNzEsMCwwLDAsMi42MywyLjA1YzEuODMsMCwyLjkzLTEuNSwyLjkzLTMuNzEsMC0xLjkzLTEtMy41OS0yLjg3LTMuNTlhMi44LDIuOCwwLDAsMC0yLjY3LDIuMTUsMy40NCwzLjQ0LDAsMCwwLS4xLjcyWiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTcxLjc1LDcuNzRjMC0xLjE0LDAtMi4xMS0uMDgtM2gxLjU0bC4wNiwxLjg5aC4wOEEyLjksMi45LDAsMCwxLDc2LDQuNTFhMS45LDEuOSwwLDAsMSwuNS4wNlY2LjIyYTIuNjMsMi42MywwLDAsMC0uNi0uMDYsMi40NiwyLjQ2LDAsMCwwLTIuMzUsMi4yNSw0LjkzLDQuOTMsMCwwLDAtLjA4LjgydjUuMTVINzEuNzVaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNODAuMywyYTEuMDksMS4wOSwwLDAsMS0yLjE3LDAsMS4wNywxLjA3LDAsMCwxLDEuMS0xLjFBMSwxLDAsMCwxLDgwLjMsMlptLTIsMTIuMzZWNC43M0g4MC4xdjkuNjVaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNODMsNy4zNGMwLTEsMC0xLjgxLS4wOC0yLjYxaDEuNTZsLjEsMS42aDBhMy41NSwzLjU1LDAsMCwxLDMuMTktMS44MWMxLjM0LDAsMy40MS44LDMuNDEsNC4xMXY1Ljc2SDg5LjQ3VjguODFDODkuNDcsNy4yNiw4OC45LDYsODcuMjQsNmEyLjQ5LDIuNDksMCwwLDAtMi4zNSwxLjc5LDIuNTQsMi41NCwwLDAsMC0uMTIuODJ2NS44SDgzWiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEwMi4zOSw0LjczYzAsLjctLjA4LDEuNDgtLjA4LDIuNjVWMTNjMCwyLjIxLS40NCwzLjU3LTEuMzgsNC40MWE1LjEyLDUuMTIsMCwwLDEtMy41MSwxLjE2LDYuMjMsNi4yMywwLDAsMS0zLjIxLS44bC40NC0xLjM0YTUuNDUsNS40NSwwLDAsMCwyLjgzLjc2YzEuNzksMCwzLjExLS45NCwzLjExLTMuMzdWMTIuNzJoMGEzLjQ0LDMuNDQsMCwwLDEtMy4wNywxLjYyYy0yLjM5LDAtNC4xMS0yLTQuMTEtNC43MSwwLTMuMjcsMi4xMy01LjEzLDQuMzUtNS4xM2EzLjIxLDMuMjEsMCwwLDEsMywxLjY4aDBsLjA4LTEuNDZabS0xLjgyLDMuODFhMi40OSwyLjQ5LDAsMCwwLS4xLS44QTIuNTMsMi41MywwLDAsMCw5OCw1Ljg4Yy0xLjY3LDAtMi44NywxLjQyLTIuODcsMy42NSwwLDEuODksMSwzLjQ3LDIuODUsMy40N2EyLjU3LDIuNTcsMCwwLDAsMi40My0xLjc5LDMuMDYsMy4wNiwwLDAsMCwuMTQtLjk0WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEwNSwxMi41OGE0LjYsNC42LDAsMCwwLDIuMzEuN2MxLjI4LDAsMS44Ny0uNjQsMS44Ny0xLjQ0cy0uNS0xLjMtMS43OS0xLjc3Yy0xLjczLS42Mi0yLjU1LTEuNTgtMi41NS0yLjczLDAtMS41NiwxLjI2LTIuODMsMy4zMy0yLjgzYTQuODEsNC44MSwwLDAsMSwyLjM3LjZsLS40NCwxLjI4YTMuNzYsMy43NiwwLDAsMC0yLS41NmMtMSwwLTEuNjIuNi0xLjYyLDEuMzJzLjU4LDEuMTYsMS44MywxLjY0YzEuNjcuNjQsMi41MywxLjQ4LDIuNTMsMi45MSwwLDEuNy0xLjMyLDIuODktMy42MSwyLjg5YTUuNTEsNS41MSwwLDAsMS0yLjcxLS42NloiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMTgsNC43M2wyLjExLDUuN2MuMjIuNjQuNDYsMS40LjYyLDJoMGMuMTgtLjU4LjM4LTEuMzIuNjItMmwxLjkyLTUuNjZoMS44NWwtMi42Myw2Ljg4Yy0xLjI2LDMuMzEtMi4xMSw1LTMuMzEsNkE0Ljc1LDQuNzUsMCwwLDEsMTE3LDE4Ljc5bC0uNDQtMS40OGE0LjY1LDQuNjUsMCwwLDAsMS41NC0uODYsNS4zMyw1LjMzLDAsMCwwLDEuNDgtMiwxLjI1LDEuMjUsMCwwLDAsLjE0LS40MiwxLjUyLDEuNTIsMCwwLDAtLjEyLS40NmwtMy41Ny04Ljg5WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEzNS4yNyw5LjQ3YzAsMy41Ny0yLjQ3LDUuMTMtNC44MSw1LjEzLTIuNjEsMC00LjYzLTEuOTEtNC42My01LDAtMy4yMywyLjExLTUuMTMsNC43OS01LjEzUzEzNS4yNyw2LjUyLDEzNS4yNyw5LjQ3Wm0tNy42Ni4xYzAsMi4xMSwxLjIyLDMuNzEsMi45MywzLjcxczIuOTMtMS41OCwyLjkzLTMuNzVjMC0xLjY0LS44Mi0zLjcxLTIuODktMy43MVMxMjcuNjEsNy43NCwxMjcuNjEsOS41N1oiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNDUuNTUsMTEuNzVjMCwxLDAsMS44Ny4wOCwyLjYzaC0xLjU2TDE0NCwxMi44aDBhMy42MywzLjYzLDAsMCwxLTMuMTksMS43OWMtMS41MiwwLTMuMzMtLjg0LTMuMzMtNC4yM1Y0LjczaDEuNzV2NS4zNGMwLDEuODMuNTYsMy4wNywyLjE1LDMuMDdhMi41NCwyLjU0LDAsMCwwLDIuMzEtMS42LDIuNTcsMi41NywwLDAsMCwuMTYtLjlWNC43M2gxLjc1WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE0OC40Niw3Ljc0YzAtMS4xNCwwLTIuMTEtLjA4LTNoMS41NEwxNTAsNi42MmguMDhhMi45LDIuOSwwLDAsMSwyLjY3LTIuMTEsMS45LDEuOSwwLDAsMSwuNS4wNlY2LjIyYTIuNjMsMi42MywwLDAsMC0uNi0uMDYsMi40NiwyLjQ2LDAsMCwwLTIuMzUsMi4yNSw0LjkyLDQuOTIsMCwwLDAtLjA4LjgydjUuMTVoLTEuNzNaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTU5LDEyLjU4YTQuNiw0LjYsMCwwLDAsMi4zMS43YzEuMjgsMCwxLjg3LS42NCwxLjg3LTEuNDRzLS41LTEuMy0xLjc5LTEuNzdjLTEuNzMtLjYyLTIuNTUtMS41OC0yLjU1LTIuNzMsMC0xLjU2LDEuMjYtMi44MywzLjMzLTIuODNhNC44MSw0LjgxLDAsMCwxLDIuMzcuNmwtLjQ0LDEuMjhhMy43NiwzLjc2LDAsMCwwLTItLjU2Yy0xLDAtMS42Mi42LTEuNjIsMS4zMnMuNTgsMS4xNiwxLjgzLDEuNjRjMS42Ny42NCwyLjUzLDEuNDgsMi41MywyLjkxLDAsMS43LTEuMzIsMi44OS0zLjYxLDIuODlhNS41MSw1LjUxLDAsMCwxLTIuNzEtLjY2WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE2OS4wNiwyYTEuMDksMS4wOSwwLDAsMS0yLjE3LDBBMS4wNywxLjA3LDAsMCwxLDE2OCwuOTIsMSwxLDAsMCwxLDE2OS4wNiwyWm0tMiwxMi4zNlY0LjczaDEuNzV2OS42NVoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNzMuODgsMlY0LjczaDIuNTFWNi4wNmgtMi41MXY1LjIxYzAsMS4yLjM0LDEuODgsMS4zMiwxLjg4YTMuOTIsMy45MiwwLDAsMCwxLS4xMmwuMDgsMS4zMmE0LjMsNC4zLDAsMCwxLTEuNTYuMjQsMi40MywyLjQzLDAsMCwxLTEuODktLjc0LDMuNTcsMy41NywwLDAsMS0uNjgtMi41MVY2LjA2aC0xLjVWNC43M2gxLjVWMi40MVoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNzkuMjIsOS44N2EzLjA5LDMuMDksMCwwLDAsMy4zMSwzLjM1LDYuMzQsNi4zNCwwLDAsMCwyLjY3LS41bC4zLDEuMjZhNy44Miw3LjgyLDAsMCwxLTMuMjEuNmMtMywwLTQuNzUtMi00Ljc1LTQuODdzMS43MS01LjIxLDQuNTMtNS4yMWMzLjE1LDAsNCwyLjc3LDQsNC41NWE2LjcsNi43LDAsMCwxLS4wNi44MlptNS4xNS0xLjI2YzAtMS4xMi0uNDYtMi44NS0yLjQzLTIuODUtMS43OCwwLTIuNTUsMS42NC0yLjY5LDIuODVaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTk0LjU4LDJWNC43M2gyLjUxVjYuMDZoLTIuNTF2NS4yMWMwLDEuMi4zNCwxLjg4LDEuMzIsMS44OGEzLjkyLDMuOTIsMCwwLDAsMS0uMTJsLjA4LDEuMzJhNC4zLDQuMywwLDAsMS0xLjU2LjI0LDIuNDMsMi40MywwLDAsMS0xLjg5LS43NCwzLjU3LDMuNTcsMCwwLDEtLjY4LTIuNTFWNi4wNmgtMS41VjQuNzNoMS41VjIuNDFaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjA3LjY4LDkuNDdjMCwzLjU3LTIuNDcsNS4xMy00LjgxLDUuMTMtMi42MSwwLTQuNjMtMS45MS00LjYzLTUsMC0zLjIzLDIuMTEtNS4xMyw0Ljc5LTUuMTNTMjA3LjY4LDYuNTIsMjA3LjY4LDkuNDdabS03LjY2LjFjMCwyLjExLDEuMjIsMy43MSwyLjkzLDMuNzFzMi45My0xLjU4LDIuOTMtMy43NWMwLTEuNjQtLjgyLTMuNzEtMi44OS0zLjcxUzIwMCw3Ljc0LDIwMCw5LjU3WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIxNC4xMS4yMmgxLjc1VjE0LjM4aC0xLjc1WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIyMC43NywyYTEuMDksMS4wOSwwLDAsMS0yLjE3LDAsMS4wNywxLjA3LDAsMCwxLDEuMS0xLjFBMSwxLDAsMCwxLDIyMC43NywyWm0tMiwxMi4zNlY0LjczaDEuNzV2OS42NVoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMjMuNjYsMTQuMzhWNi4wNkgyMjIuM1Y0LjczaDEuMzZWNC4yN0E0LjU1LDQuNTUsMCwwLDEsMjI0Ljc4LjlhMy4zNiwzLjM2LDAsMCwxLDIuMzUtLjksNC4wOSw0LjA5LDAsMCwxLDEuNS4yOGwtLjI0LDEuMzZhMi42MiwyLjYyLDAsMCwwLTEuMTItLjIyYy0xLjUsMC0xLjg3LDEuMzItMS44NywyLjc5di41MmgyLjMzVjYuMDZIMjI1LjR2OC4zMloiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMzAsOS44N2EzLjA5LDMuMDksMCwwLDAsMy4zMSwzLjM1LDYuMzQsNi4zNCwwLDAsMCwyLjY3LS41bC4zLDEuMjZhNy44Miw3LjgyLDAsMCwxLTMuMjEuNmMtMywwLTQuNzUtMi00Ljc1LTQuODdzMS43MS01LjIxLDQuNTMtNS4yMWMzLjE1LDAsNCwyLjc3LDQsNC41NWE2LjcsNi43LDAsMCwxLS4wNi44MlptNS4xNS0xLjI2YzAtMS4xMi0uNDYtMi44NS0yLjQzLTIuODUtMS43OCwwLTIuNTUsMS42NC0yLjY5LDIuODVaIi8+PC9nPjwvZz48L3N2Zz4=" /> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| $(document).ready(function () { | |
| $('#base').plaxify() | |
| $('#logo').plaxify({"xRange":10,"yRange":10}) | |
| $('#text').plaxify({"xRange":20,"yRange":20}) | |
| $('#bubble').plaxify({"xRange":50,"yRange":50}) | |
| $('#texthl').plaxify({"xRange":30,"yRange":30}) | |
| $('#title').plaxify({"xRange":30,"yRange":30}) | |
| $.plax.enable() | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment