Starry Mountains

index.html

<div class="stars-container">
		<div id="diagional-stars"></div>
		<div id="falling-stars-fast"></div>
		<div id="falling-stars-slow"></div>
</div>
<div id="mountains"></div>

script.js

/*
Nothing to see here :)
Made by @screenshake
linkedin.com/in/saranshsinha
*/

starry-mountains.markdown

Starry Mountains

Using a very simple sass function, and CSS animation keyframes, built parallax scrolling stars in space. The sass function creates a random star field on each load.

SASS function: https://coderwall.com/p/nqxusa by Kushagra Gour @chinchang457

A Pen by Christa on CodePen.

License.

style.scss

// n is number of stars required
@function star-generator($n) {
  $value: '#{random(2000)}px #{random(2000)}px #FFF';
	@for $i from 2 through $n {
    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF';
	}
  @return unquote($value);
}
$stars-small: star-generator(700);
$stars-medium: star-generator(200);
$stars-big: star-generator(100);
$stars-container: star-generator(175);

@mixin star-position {
	content: " ";
	position: absolute;
	top: 2000px;
	background: transparent;
}


html {
		height: 100%;
		background: linear-gradient(0deg, #383d95, #040d30 90%) no-repeat #383d95;
		overflow: hidden;
}    

#diagional-stars {
		width: 1px;
		height: 1px;
		background: transparent;
		box-shadow: $stars-small;
		animation: diagonal 375s linear infinite;
    
		&:after {
			@include star-position;
			width: 1px;
			height: 1px;
			box-shadow: $stars-small;
		}	
}

#falling-stars-fast {
		width: 2px;
		height: 2px;
		background: transparent;
		box-shadow: $stars-medium;
		animation: fallingStar 175s linear infinite;
    
		&:after {
			@include star-position;
			width: 2px;
			height: 2px;
			box-shadow: $stars-medium;
		}
}

#falling-stars-slow {
		width: 3px;
		height: 3px;
		background: transparent;
		box-shadow: $stars-big;
		animation: fallingStar 250s linear infinite;
    
		&:after {
			@include star-position;
			width: 3px;
			height: 3px;
			box-shadow: $stars-big;
		}
}

.stars-container {
		position: relative;
		width: 2px;
		height: 2px;
		background: transparent;
		box-shadow: $stars-container;
		animation: twinkle 3s ease-in -3s infinite alternate;
}

#mountains {
		position: absolute;
		z-index: 10;
		width: 100%;
		height: 100%;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%231c6f92' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%2329abe2' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23417592' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%2367b7e2' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%235d8095' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%238ec3e5' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23718796' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23accde3' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23848f96' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%23ccdce7' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23969696' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%23e0e0e0' points='943 900 1210 900 971 687'/%3E%3C/svg%3E");
		background-attachment: fixed;
		background-size: cover
}
    
@keyframes fallingStar {
	from	{ transform: translateY(-2000px); }
	to { transform: translateY(0px); }
}

@keyframes diagonal {
    0% { transform: translatex(0px) translatey(0px) }
    100% { transform: translatex(-2000px) translatey(-2000px) }
}

@keyframes twinkle {
	from { opacity: .3; }
	to { opacity: 1; }
}