Updated demo

marrio-h · Feb 24, 2019 · 8044177 · 8044177
1 parent 1ab348d
commit 8044177
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 13 deletions.
diff --git a/demo/css/demo.css b/demo/css/demo.css
@@ -19,7 +19,6 @@ body, p, h1, h2, h3 {
 }
 
 p, h1, h2 {
-	line-height: 1.3;
 	text-shadow: 0 0 5px rgba(0, 0, 0, .6);
 	width: 100%;
 }
@@ -28,11 +27,12 @@ h1, h2 {
 	font-size: 40px;
 	font-size: 2.5rem;
 	font-weight: 700;
-	margin-top: -5px;
+	line-height: 1;
 }
 
 h1 {
-	margin-bottom: 5px;
+	margin-bottom: 10px;
+	margin-top: -2px;
 }
 
 h2 {
@@ -42,6 +42,9 @@ h2 {
 p {
 	font-size: 20px;
 	font-size: 1.25rem;
+	letter-spacing: 0;
+	letter-spacing: .02rem;
+	line-height: 1.3;
 	margin-bottom: 20px;
 }
 p:last-child {
@@ -51,6 +54,10 @@ p.p--credits {
 	font-size: 14px;
 	font-size: .9rem;
 }
+p strong {
+	display: inline-block;
+	margin-bottom: 2px;
+}
 
 a {
 	color: #fff;
@@ -132,6 +139,52 @@ a.a--no-weight {
 	display: none;
 }
 
+.arrow {
+	-webkit-animation: bounce 3s infinite;
+	animation: bounce 3s infinite;
+	bottom: -64px;
+	bottom: -4rem;
+	left: calc(50% - 19px);
+	position: absolute;
+	-webkit-transform: translateX(-50%);
+	-ms-transform: translateX(-50%);
+	transform: translateX(-50%);
+	transition: opacity 250ms ease-in-out;
+	width: 38px;
+}
+.arrow--hide {
+	opacity: 0;
+}
+
+@-webkit-keyframes bounce {
+	0%, 20%, 50%, 80%, 100% {
+		-webkit-transform: translateY(0);
+		transform: translateY(0);
+	}
+	40% {
+		-webkit-transform: translateY(-15px);
+		transform: translateY(-15px);
+	}
+	60% {
+		-webkit-transform: translateY(-5px);
+		transform: translateY(-5px);
+	}
+}
+
+@keyframes bounce {
+	0%, 20%, 50%, 80%, 100% {
+		-webkit-transform: translateY(0);
+		transform: translateY(0);
+	}
+	40% {
+		-webkit-transform: translateY(-15px);
+		transform: translateY(-15px);
+	}
+	60% {
+		-webkit-transform: translateY(-5px);
+		transform: translateY(-5px);
+	}
+}
 @media screen and (max-width: 480px) {
 	.hide-on-mobile {
 		display: none;

diff --git a/demo/css/demo.min.css b/demo/css/demo.min.css
diff --git a/demo/img/arrow-down.png b/demo/img/arrow-down.png
diff --git a/demo/index.html b/demo/index.html
@@ -13,22 +13,31 @@
 <body>
 
 	<section class="container container--full">
-		<div class="content">
+		<div class="content" style="position:relative;">
+			<div class="arrow" id="arrow"><img src="img/arrow-down.png"></div>
 			<h1>Universal Parallax</h1>
 			<p>A vanilla javascript plugin</p>
 		</div>
 		<div class="parallax bg1"></div>
 	</section>
 
 	<section class="container container--small">
-		<div class="content"><p>Adapts to height</p></div>
+		<div class="content">
+			<p>
+				<strong>Adapts to height</strong>
+				<br>
+				Displays 100% of BG regardless
+			</p>
+		</div>
 		<div class="parallax" data-parallax-image="img/bg2.jpg"></div>
 	</section>
 
 	<section class="container container--big">
 		<div class="content">
 			<p>
-				Container bigger than the screen height? <strong>No sweat</strong>
+				<strong>Container going off screen?</strong>
+				<br>
+				No sweat
 			</p>
 		</div>
 		<div class="parallax" id="bg3"></div>
@@ -38,18 +47,19 @@ <h1>Universal Parallax</h1>
 		<div class="content">
 			<h2>Universal Parallax</h2>
 			<p>
-				Scales to whatever height your container might be.
+				Automatically scales to the height of your container
 				<span class="hide-on-mobile"><br></span>
-				Check out <a href="https://www.npmjs.com/package/universal-parallax" target="_blank">npm</a> or <a href="https://github.com/marrio-h/universal-parallax" target="_blank">github</a> for docs and download.
+				Check out <a href="https://www.npmjs.com/package/universal-parallax" target="_blank">npm</a> or <a href="https://github.com/marrio-h/universal-parallax" target="_blank">github</a> for docs and download
 			</p>
 			<p>
-				Photo credits in order of appearance from <a href="https://unsplash.com/" target="_blank">unsplash.com</a><span class="show-on-mobile--inline">:</span>
+				Photo credits in order of appearance from <a href="https://unsplash.com/" target="_blank">unsplash</a>
+				<span class="show-on-mobile--inline">:</span>
 				<span class="hide-on-mobile"><br></span>
 				<a class="a--no-weight" href="https://unsplash.com/@dnevozhai" target="_blank">Denys Nevozhai</a>,
 				<a class="a--no-weight" href="https://unsplash.com/@rohittandon" target="_blank">Rohit Tandon</a>,
 				<span class="hide-on-mobile"><br></span>
 				<a class="a--no-weight" href="https://unsplash.com/@jim_dons" target="_blank">James Donaldson</a>,
-				<a class="a--no-weight" href="https://unsplash.com/@jampatcon" target="_blank">James Connolly</a>.
+				<a class="a--no-weight" href="https://unsplash.com/@jampatcon" target="_blank">James Connolly</a>
 			</p>
 			<p class="p--credits">Find me on git <a href="https://github.com/marrio-h" target="_blank">@marrio-h</a></p>
 
@@ -58,6 +68,7 @@ <h2>Universal Parallax</h2>
 	</section>
 
 	<script src="../dist/universal-parallax.min.js"></script>
+	<script src="js/demo.min.js"></script>
 	<script>
 		new universalParallax().init({
 			speed: 4

diff --git a/demo/js/demo.min.js b/demo/js/demo.min.js
diff --git a/dist/universal-parallax.js b/dist/universal-parallax.js
@@ -34,6 +34,7 @@ var animateParallax = function animateParallax(parallax, speed) {
 	for (var i = 0; parallax.length > i; i++) {
 		var container = parallax[i].parentElement.parentElement.getBoundingClientRect();
 
+		// only animate if on screen
 		if (container.top + container.height >= 0 && container.top <= windowHeight) {
 			positionParallax(container, speed, parallax, i);
 		}
@@ -68,14 +69,14 @@ var universalParallax = function universalParallax() {
 
 		// recalculate height on resize
 		if (!mobile) {
-			window.addEventListener("resize", function () {
+			window.addEventListener('resize', function () {
 				windowHeight = window.innerHeight;
 				calculateHeight(parallax, speed);
 			});
 		}
 
 		// Add scroll event listener
-		window.addEventListener("scroll", function () {
+		window.addEventListener('scroll', function () {
 			animateParallax(parallax, speed);
 		});
 	};