Last active
July 31, 2016 16:34
-
-
Save TheBrenny/80661184b586d247f75eddeb4decd4f8 to your computer and use it in GitHub Desktop.
Plax without silly jQuery bloat!
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
span{ | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
text-shadow: 0 0 4px #FFFFFF; | |
font-size: 30px; | |
font-weight:bold; | |
font-family: Helvetica, Arial, sans-serif; | |
} | |
#l1{z-index: 18;} | |
#l2{z-index: 17;} | |
#l3{z-index: 16;} | |
#l4{z-index: 15;} | |
#l5{z-index: 14;} | |
#l6{z-index: 13;} | |
#l7{z-index: 12;} | |
#l8{z-index: 11;} | |
#l9{z-index: 10;} | |
#l10{z-index: 9;} | |
#l11{z-index: 8;} | |
#l1{z-index: 7;} | |
#l1{z-index: 6;} | |
#l12{z-index: 5;} | |
#l13{z-index: 4;} | |
#l14{z-index: 3;} | |
#l15{z-index: 2;} | |
#l16{z-index: 1;} | |
#l17{z-index: 0;} |
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> | |
<link rel="stylesheet" type="text/css" href="plaxify.css"> | |
</head> | |
<body> | |
<span id="l1" data-range="360">F</span> | |
<span id="l2" data-range="320">u</span> | |
<span id="l3" data-range="280">c</span> | |
<span id="l4" data-range="240">k</span> | |
<span id="l5" data-range="200">Y</span> | |
<span id="l6" data-range="160">e</span> | |
<span id="l7" data-range="120">a</span> | |
<span id="l8" data-range="80">h</span> | |
<span id="l9" data-range="40">P</span> | |
<span id="l10" data-range="1">a</span> | |
<span id="l11" data-range="40" data-invert="true">r</span> | |
<span id="l12" data-range="80" data-invert="true">t</span> | |
<span id="l13" data-range="120" data-invert="true">y</span> | |
<span id="l14" data-range="160" data-invert="true">H</span> | |
<span id="l15" data-range="200" data-invert="true">a</span> | |
<span id="l16" data-range="240" data-invert="true">r</span> | |
<span id="l17" data-range="280" data-invert="true">d</span> | |
<script src="plaxify.js"></script> | |
</body> | |
</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
var Plaxify = function() { | |
var self = this; | |
this.layers = []; | |
this.docWidth = window.innerWidth, | |
this.docHeight = window.innerHeight; | |
window.addEventListener("resize", function() { | |
self.docWidth = window.innerWidth; | |
self.docHeight = window.innerHeight; | |
}); | |
}; | |
Plaxify.prototype.addLayer = function(el, params) { | |
var layer = {"xRange":0,"yRange":0,"invert":false}; | |
var position = {left: el.offsetLeft, top: el.offsetTop}; | |
for(var param in params) layer[param] = params[param] | |
layer.obj = el; | |
layer.startX = position.left; | |
layer.startY = position.top; | |
if(layer.invert == false){ | |
layer.startX -= Math.floor(layer.xRange/2) | |
layer.startY -= Math.floor(layer.yRange/2) | |
} else { | |
layer.startX += Math.floor(layer.xRange/2) | |
layer.startY += Math.floor(layer.yRange/2) | |
} | |
this.layers.push(layer) | |
} | |
Plaxify.prototype.listLayers = function() { | |
console.log(this.layers); | |
}; | |
Plaxify.prototype.enable = function() { | |
document.addEventListener("mousemove", this.mousemoveCallback.bind(this)); | |
}; | |
Plaxify.prototype.disable = function() { | |
document.removeEventListener("mousemove", this.mousemoveCallback.bind(this)); | |
}; | |
Plaxify.prototype.mousemoveCallback = function(e) { | |
var x = e.clientX; | |
var y = e.clientY; | |
var hRatio = Math.round((x/this.docWidth)*100)/100; | |
var vRatio = Math.round((y/this.docHeight)*100)/100; | |
for(var i = 0; i < this.layers.length; i++) { | |
var layer = this.layers[i]; | |
if(!!layer.invert) { | |
layer.obj.style.left = layer.startX - (layer.xRange * hRatio) + "px"; | |
layer.obj.style.top = layer.startY - (layer.yRange * vRatio) + "px"; | |
} else { | |
layer.obj.style.left = layer.startX + (layer.xRange * hRatio) + "px"; | |
layer.obj.style.top = layer.startY + (layer.yRange * vRatio) + "px"; | |
} | |
} | |
}; | |
var p = new Plaxify(); | |
var spans = document.querySelectorAll("span"); | |
for(var i = 0; i < spans.length; i++) { | |
var span = spans[i]; | |
var invert = span.dataset.invert || false; | |
var range = parseInt(span.dataset.range); | |
p.addLayer(span, {"xRange":range,"yRange":range,"invert":invert}); | |
} | |
p.enable(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment