"parallax"
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/agathaco/pen/RZPPjx?depth=everything&order=popularity&page=17&q=parallax&show_forks=false" /> <style class="cp-pen-styles">html { background: #1c2f36; } body { margin: 0; width: 100vw; min-height: 100vh; padding: 0; margin: 0; overflow: hidden; } body * { position: absolute; } .main { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; left: 50%; margin: 0; background-color: #304d5b; width: 400px; height: 400px; -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); position: absolute; } .moon-group { width: 200px; height: 200px; top: 100px; left: 100px; z-index: 3; } .moon { position: absolute; border-radius: 50%; width: 170px; height: 170px; right: -30px; top: -30px; box-shadow: -45px 45px 0 40px #ffd7a3; z-index: 2; } .moon-shadow { position: absolute; width: 200px; height: 215px; -webkit-transform: rotate(225deg); transform: rotate(225deg); background-color: rgba(28, 47, 54, 0.4); top: 100px; left: 100px; -webkit-clip-path: polygon(0% 0%, 100% 0, 65% 50%, 85% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0, 65% 50%, 85% 100%, 0% 100%); z-index: 1; } .cloud-group-1 { width: 170px; height: 35px; bottom: 100px; left: 50px; z-index: 4; } .cloud-group-2 { width: 170px; height: 35px; top: 140px; left: 120px; z-index: 2; } .cloud { background-color: #7eacc4; width: 170px; height: 35px; border-top-left-radius: 50px; border-top-right-radius: 50px; z-index: 2; } .cloud:after { content: ''; position: absolute; border-radius: 50%; width: 45px; height: 45px; background-color: #7eacc4; top: -15px; right: 20px; box-shadow: -40px -10px 0 8px #7eacc4, -80px -5px 0 1px #7eacc4; } .cloud-group-1 .cloud-shadow { top: 35px; right: -125px; z-index: 3; } .cloud-group-2 .cloud-shadow { top: 35px; right: -125px; z-index: -1; } .cloud-shadow { position: absolute; height: 250px; width: 170px; -webkit-transform: skew(45deg); transform: skew(45deg); background-color: rgba(28, 47, 54, 0.3); } .stars { position: absolute; top: 0; left: 0; right: 0; margin: auto; height: 100%; z-index: 1; height: 400px; width: 400px; } .stars .star { border-radius: 50%; background-color: #ffedd6; opacity: 0.75; } .stars .star:nth-of-type(1) { top: 384px; left: 8px; width: 2px; height: 2px; } .stars .star:nth-of-type(2) { top: 153px; left: 29px; width: 1px; height: 1px; } .stars .star:nth-of-type(3) { top: 128px; left: 303px; width: 5px; height: 5px; } .stars .star:nth-of-type(4) { top: 382px; left: 76px; width: 6px; height: 6px; } .stars .star:nth-of-type(5) { top: 177px; left: 237px; width: 4px; height: 4px; } .stars .star:nth-of-type(6) { top: 290px; left: 220px; width: 1px; height: 1px; } .stars .star:nth-of-type(7) { top: 78px; left: 137px; width: 3px; height: 3px; } .stars .star:nth-of-type(8) { top: 51px; left: 56px; width: 10px; height: 10px; } .stars .star:nth-of-type(9) { top: 168px; left: 251px; width: 5px; height: 5px; } .stars .star:nth-of-type(10) { top: 351px; left: 95px; width: 8px; height: 8px; } .stars .star:nth-of-type(11) { top: 352px; left: 135px; width: 7px; height: 7px; } .stars .star:nth-of-type(12) { top: 50px; left: 335px; width: 1px; height: 1px; } .stars .star:nth-of-type(13) { top: 154px; left: 244px; width: 1px; height: 1px; } .stars .star:nth-of-type(14) { top: 399px; left: 349px; width: 5px; height: 5px; } .stars .star:nth-of-type(15) { top: 276px; left: 184px; width: 5px; height: 5px; } .stars .star:nth-of-type(16) { top: 59px; left: 50px; width: 3px; height: 3px; } .stars .star:nth-of-type(17) { top: 166px; left: 149px; width: 3px; height: 3px; } .stars .star:nth-of-type(18) { top: 247px; left: 357px; width: 2px; height: 2px; } .stars .star:nth-of-type(19) { top: 150px; left: 348px; width: 3px; height: 3px; } .stars .star:nth-of-type(20) { top: 89px; left: 351px; width: 2px; height: 2px; } .stars .star:nth-of-type(21) { top: 155px; left: 314px; width: 8px; height: 8px; } .stars .star:nth-of-type(22) { top: 308px; left: 356px; width: 4px; height: 4px; } .stars .star:nth-of-type(23) { top: 336px; left: 69px; width: 4px; height: 4px; } .stars .star:nth-of-type(24) { top: 168px; left: 72px; width: 9px; height: 9px; } .stars .star:nth-of-type(25) { top: 184px; left: 226px; width: 2px; height: 2px; } .stars .star:nth-of-type(26) { top: 247px; left: 11px; width: 7px; height: 7px; } .stars .star:nth-of-type(27) { top: 349px; left: 240px; width: 1px; height: 1px; } .stars .star:nth-of-type(28) { top: 163px; left: 146px; width: 5px; height: 5px; } .stars .star:nth-of-type(29) { top: 298px; left: 183px; width: 8px; height: 8px; } .stars .star:nth-of-type(30) { top: 24px; left: 45px; width: 1px; height: 1px; } .stars .star:nth-of-type(31) { top: 174px; left: 341px; width: 5px; height: 5px; } .stars .star:nth-of-type(32) { top: 278px; left: 187px; width: 6px; height: 6px; } .stars .star:nth-of-type(33) { top: 160px; left: 155px; width: 6px; height: 6px; } .stars .star:nth-of-type(34) { top: 350px; left: 382px; width: 7px; height: 7px; } .stars .star:nth-of-type(35) { top: 237px; left: 107px; width: 3px; height: 3px; } .stars .star:nth-of-type(36) { top: 385px; left: 232px; width: 3px; height: 3px; } .stars .star:nth-of-type(37) { top: 387px; left: 334px; width: 8px; height: 8px; } .stars .star:nth-of-type(38) { top: 227px; left: 301px; width: 2px; height: 2px; } .stars .star:nth-of-type(39) { top: 173px; left: 51px; width: 8px; height: 8px; } .stars .star:nth-of-type(40) { top: 139px; left: 37px; width: 5px; height: 5px; } </style></head><body> <div class="main"> <div class="moon-group"> <div class="moon"></div> <div class="moon-shadow"></div> </div> <div class="cloud-group-1"> <div class="cloud cloud-1"></div> <div class="cloud-shadow"></div> </div> <div class="cloud-group-2"> <div class="cloud cloud-2"></div> <div class="cloud-shadow"></div> </div> <div class="stars"> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-1.11.3.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script> <script >$.fn.parallax = function ( resistance, mouse ) { $el = $( this ); TweenLite.to( $el, 0.2, { x : -(( mouse.clientX - (window.innerWidth/2) ) / resistance ), y : -(( mouse.clientY - (window.innerHeight/2) ) / resistance ) }); }; $('.main').mousemove(function(e) { $('.stars').parallax(0, e); $('.moon-group').parallax(30, e); $('.cloud-group-1').parallax(-10, e); $('.cloud-group-2').parallax(-30, e); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: