<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mimikos/pen/eRqzaq?depth=everything&order=popularity&page=13&q=parallax&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">body{background-color:#161719;text-align:center;overflow-x:hidden;}
.collage_container{
display:inline-block;
width:800px;
height:500px;
position:relative;
margin-top:100px;
}
.collage_piece{
overflow:hidden;
position:absolute;
box-sizing:border-box;
background-repeat: no-repeat;
}
.level_1{
z-index:1;
-webkit-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.55);
box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.55);
}
.level_2{
z-index:2;
-webkit-box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.24);
box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.24);
}
.link{
color:grey;
display:inline-block;
position:absolute;
bottom:30px;
right:30px;
text-decoration:none;
}</style></head><body>
<div class="collage_container"></div>
<a href="https://codepen.io/mimikos/pen/vJBENm/" class="link" target="_blank">Collage Perspective (#2)</a>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script >var options = {
container:document.querySelector(".collage_container"),
piecesNum:50,
imgSrc : "https://unsplash.it/800/500?image=433"
}
function ImageCollage(defaults)
{
var container = defaults.container;
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;
var containerStyle = container.currentStyle || window.getComputedStyle(container);
var piecesNum = defaults.piecesNum;
var levelIndex = Math.floor(piecesNum * 0.75);
var maxsizeX = Math.round(container.offsetWidth/2);
var maxsizeY = Math.round(container.offsetHeight/2);
var offset = 15;
var strength = 3;
for (var i=0; i < piecesNum; i++)
{if (window.CP.shouldStopExecution(1)){break;}
var piece = document.createElement('div');
piece.className = "collage_piece";
if(i < levelIndex){
piece.classList += " level_1";
piece.dataset.level = 1;
piece.style.width = getRandomInt(100, maxsizeX) + "px";
piece.style.height = getRandomInt(100, maxsizeY) + "px";
}else{
piece.classList += " level_2";
piece.dataset.level = 2;
piece.style.width = getRandomInt(40, maxsizeX/2) + "px";
piece.style.height = getRandomInt(40, maxsizeY/2) + "px";
}
piece.style.backgroundImage = "url("+defaults.imgSrc+")";
container.appendChild(piece);
piece.dataset.offset = getRandomInt(strength, strength*2*piece.dataset.level);
piece.style.backgroundSize = ""+ containerWidth +"px "+ containerHeight +"px";
piece.style.left = getRandomInt(0, containerWidth-piece.offsetWidth) + "px";
piece.style.top = getRandomInt(0, containerHeight-piece.offsetHeight) + "px";
piece.style.backgroundPosition = -(piece.offsetLeft) + "px " + (-piece.offsetTop) + "px";
console.log(containerStyle.marginLeft, containerStyle.marginTop);
}
window.CP.exitedLoop(1);
window.addEventListener("mousemove", function(e){
var pieces = container.querySelectorAll(".collage_piece");
var xpos, ypos, mouseX, mouseY, levelNum, off;
if (!mie) {
mouseX = e.pageX;
mouseY = e.pageY;
}
else {
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
for (var p=0, l=pieces.length; p < l ; p++)
{if (window.CP.shouldStopExecution(2)){break;}
levelNum = pieces[p].dataset.level;
off = pieces[p].dataset.offset;
xpos = ( -mouseX/2 + containerWidth/2) / (off - levelNum);
ypos = ( -mouseY/2 + containerHeight/2) / (off - levelNum);
TweenMax.set(pieces[p], {x:xpos, y:ypos});
}
window.CP.exitedLoop(2);
})
var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
ImageCollage(options);
//# sourceURL=pen.js
</script>
</body></html>
