mirage

cold-magma · Apr 10, 2020 · 1831b01 · 1831b01
1 parent 2f58db4
commit 1831b01
Show file tree

Hide file tree

Showing 18 changed files with 123 additions and 0 deletions.
diff --git a/mirage/app.js b/mirage/app.js
@@ -0,0 +1,2 @@
+var scene = document.getElementById('scene');
+var parallaxInstance = new Parallax(scene);
diff --git a/mirage/layers/1.png b/mirage/layers/1.png
diff --git a/mirage/layers/10.png b/mirage/layers/10.png
diff --git a/mirage/layers/11.png b/mirage/layers/11.png
diff --git a/mirage/layers/12.png b/mirage/layers/12.png
diff --git a/mirage/layers/2.png b/mirage/layers/2.png
diff --git a/mirage/layers/3.png b/mirage/layers/3.png
diff --git a/mirage/layers/4.png b/mirage/layers/4.png
diff --git a/mirage/layers/5.png b/mirage/layers/5.png
diff --git a/mirage/layers/6.png b/mirage/layers/6.png
diff --git a/mirage/layers/7.png b/mirage/layers/7.png
diff --git a/mirage/layers/8.png b/mirage/layers/8.png
diff --git a/mirage/layers/9.png b/mirage/layers/9.png
diff --git a/mirage/layers/sky.png b/mirage/layers/sky.png
diff --git a/mirage/layers/sun-lite.png b/mirage/layers/sun-lite.png
diff --git a/mirage/layers/sun.png b/mirage/layers/sun.png
diff --git a/mirage/mirage.html b/mirage/mirage.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>MIRAGE</title>
+	<link rel="stylesheet" type="text/css" href="miragestylesheet.css">
+</head>
+<body>
+	<div data-hover-only="true" data-limit-x="true" data-limit-y="50" data-scalar-x="5.0" data-scalar-y="2.0" data-origin-y="0" data-relative-input="true" id="scene">
+		<div class="layers" id="layer1" data-depth="0.55"></div>
+		<div class="layers" id="layer2" data-depth="0.50"></div>
+		<div class="layers" id="layer3" data-depth="0.45"></div>
+		<div class="layers" id="layer4" data-depth="0.4"></div>
+		<div class="layers" id="layer5" data-depth="0.35"></div>
+		<div class="layers" id="layer6" data-depth="0.3"></div>
+		<div class="layers" id="layer7" data-depth="0.275"></div>
+		<div class="layers" id="layer8" data-depth="0.25"></div>
+		<div class="layers" id="layer9" data-depth="0.225"></div>
+		<div class="layers" id="layer10" data-depth="0.2"></div>
+		<div class="layers" id="layer11" data-depth="0.15"></div>
+		<div class="layers" id="layer12" data-depth="0.15"></div>
+		<div class="layers" id="layer13" data-depth="0.1"></div>
+		<div class="layers" id="layer14" data-depth="0.05"></div>
+	</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
+<script src="app.js"></script>
+</body>
+</html>
diff --git a/mirage/miragestylesheet.css b/mirage/miragestylesheet.css
@@ -0,0 +1,93 @@
+*{
+	margin:0;
+	padding: 0;
+}
+body{
+	width: 100%;
+	background: black;
+	overflow: hidden;
+}
+.scene{
+	position: absolute;
+	left: 50;
+	top: 50;
+	width: 100vw;
+	height: 100vh;
+}
+.layers{
+	position: absolute;
+	left: 60;
+	top: 60;
+	width: 120vw;
+	height: 120vh;
+}
+#layer1{
+	background: url(./layers/1.png);
+	background-size: cover;
+	z-index: 12;
+}
+#layer2{
+	background: url(./layers/2.png);
+	background-size: cover;
+	z-index: 11;
+}
+#layer3{
+	background: url(./layers/3.png);
+	background-size: cover;
+	z-index: 10;
+}
+#layer4{
+	background: url(./layers/4.png);
+	background-size: cover;
+	z-index: 9;
+}
+#layer5{
+	background: url(./layers/5.png);
+	background-size: cover;
+	z-index: 8;
+}
+#layer6{
+	background: url(./layers/6.png);
+	background-size: cover;
+	z-index: 7;
+}
+#layer7{
+	background: url(./layers/7.png);
+	background-size: cover;
+	z-index: 6;
+}
+#layer8{
+	background: url(./layers/8.png);
+	background-size: cover;
+	z-index: 5;
+}
+#layer9{
+	background: url(./layers/9.png);
+	background-size: cover;
+	z-index: 4;
+}
+#layer10{
+	background: url(./layers/10.png);
+	background-size: cover;
+	z-index: 3;
+}
+#layer11{
+	background: url(./layers/11.png);
+	background-size: cover;
+	z-index: 2;
+}
+#layer12{
+	background: url(./layers/12.png);
+	background-size: cover;
+	z-index: 1;
+}
+#layer13{
+	background: url(./layers/sun-lite.png);
+	background-size: cover;
+	z-index:0;
+}
+#layer14{
+	background: url(./layers/sky.png);
+	background-size: cover;
+	z-index: -1;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		var scene = document.getElementById('scene');
		var parallaxInstance = new Parallax(scene);