Skip to content

Instantly share code, notes, and snippets.

@TheBrenny

TheBrenny/plaxify.css

Last active July 31, 2016 16:34
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 TheBrenny/80661184b586d247f75eddeb4decd4f8 to your computer and use it in GitHub Desktop.
Save TheBrenny/80661184b586d247f75eddeb4decd4f8 to your computer and use it in GitHub Desktop.
Download ZIP
Plax without silly jQuery bloat!
Raw
plaxify.css
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;}
Raw
plaxify.html
<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>
Raw
plaxify.js
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