alexander480 · May 9, 2021 06:55 · May 9, 2021 · May 9, 2021
diff --git a/index.haml b/index.haml
@@ -0,0 +1,20 @@
+.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
diff --git a/parallax-js-star-field.markdown b/parallax-js-star-field.markdown
@@ -0,0 +1,9 @@
+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 `layer`s 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](https://codepen.io/awllwa/pen/eYvNBEp) by [Alexander Lester](https://codepen.io/awllwa) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/awllwa/pen/eYvNBEp/license).
diff --git a/script.js b/script.js
@@ -0,0 +1,11 @@
+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
+
+*/
+
diff --git a/scripts b/scripts
@@ -0,0 +1,2 @@
+<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>
diff --git a/style.sass b/style.sass
@@ -0,0 +1,70 @@
+@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
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<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>