#scene
.sky
.stars.layer(data-depth=0.3)
- for (var i = 1; i <= 80; i++)
.star
.container
.top.layer(data-depth=0.1)
.light-house
.top-triangle
.top-triangle-circle-top
.top-triangle-circle-middle
.top-triangle-circle
.glow.layer(data-depth=0.01)
.shining-lights-container
.shining-light-left
.shining-light-right
.top-ledge
.top-bars
.top-bar-1.topbar
.top-bar-2.topbar
.top-bar-3.topbar
.top-bar-4.topbar
.top-bar-5.topbar
.top-bar-6.topbar
.top-railings
.top-railing-1.railing
.top-railing-2.railing
.top-railing-3.railing
.top-railing-4.railing
.top-railing-5.railing
.top-railing-6.railing
.mid-ledge
.mid-railings
.overlay
.mid-railings-rail
.mid-rail.mid-rail-1
.mid-rail.mid-rail-2
.mid-rail.mid-rail-3
.mid-rail.mid-rail-5
.mid-rail.mid-rail-6
.left-mid-railings
.right-mid-railings
.panel-container#rotate-x
.left-mid-roof
.left-mid-roof-2
.panel
.light
.right-attachment
.right-roof
.right-building
.lighthouse-lights
.light-right-top.light
.light-left-middle.light
.lighthouse-bottom-lights
.light-right-bottom.light
.light-left-bottom.light
.back-rocks
.back-rock-1
.back-rock-2
.back-rock-3
.front-rocks
.front-rock-1
.satellite
.front-rock-2
.front-rock-3
.shooting-stars
.glow-shine-container.layer(data-depth=0.1)
.glow-shine-5.shine-circle
.glow-shine-4.shine-circle
.glow-shine-3.shine-circle
.glow-shine-1.shine-circle
.glow-shine-2.shine-circle
.bottom
.ocean
.top-tier-1.ocean-layer
.top-tier-2.ocean-layer
.top-tier-3.ocean-layer
.top-tier-4.ocean-layer
.top-tier-5.ocean-layer
#made-by-cameron
.made-by-twitter
| 🐦 Follow me on
a(href="https://twitter.com/cameronjfitz" target="_BLANK")
| Twitter!
.made-by-author
| Made by
a(href="https://cameronfitzwilliam.com" target="_BLANK")
| Cameron Fitzwilliam
View Compiled
@import "compass";
// Colour Variables
$mainBlack: #141912;
$mainGrey: #252b21;
$lighthouseLight: #f9f04c;
// Timing variables
$glowLightTiming: 6s;
$lightTiming: 6s;
$oceanLayer: 4s;
body {
padding: 0;
margin: 0px;
overflow: hidden;
}
.container {
position: absolute;
height: 100vh;
width: 100%;
}
.top {
position: relative;
height: 75vh;
width: 100%;
}
// Stars
.stars {
top: 0;
left: 0;
right: 0;
height: 80%;
z-index: -1;
& > * {
position: absolute;
background: rgba(241, 241, 241, 1);
@include border-radius(50px);
animation: twinkle 2s infinite;
transition-timing-function: ease-in-out;
}
@for $i from 1 through (20) {
$top: random(100);
$left: random(100);
$size: random(6)+0px;
.star:nth-of-type(#{$i}) {
position: relative;
top: $top * 1%;
left: $left * 1%;
width: $size;
height: $size;
animation-delay: random(5) + s;
}
}
@for $i from 21 through (40) {
$top: random(100);
$left: random(100);
$size: random(6)+0px;
.star:nth-of-type(#{$i}) {
position: relative;
top: $top * 1%;
left: $left * 1%;
width: $size;
height: $size;
animation-delay: random(5) + s;
}
}
}
@keyframes twinkle {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
// Twinkle Stars
.twinkle-stars {
top: 0;
left: 0;
right: 0;
height: 100%;
z-index: -1;
& > * {
position: absolute;
animation: twinkle-stars 5s infinite;
transition-timing-function: ease;
}
@for $i from 1 through (20) {
$top: random(400)+px;
$left: random(1200)+px;
$size: random(6)+0px;
.twinkle-star:nth-of-type(#{$i}) {
top: $top;
left: $left;
width: $size;
height: $size;
animation-delay: random(5) + s;
}
.twinkle-up {
position: relative;
width: 1px;
height: 15px;
background: #fff;
}
.twinkle-side {
position: absolute;
width: 17px;
height: 1px;
top: 6px;
left: -8px;
background: #fff;
border-radius: 10px;
}
}
@for $i from 21 through (40) {
$top: random(400)+px;
$right: random(1200)+px;
$size: random(6)+0px;
.star:nth-of-type(#{$i}) {
top: $top;
right: $right;
width: $size;
height: $size;
animation-delay: random(5) + s;
}
}
}
@keyframes twinkle-stars {
0% {
opacity: 0.6;
transform: scale(1.0);
}
50% {
opacity: 0.3;
transform: scale(1.3);
}
100% {
opacity: 0.6;
transform: scale(1.0);
}
}
.sky {
position: fixed;
height: 100vh;
width: 100%;
background-color: #c5cfb7; // Old browsers
@include filter-gradient(#c5cfb7, #082d47, horizontal); // IE6-9 fallback on horizontal gradient
@include background-image(radial-gradient(center, ellipse cover, #c5cfb7 0%,#84ad98 20%,#5f9986 39%,#5f9986 50%,#5f9986 60%,#4a8974 72%,#326565 84%,#082d47 100%));
}
.right-attachment {
position: absolute;
height: 100px;
width: 150px;
background: $mainBlack;
left: 20px;
top: -20px;
}
.right-roof {
position: absolute;
height: 20px;
width: 140px;
background: $mainBlack;
left: 11px;
top: -20px;
@include transform(skew(50deg));
}
.satellite {
position: absolute;
height: 60px;
width: 2px;
background: $mainBlack;
left: 90px;
top: -40px;
}
.back-rocks {
position: absolute;
width: 480px;
height: 50px;
left: -130px;
bottom: -47px;
}
.back-rock-1 {
position: absolute;
width: 68px;
height: 60px;
background: $mainGrey;
left: 0px;
bottom: -30px;
@include border-radius(100%);
}
.back-rock-2 {
position: absolute;
width: 70px;
height: 70px;
background: $mainGrey;
left: 68%;
bottom: -30px;
@include border-radius(100%);
}
.back-rock-3 {
position: absolute;
width: 55px;
height: 55px;
background: $mainGrey;
left: 88%;
bottom: -30px;
@include border-radius(100%);
}
.front-rocks {
position: absolute;
bottom: -90px;
left: -145px;
height: 100px;
width: 350px;
}
.front-rock-1 {
position: absolute;
left: 50px;
height: 150px;
width: 180px;
background: $mainBlack;
@include border-radius(100%);
}
.front-rock-2 {
position: absolute;
bottom: 0px;
left: 240px;
height: 100px;
width: 150px;
background: $mainBlack;
@include border-radius(100%);
}
.front-rock-3 {
position: absolute;
bottom: -22px;
left: 365px;
height: 100px;
width: 90px;
background: $mainBlack;
@include border-radius(100%);
}
.lighthouse {
}
.overlay {
position: absolute;
height: 40px;
width: 42px;
background: #141b11;
top: 54px;
left: -19px;
}
.panel-container {
width: 100%;
height: 307px;
border: 0px solid #CCC;
margin: 0 0px;
position: absolute;
-moz-transform: perspective(300px);
-ms-transform: perspective(300px);
-webkit-transform: perspective(300px);
transform: perspective(300px);
left: 0px;
bottom: -12px;
/* left: 30vw; */
}
.left-mid-roof {
position: absolute;
height: 35px;
width: 100px;
background: $mainBlack;
bottom: 0%;
left: -16px;
}
.left-mid-roof-2 {
position: absolute;
height: 5px;
width: 70px;
background: $mainBlack;
bottom: 18%;
left: -11px;
@include border-radius(10%);
}
#rotate-x .panel {
background-size: 100%;
background: $mainBlack;
width: 50px;
height: 100%;
min-height: 220px;
margin: auto;
-moz-transform: perspective(329px) rotateX(44deg) translate3d(0px, 0px, 0px);
-ms-transform: perspective(329px) rotateX(44deg) translate3d(0px, 0px, 0px);
-webkit-transform: perspective(329px) rotateX(44deg) translate3d(0px, 0px, 0px);
transform: perspective(329px) rotateX(44deg) translate3d(0px, 0px, 0px);
}
.top-triangle {
padding-top: 7px;
position: relative;
height: 0px;
width: 3px;
bottom: 262px;
left: 3px;
background: rgba(0, 128, 0, 0);
border-left: 20px rgba(0, 128, 0, 0) solid;
border-right: 23px rgba(0, 128, 0, 0) solid;
border-bottom: 18px #141b11 solid;
border-top: 3px rgba(0, 128, 0, 0) solid;
border-bottom-right-radius: 28%;
border-bottom-left-radius: 28%;
opacity: 0.98;
}
.top-triangle-circle-middle {
position: absolute;
height: 2px;
width: 9.5px;
background: $mainBlack;
bottom: 0px;
left: -3px;
}
.top-triangle-circle {
position: relative;
height: 8px;
width: 8px;
bottom: 17px;
left: -2.5px;
background: $mainBlack;
border-radius: 100%;
}
.top-triangle-circle-top {
position: relative;
height: 8px;
width: 6px;
bottom: 3px;
left: -1.5px;
background: $mainBlack;
}
.light-house {
position: absolute;
bottom: 40px;
left: 46vw;
}
.mid-railings-rail {
position: absolute;
height: 10px;
width: 55px;
top: 72px;
left: -26px;
@include border-top-left-radius(2px);
@include border-top-right-radius(2px);
border: 1px solid $mainBlack;
}
.mid-rail {
position: absolute;
width: 1px;
height: 10px;
background: $mainBlack;
}
.mid-rail-1 {
left: 2px;
}
.mid-rail-2 {
left: 4px;
}
.mid-rail-3 {
left: 6px;
}
.mid-rail-5 {
left: 49px;
}
.mid-rail-6 {
left: 52px;
}
.left-mid-railings {
position: absolute;
top: 80px;
left: -28px;
border-left: 26px rgba(0, 128, 0, 0.0) solid;
border-right: 15px rgba(0, 128, 0, 0) solid;
border-bottom: 15px #141b11 solid;
border-top: 0px rgba(0, 128, 0, 0) solid;
border-bottom-right-radius: 0%;
border-bottom-left-radius: 100%;
}
.right-mid-railings {
position: absolute;
top: 80px;
left: -8px;
border-left: 26px rgba(0, 128, 0, 0.0) solid;
border-right: 15px rgba(0, 128, 0, 0) solid;
border-bottom: 15px #141b11 solid;
border-top: 0px rgba(0, 128, 0, 0) solid;
border-bottom-right-radius: 100%;
border-bottom-left-radius: 0%;
}
.top-ledge {
position: absolute;
height: 8px;
width: 50px;
top: 55px;
left: -23px;
background-color: $mainBlack;
@include border-bottom-right-radius(100%);
@include border-bottom-left-radius(100%);
}
.shining-lights-container {
position: absolute;
height: 100px;
width: 800px;
left: -399px;
top: -39px;
@include animation-properties((animation: left-to-right, animation-duration: $lightTiming, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: linear));
}
@keyframes left-to-right {
0% {
transform: rotateY(0deg);
opacity: 1;
}
50% {
transform: rotateY(-180deg);
left: -393px;
opacity: 0.7;
}
100% {
transform: rotateY(0deg);
opacity: 1;
}
}
.shining-light-left {
position: absolute;
height: 46px;
width: 70%;
@include background-image(linear-gradient(left, rgba(249,245,159,1) 0% ,rgba(249,245,159,0) 100%));
opacity: 0.7;
float: left;
top: 57px;
left: 10px;
@include transform(perspective(529px) rotateX(0deg) rotateY(-120deg) rotate(0deg));
}
.shining-light-right {
position: absolute;
height: 46px;
left: 236px;
width: 70%;
top: 56px;
@include background-image(linear-gradient(right, rgba(249,245,159,1) 0% ,rgba(249,245,159,0) 100%));
@include transform(perspective(529px) rotateX(180deg) rotateY(-120deg) rotate(0deg) skew(1deg));
}
.glow-shine-container {
position: absolute;
height: 350px;
width: 350px;
left: -150px !important;
top: -398px !important;
@include border-radius(100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(214,205,112,0.6) 0%, rgba(211,206,160,0) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(214,205,112,0.6) 0%,rgba(211,206,160,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(214,205,112,0.6) 0%,rgba(211,206,160,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6cd70', endColorstr='#66d3cea0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
@include animation-properties((animation: glowing, animation-duration: $glowLightTiming, animation-iteration-count: infinite, animation-delay: 1s, animation-direction: forwards, default-animation-timing-function: linear));
}
@keyframes glowing {
0% {
@include transform(scale(1));
}
50% {
@include transform(scale(1.1));
}
100% {
@include transform(scale(1));
}
}
.shine-circle {
@include border-radius(100%);
}
.glow-shine-1 {
position: absolute;
height: 30%;
width: 30%;
background: #edea89;
top: 35%;
left: 35%;
opacity: 0.2;
}
.glow-shine-2 {
position: relative;
height: 10%;
width: 10%;
background: #edea89;
margin: auto;
top: 45%;
opacity: 0.1;
@include animation-properties((animation: glowing-shine-1, animation-duration: $glowLightTiming, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: ease-in));
}
@keyframes glowing-shine-1 {
0% {
@include box-shadow(0px 0px 0px #edea89);
opacity: 0.6;
@include transform(scale(1));
}
50% {
@include box-shadow(0px 0px 32px #edea89);
opacity: 1;
@include transform(scale(1.2));
}
100% {
@include box-shadow(0px 0px 0px #edea89);
opacity: 0.6;
@include transform(scale(1));
}
}
.glow-shine-3 {
position: absolute;
height: 50%;
width: 50%;
background: #edea89;
top: 25%;
left: 25%;
opacity: 0.05;
}
.glow-shine-4 {
position: absolute;
height: 70%;
width: 70%;
background: #edea89;
top: 15%;
left: 15%;
opacity: 0.05;
}
.glow-shine-5 {
position: absolute;
height: 100%;
width: 100%;
background: #edea89;
top: 0%;
left: 0%;
opacity: 0.05;
}
.glow-shine-narrow-left {
position: absolute;
height: 360px;
width: 20px;
background: $lighthouseLight;
left: 0px;
top: 0px;
@include animation-properties((animation: pulsate, animation-duration: $lightTiming, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: linear));
@include transform(perspective(529px) rotateX(0deg) rotateY(-120deg) rotate(90deg));
}
.mid-ledge {
position: absolute;
height: 8px;
width: 52px;
top: 100px;
left: -24px;
background-color: $mainBlack;
@include border-bottom-right-radius(100%);
@include border-bottom-left-radius(100%);
}
.lighthouse-lights {
position: absolute;
height: 110px;
top: -130px;
width: 43px;
right: 0px;
}
.light {
background: $lighthouseLight;
@include border-top-right-radius(20px);
@include border-top-left-radius(20px);
@include box-shadow(rgba(#FFEB3B, 1) 0px 0 22px, rgba(252, 250, 185, 0.44) 0 0 3px 1px inset);
}
.light-right-top {
position: relative;
height: 26px;
top: 0px;
width: 10px;
right: -24px;
}
.light-left-middle {
position: relative;
height: 26px;
top: 30px;
width: 10px;
right: -7px;
}
.light-left-bottom {
position: absolute;
height: 18px;
top: -15px;
width: 8px;
right: -22px;
@include border-radius(0px);
}
.light-right-bottom {
position: absolute;
height: 18px;
top: -15px;
width: 8px;
right: -35px;
@include border-radius(0px);
}
.glow {
position: absolute;
height: 22px;
width: 22px;
background-color: #fbfae1; // Old browsers
@include filter-gradient(#fbfae1, #fffb6c, horizontal); // IE6-9 fallback on horizontal gradient
@include background-image(radial-gradient(center, ellipse cover, #fbfae1 0%,#fffb6c 100%));
top: 28px !important;
left: -8px !important;
@include border-radius(100%);
@include box-shadow(rgba(#FFEB3B, 1) 0px 0 22px, rgba(252, 250, 185, 0.44) 0 0 3px 1px inset);
@include animation-properties((animation: glowing-ball, animation-duration: $lightTiming, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: linear));
}
@keyframes glowing-ball {
0% {
opacity: 0.3;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
.topbar {
position: absolute;
height: 120px;
width: 2px;
background: $mainBlack;
opacity: 0.8;
}
.top-bars {
opacity: 0.8;
}
.top-bar-1 {
left: -14px;
}
.top-bar-2 {
left: -8px;
}
.top-bar-3 {
left: -1px;
}
.top-bar-4 {
left: 5.5px;
}
.top-bar-5 {
left: 12px;
}
.top-bar-6 {
left: 18px;
}
.top-railings {
position: absolute;
height: 8px;
width: 38px;
top: 45px;
left: -19px;
border: 2px solid #141b11;
@include border-radius(2px);
opacity: 0.8;
}
.railing {
position: absolute;
height: 10px;
width: 2px;
background: $mainBlack;
top: -1px;
}
.top-railing-1 {
left: 6px;
}
.top-railing-2 {
left: 12px;
}
.top-railing-3 {
left: 19px;
}
.top-railing-4 {
left: 25px;
}
.top-railing-5 {
left: 32px;
}
.top-railing-6 {
left: 35px;
}
// Bottom
.bottom {
position: absolute;
height: 25vh;
width: 100%;
left: 0% !important;
top: 75% !important;
}
.top-tier-1 {
position: absolute;
width: 100%;
left: 0%;
height: 3vh;
top: 0vh;
@include filter-gradient(#c6d1bf, #235161, horizontal); // IE6-9 fallback on horizontal gradient
@include background-image(radial-gradient(center, ellipse cover, #c6d1bf 0%,#235161 100%));
background-size: 100%;
background-attachment: fixed;
@include animation-properties((animation: top-tier-1, animation-duration: $oceanLayer, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: linear));
}
@keyframes top-tier-1 {
0% {
height: 3vh;
}
50% {
height: 5vh;
}
100% {
height: 3vh;
}
}
.top-tier-2 {
position: absolute;
top: 3vh;
width: 100%;
height: 3vh;
float: left;
background-color: #93bfa8; // Old browsers
@include filter-gradient(#93bfa8, #123845, horizontal); // IE6-9 fallback on horizontal gradient
@include background-image(radial-gradient(center, ellipse cover, #93bfa8 0%,#123845 100%));
background-size: 100%;
background-attachment: fixed;
@include animation-properties((animation: top-tier-2, animation-duration: $oceanLayer, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: linear));
}
@keyframes top-tier-2 {
0% {
height: 3vh;
top: 3vh;
}
50% {
height: 5vh;
top: 4vh;
}
100% {
top: 3vh;
height: 3vh;
}
}
.top-tier-3 {
position: absolute;
width: 100%;
height: 5vh;
top: 6vh;
background-color: #368981; // Old browsers
@include filter-gradient(#368981, #07212e, horizontal); // IE6-9 fallback on horizontal gradient
@include background-image(radial-gradient(center, ellipse cover, #368981 0%,#07212e 100%));
background-size: 100%;
background-attachment: fixed;
@include animation-properties((animation: top-tier-3, animation-duration: $oceanLayer, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: linear));
}
@keyframes top-tier-3 {
0% {
height: 3vh;
top: 6vh;
}
50% {
height: 5vh;
top: 8vh;
}
100% {
top: 6vh;
height: 3vh;
}
}
.top-tier-4 {
position: absolute;
width: 100%;
height: 7vh;
top: 11vh;
background-color: #093d4a; // Old browsers
@include filter-gradient(#093d4a, #01101b, horizontal); // IE6-9 fallback on horizontal gradient
@include background-image(radial-gradient(center, ellipse cover, #093d4a 0%,#01101b 100%));
background-size: 100%;
background-attachment: fixed;
@include animation-properties((animation: top-tier-4, animation-duration: $oceanLayer, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: linear));
}
@keyframes top-tier-4 {
0% {
height: 7vh;
top: 9vh;
}
50% {
height: 9vh;
top: 11vh;
}
100% {
top: 9vh;
height: 7vh;
}
}
.top-tier-5 {
position: absolute;
width: 100%;
height: 7vh;
top: 18vh;
background-color: #001624; // Old browsers
@include filter-gradient(#001624, #00030a, horizontal); // IE6-9 fallback on horizontal gradient
@include background-image(radial-gradient(center, ellipse cover, #001624 0%,#00030a 100%));
background-size: 100%;
background-attachment: fixed;
@include animation-properties((animation: top-tier-5, animation-duration: $oceanLayer, animation-iteration-count: infinite, animation-delay: 0s, animation-direction: forwards, default-animation-timing-function: linear));
}
@keyframes top-tier-5 {
0% {
height: 12vh;
top: 14vh;
}
50% {
height: 12vh;
top: 17vh;
}
100% {
top: 14vh;
height: 12vh;
}
}
#made-by-cameron {
position: fixed;
bottom: 0%;
height: 5vh;
width: 100%;
font-size: 1.4rem;
color: #fff;
font-family: monospace;
}
#made-by-cameron a {
color: #fff;
}
.made-by-author {
position: absolute;
right: 2%;
top: 23%;
}
.made-by-twitter {
position: absolute;
left: 2%;
top: 23%;
}
View Compiled
var scene = document.getElementById('scene');
var parallax = new Parallax(scene, {
selector: '.layer'
});
This Pen doesn't use any external CSS resources.