Skip to content

Instantly share code, notes, and snippets.

@maxwofford
Created November 21, 2015 10:09
Show Gist options
  • Save maxwofford/1517bf263eb8d68b191f to your computer and use it in GitHub Desktop.
Save maxwofford/1517bf263eb8d68b191f to your computer and use it in GitHub Desktop.
Parallax Star background in CSS
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
#stars
#stars2
#stars3
#title
<img src="http://i.imgur.com/QveuGKr.png">
/*
Nothing to see here :)
Made by @screenshake
linkedin.com/in/saranshsinha
*/
<script src="//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 50s 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 150s 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)
@aramodi
Copy link

aramodi commented Sep 13, 2020

noice

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