Smoothen parallax effect for desktop and disable on mobile

Alhadis · Alhadis · commit dca9ab48da5c · 2015-09-14T15:29:01.000+10:00
Having CSS transitions applied to masthead transformations was resulting
in very choppy behaviour when scrolling; the effect subsided by removing
the transitions (it's smoother without them). Furthermore, it's hopeless
to make this effect look good on mobile devices, since they throttle the
onScroll event too much for it to look good.
diff --git a/src/css/page.home.css b/src/css/page.home.css
@@ -78,23 +78,29 @@ body{
 		left:	0;
 		right:	0;
 		bottom:	0;
-		transform-origin: 50% 100%;
 	}
 		/** Individual hero image */
 		#hero > div{
 			background-position: 50% 50%;
 			background-size: cover;
-			transition: 0s ease opacity 2s, .1s ease transform-origin;
-			transform: scale(  1.5);
-			transform: scale3d(1.5, 1.5, 1.5);
-			transform-origin: inherit;
+			transition: 0s ease opacity 2s;
 			z-index: -2;
 			opacity: 0;
 		}
 			#hero > .active{
 				opacity: 1;
 				z-index: -1;
-				transition: 2s ease opacity, .1s ease transform-origin;
+				transition: 2s ease opacity;
+			}
+
+		/** Parallax-enabled masthead (non-touchscreen only) */
+		.parallax #hero{
+			transform-origin: 50% 100%;
+		}
+			.parallax #hero > div{
+				transform: scale(1.5);
+				transform: scale3d(1.5, 1.5, 1.5);
+				transform-origin: inherit;
 			}
 
 
diff --git a/src/js/page.home.js b/src/js/page.home.js
@@ -4,6 +4,8 @@
 	var BY_ID		=	"getElementById",
 		QUERY		=	"querySelector",
 		QUERY_ALL	=	QUERY + "All",
+		HTML		=	DOC.documentElement,
+		htmlClass	=	HTML.classList,
 		UNDEF;
 
 
@@ -96,12 +98,16 @@
 	new Rotator(hero, {autoplay: 5000});
 
 
-	/** Parallax, etc */
-	window.addEventListener("scroll", function(e){
-		hero.style.transformOrigin = "50% "+(
-			(1 - Math.min(window.pageYOffset / hero.getBoundingClientRect().height, 1)) * 100
-		)+"%";
-	});
+	/** Add scrolling parallax effect for NON-touchscreen devices */
+	if(!("ontouchstart" in window)){
+		htmlClass.add("parallax");
+
+		window.addEventListener("scroll", function(e){
+			hero.style.transformOrigin = "50% "+(
+				(1 - Math.min(window.pageYOffset / hero.getBoundingClientRect().height, 1)) * 100
+			)+"%";
+		});
+	}
 
 
 
@@ -163,7 +169,7 @@
 	 */
 	DOC[ QUERY ]("#topnav > .i").addEventListener("click", function(e){
 
-		if(!DOC.documentElement.classList.contains("pin-nav")){
+		if(!htmlClass.contains("pin-nav")){
 			scrollToNav(true);
 			e.preventDefault();
 			return false;
