cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              .credit
	h1 Parallax.js design
	p 
		a(href="https://twitter.com/MichaelRappaz" target="_blank") Made by Michael
.container#container
	.circle
		svg.frontMountain.layer(viewBox="0 0 1024.000000 411.000000"  data-depth="0.7")
			g(transform="translate(0.000000,411.000000) scale(0.100000,-0.100000)" fill="#F67280" stroke="none")
				path(d="M4505 3510 l-600 -600 -247 247 -248 248 -713 -711 c-391 -391 -1160 -1157 -1707 -1702 l-995 -992 5125 1 5125 0 -1710 1704 -1710 1704 -250 -250 -251 -249 -603 597 c-332 329 -606 599 -610 601 -3 1 -276 -268 -606 -598z")
		svg.middleMountain.layer(viewBox="0 0 830.000000 203.000000" data-depth="0.4")
			g(transform="translate(0.000000,203.000000) scale(0.100000,-0.100000)" fill="#C06C84" stroke="none")
				path(d="M2885 1459 c-307 -313 -563 -568 -567 -567 -5 2 -249 240 -542 531 -294 290 -537 527 -541 527 -6 0 -307 -303 -1072 -1080 l-163 -165 0 -353 0 -353 323 6 c177 3 1278 10 2447 15 2458 11 5514 31 5518 35 7 6 -1939 1927 -1948 1923 -4 -2 -202 -201 -441 -443 -239 -242 -437 -440 -441 -440 -4 0 -208 198 -454 439 l-446 440 -261 -263 -261 -262 -291 291 c-160 159 -293 290 -295 289 -3 -1 -257 -257 -565 -570z")
		svg.backMountain.layer(viewBox="0 0 830.000000 203.000000" data-depth="0.2")
			g(transform="translate(0.000000,203.000000) scale(0.100000,-0.100000)" fill="#6C5B7B" stroke="none")
				path(d="M2885 1459 c-307 -313 -563 -568 -567 -567 -5 2 -249 240 -542 531 -294 290 -537 527 -541 527 -6 0 -307 -303 -1072 -1080 l-163 -165 0 -353 0 -353 323 6 c177 3 1278 10 2447 15 2458 11 5514 31 5518 35 7 6 -1939 1927 -1948 1923 -4 -2 -202 -201 -441 -443 -239 -242 -437 -440 -441 -440 -4 0 -208 198 -454 439 l-446 440 -261 -263 -261 -262 -291 291 c-160 159 -293 290 -295 289 -3 -1 -257 -257 -565 -570z")
		.star1
		.star2
		.star3
		.star4
		.cloud.layer(data-depth="1")
		.cloud.layer.cloud2(data-depth=".3")
		.cloud.layer.cloud3(data-depth=".6")
            
          
!
            
              //Font import
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,700');
//Var
$font: Ubuntu, sans-serif;
$font-settings: 10px;
$caps: uppercase;
$bgcolor: black;
$fontcolor: white;
//Background color
body {
	background: $bgcolor;
}
//Extender
.font {
	color: $fontcolor;
	font-family: $font;
	letter-spacing: $font-settings;
	text-transform: $caps;
}
//Title
h1 {
	@extend .font;
	font-weight: 300;
	text-align: center;
}
//Link to website
.credit {
	position: relative;
	top: 30px;
	p {
		@extend .font;
		font-size: 10px;
		margin-top: 3px;
		font-weight: 800;
		text-align: center;
	}
	a {
		transition: all 200ms ease-in-out;
	}
	a:link, a:visited, a:hover, a:active {
		text-decoration: none;
		color: $fontcolor;
	}
	a:hover {
		color: #FF69B4;
	}
}
//Reset
* {
	padding: 0;
	margin: 0;
}
//End of template

.circle {
	background: #001848;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	position: relative;
	left: 50%;
	top: 50vh;
	transform: translatex(-50%) translatey(-50%) scale(1.2,1.2);
	overflow: hidden;
}
.frontMountain {
	top: 130px!important;
	z-index: 50;
}
.middleMountain {
	top: 95px!important;
	left: -100px!important;
	z-index: 40;
	height: 90px;
}
.backMountain {
	height: 100px;
	z-index: 30;
	top: 45px!important;
	left: -200px!important;
}
.star1, .star2, .star3, .star4 {
	background: white;
	height: 4px;
	width: 4px;
	border-radius: 50%;
	position: absolute;
	box-shadow: 0px 0px 44px 3px rgba(255,255,255,1);
	top: 20px;
	left: 50px;
	animation: opa 1000ms ease-in-out infinite;
}
.star2 {
	left: 160px;
	top: 60px;
	animation-delay: 200ms;
}
.star3 {
	top: 25px;
	left: 120px;
	animation-delay: 450ms;
}
.star4 {
	top: 50px;
	left: 80px;
	animation-delay: 356ms;
}
@keyframes opa {
	0% {opacity: 1;}
	50% {opacity: 0.5;}
	100% {opacity: 1;}
}
.cloud {
	background: white;
	width: 30px!important;
	height: 10px!important;
	z-index: 60!important;
	position: absolute!important;
	border-radius: 50px!important;
	left: 40px!important;
	top: 130px!important;
	&:after {
		content:"";
		background: white;
		height: 10px!important;
		width: 20px!important;
		position: absolute!important;
		border-radius: 50px!important;
		top: 10px!important;
	}
	&:before {
		content:"";
		background: white;
		height: 10px!important;
		width: 20px!important;
		position: absolute!important;
		border-radius: 50px!important;
		top: 5px!important;
		left: -15px!important;
	}
}
.cloud2 {
	left: 60px!important;
	top: 50px!important;
	z-index: 10!important;
}
.cloud3 {
	left: 140px!important;
	top: 100px!important;
	z-index: 30!important;
	
}

            
          
!
            
              const parent = document.getElementById('container');
const parallax = new Parallax(parent, {
  invertX: true,
  invertY: true,
  limitX:10,
  limitY:5,  
});

            
          
!
999px
Loading ..................

Console