"slide"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: