Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Parallax Star background in CSS
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
#stars
#stars2
#stars3
#title
%span
PURE CSS
%br
%span
PARALLAX PIXEL STARS

Parallax Star background in CSS

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 Doug A on CodePen.

License.

/*
Nothing to see here :)
Made by @screenshake
linkedin.com/in/saranshsinha
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import compass
// n is number of stars required
@function multiple-box-shadow ($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)
$shadows-small: multiple-box-shadow(700)
$shadows-medium: multiple-box-shadow(200)
$shadows-big: multiple-box-shadow(100)
html
height: 100%
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%)
overflow: hidden
#stars
width: 1px
height: 1px
background: transparent
box-shadow: $shadows-small
animation : animStar 150s linear infinite
&:after
content: " "
position: absolute
top: 2000px
width: 1px
height: 1px
background: transparent
box-shadow: $shadows-small
#stars2
width: 2px
height: 2px
background: transparent
box-shadow: $shadows-medium
animation : animStar 100s linear infinite
&:after
content: " "
position: absolute
top: 2000px
width: 2px
height: 2px
background: transparent
box-shadow: $shadows-medium
#stars3
width: 3px
height: 3px
background: transparent
box-shadow: $shadows-big
animation : animStar 50s linear infinite
&:after
content: " "
position: absolute
top: 2000px
width: 3px
height: 3px
background: transparent
box-shadow: $shadows-big
#title
position: absolute
top: 50%
left: 0
right: 0
color: #FFF
text-align: center
font-family: 'lato',sans-serif
font-weight: 300
font-size: 50px
letter-spacing: 10px
margin-top: -60px
padding-left: 10px
span
background: -webkit-linear-gradient(white, #38495a)
-webkit-background-clip: text
-webkit-text-fill-color: transparent
@keyframes animStar
from
transform: translateY(0px)
to
transform: translateY(-2000px)
@DougAnderson444

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment