Parallax.js Star Field

index.haml

.container

  #scene{"data-pointer-events" => 'true'}
  
    #stars-small.layer{"data-depth" => "0.50"}
      - 100.times.each do |i|
        .star
    #stars-medium.layer{"data-depth" => "0.60"}
      - 50.times.each do |i|
        .star
    #stars-big.layer{"data-depth" => "0.70"}
      - 25.times.each do |i|
        .star
      
    %h1#p1.text-layer.layer{"data-depth" => "1.0"}
      Parallax.js
    %h1#p2.text-layer.layer{"data-depth" => "0.9"}
      Star
    %h1#p3.text-layer.layer{"data-depth" => "0.8"}
      Field

parallax-js-star-field.markdown

Parallax.js Star Field

A field of stars with some depth, thanks to parallax.js and some inspiration from this pen: https://codepen.io/saransh/pen/BKJun

Stars elements are created on three separate layers with with Haml and then positioned randomly with Sass. Parallax.js gives the three layers depth on hover (or tilt, if on a mobile device).

A Pen by Alexander Lester on CodePen.

License.

script.js

var scene = $('#scene').get(0);
var parallax = new Parallax(scene);

/*

Hover over the screen (or tilt, if on a mobile device) to move the stars.

https://github.com/wagerfield/parallax

*/

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js"></script>

style.sass

@import url('https://fonts.googleapis.com/css?family=Nova+Square')

html
  height: 100%

body
  color: white
  // background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%)
  font-family: 'Nova Square', cursive
  font-size: calc(0.75em + 1vmin)
  font-weight: 300
  
h1
  font-size: calc(2.25em + 1vmin)

.container
  z-index: 0
  top: 0
  left: 0
  position: fixed
  width: 100%
  overflow: hidden
  height: 100vh
  
#scene
  pointer-events: none
  height: inherit

.text-layer
  position: absolute
  
  &#p1
    top: 20vh !important
    left: 30vw !important
  &#p2
    top: 40vh !important
    left: 40vw !important
  &#p3
    top: 60vh !important
    left: 45vw !important
  
@mixin star-properties
  $size : random(3) * 1px
  $x    : random(110) * 1vw
  $y    : random(110) * 1vh
  height: $size
  width:  $size
  left: $x - 5vw
  top: $y - 5vh

.star
  display: inline-block
  border-radius: 100%
  background-color: black
  position: absolute

@for $i from 0 through 100
  #stars-small
    .star:nth-child(#{$i})
      @include star-properties

@for $i from 0 through 50
  #stars-medium
    .star:nth-child(#{$i})
      @include star-properties

@for $i from 0 through 25
  #stars-big
    .star:nth-child(#{$i})
      @include star-properties