Skip to content

Instantly share code, notes, and snippets.

@0b01

0b01/parallax.html

Created March 6, 2017 03:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 0b01/47605a25fdb72f3e541fff4f80b3c603 to your computer and use it in GitHub Desktop.
Save 0b01/47605a25fdb72f3e541fff4f80b3c603 to your computer and use it in GitHub Desktop.
Download ZIP
parallax.html
Raw
parallax.html
<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