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