Universal jQuery module loader

README.md

@@ -15,7 +15,7 @@ Easy parallax plugin using pure javascript. Lightweight (2kb) and cross browser
 - Lightweight (2kb minified)
 
 ## :floppy_disk: Install
-`$ npm i universal-parallax -S`
+`$ npm i universal-parallax -S  or yarn add universal-parallax`
 
 ## :rocket: Setup
 
@@ -72,18 +72,51 @@ If `<section>` is your container, make the parallax element inside it
 :zap: You can also use `background-image` to define your image instead of using `data-parallax-image=""`
 
 #### #3
+Static HTML
+
 Include the script to your project
 
+Put the script at the bottom of your markup right after jQuery
+
 ```html
+<script src="https://code.jquery.com/jquery-3.4.1.min.js"
+  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
+  crossorigin="anonymous"></script>
 <script src="node_modules/universal-parallax/dist/universal-parallax.min.js"></script>
 ```
+Load
+
+Webpack
 
+Add jQuery via the "webpack.ProvidePlugin" to your webpack configuration:
+
+```htmlconst webpack = require('webpack');
+
+//...
+plugins: [
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery'
+    }),
+],
+//...
+```
+
+Load the required stylesheet and JS:
+
+```html
+import 'universal-parallax/dist/universal-parallax.min.css';
+import 'universal-parallax';
+```
 #### #4
 Initialize the JS function
 
 ```html
 <script>
-	new universalParallax().init();
+$(document).ready(function(){
+  $('.parallax').universalParallax();
+});
 </script>
 ```
 
@@ -98,8 +131,10 @@ That's it! :checkered_flag:
 You can change the parallax speed; the higher the number, the slower the parallax effect
 
 ```js
-new universalParallax().init({
-	speed: 6.0
+$(document).ready(function(){
+     $('.parallax').universalParallax({
+        speed: 6.0,
+    });
 });
 ```
 

demo/index.html

@@ -66,12 +66,17 @@ <h2>Universal Parallax</h2>
 		</div>
 		<div class="parallax" data-parallax-image="img/bg4.jpg"></div>
 	</section>
-
+	<script
+			src="https://code.jquery.com/jquery-3.4.1.min.js"
+			integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
+			crossorigin="anonymous"></script>
 	<script src="../dist/universal-parallax.min.js"></script>
 	<script src="js/demo.min.js"></script>
 	<script>
-		new universalParallax().init({
-			speed: 4
+		$(document).ready(function(){
+			$('.parallax').universalParallax({
+				speed: 4
+			});
 		});
 	</script>
 

dist/universal-parallax.js

@@ -1,129 +1,163 @@
 'use strict';
 
 /**
-* @version 1.3.2
-* @author Marius Hansen <[email protected]>
-* @license MIT
-* @description Easy parallax plugin using pure javascript. Cross browser support, including mobile platforms. Based on goodparallax
-* @copyright © Marius Hansen 2019
-*/
-
-var windowHeight = window.innerHeight,
-    windowHeightExtra = 0;
-var safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent),
-    mobile = /Mobi/.test(navigator.userAgent);
-
-// check if safari - extend height
-if (safari && !mobile) {
-	windowHeightExtra = window.outerHeight - window.innerHeight;
-}
-
-if (mobile) {
-	windowHeight = window.screen.availHeight; // stops from jumping
-	windowHeightExtra = (window.screen.availHeight - window.innerHeight) / 2; // prevents white spaces
-}
-
-// position parallax
-var positionParallax = function positionParallax(container, speed, parallax, elem) {
-	var bgScroll = container.top / speed - windowHeightExtra;
-	parallax[elem].style.top = bgScroll + 'px';
-};
-
-// animate parallax
-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);
-		}
+ * https://github.com/marrio-h/universal-parallax
+ *
+ * @version 1.3.3
+ * @author Marius Hansen <[email protected]>
+ * @license MIT
+ * @description Easy parallax plugin using pure javascript. Cross browser support, including mobile platforms. Based on goodparallax
+ * @copyright © Marius Hansen 2019
+ */
+
+(function (factory) {
+	if (typeof define === 'function' && define.amd) {
+		// AMD. Register as an anonymous module.
+		define(['jquery'], factory);
+	} else if (typeof module === 'object' && module.exports) {
+		// Node/CommonJS
+		module.exports = function( root, jQuery ) {
+			if ( jQuery === undefined ) {
+				// require('jQuery') returns a factory that requires window to
+				// build a jQuery instance, we normalize how we use modules
+				// that require this pattern but the window provided is a noop
+				// if it's defined (how jquery works)
+				if ( typeof window !== 'undefined' ) {
+					jQuery = require('jquery');
+				}
+				else {
+					jQuery = require('jquery')(root);
+				}
+			}
+			factory(jQuery);
+			return jQuery;
+		};
+	} else {
+		// Browser globals
+		factory(jQuery);
 	}
-};
+}(function ($) {
 
-// determine height
-var calculateHeight = function calculateHeight(parallax, speed) {
-	for (var i = 0; parallax.length > i; i++) {
-		var container = parallax[i].parentElement.parentElement.getBoundingClientRect();
-		var containerTop = parallax[i].parentElement.parentElement.offsetTop;
-		var elemOffsetTop = (windowHeight - container.height) / 2;
+	var windowHeight = window.innerHeight,
+		windowHeightExtra = 0;
+	var safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent),
+		mobile = /Mobi/.test(navigator.userAgent);
 
-		// set bgHeight & check if it needs to stretch beyond container bottom
-		var bgHeight = windowHeight > container.height + containerTop ? container.height + containerTop - containerTop / speed : container.height + (elemOffsetTop - elemOffsetTop / speed) * 2;
+	// check if safari - extend height
+	if (safari && !mobile) {
+		windowHeightExtra = window.outerHeight - window.innerHeight;
+	}
 
-		parallax[i].style.height = bgHeight + windowHeightExtra * 2 + 'px';
-		positionParallax(container, speed, parallax, i);
+	if (mobile) {
+		windowHeight = window.screen.availHeight; // stops from jumping
+		windowHeightExtra = (window.screen.availHeight - window.innerHeight) / 2; // prevents white spaces
 	}
-};
 
-var universalParallax = function universalParallax() {
-	var up = function up(parallax, speed) {
+	// position parallax
+	var positionParallax = function positionParallax(container, speed, parallax, elem) {
+		var bgScroll = container.top / speed - windowHeightExtra;
+		parallax[elem].style.top = bgScroll + 'px';
+	};
+
+	// animate parallax
+	var animateParallax = function animateParallax(parallax, speed) {
+		for (var i = 0; parallax.length > i; i++) {
+			var container = parallax[i].parentElement.parentElement.getBoundingClientRect();
 
-		// check that speed is not a negative number
-		if (speed < 1) {
-			speed = 1;
+			// only animate if on screen
+			if (container.top + container.height >= 0 && container.top <= windowHeight) {
+				positionParallax(container, speed, parallax, i);
+			}
 		}
+	};
 
-		// set height on elements
-		calculateHeight(parallax, speed);
+	// determine height
+	var calculateHeight = function calculateHeight(parallax, speed) {
+		for (var i = 0; parallax.length > i; i++) {
+			var container = parallax[i].parentElement.parentElement.getBoundingClientRect();
+			var containerTop = parallax[i].parentElement.parentElement.offsetTop;
+			var elemOffsetTop = (windowHeight - container.height) / 2;
 
-		// recalculate height on resize
-		if (!mobile) {
-			window.addEventListener('resize', function () {
-				windowHeight = window.innerHeight;
-				calculateHeight(parallax, speed);
-			});
-		}
+			// set bgHeight & check if it needs to stretch beyond container bottom
+			var bgHeight = windowHeight > container.height + containerTop ? container.height + containerTop - containerTop / speed : container.height + (elemOffsetTop - elemOffsetTop / speed) * 2;
 
-		// Add scroll event listener
-		window.addEventListener('scroll', function () {
-			animateParallax(parallax, speed);
-		});
+			parallax[i].style.height = bgHeight + windowHeightExtra * 2 + 'px';
+			positionParallax(container, speed, parallax, i);
+		}
 	};
 
-	// Ready all elements
-	this.init = function (param) {
-		if (typeof param === 'undefined') {
-			param = {};
-		}
+	/**
+	 * The jQuery Plugin for the universalParallax.
+	 *
+	 * @public
+	 */
+	$.fn.universalParallax = function universalParallax(param) {
+
+		var up = function up(parallax, speed) {
+			// check that speed is not a negative number
+			if (speed < 1) {
+				speed = 1;
+			}
 
-		param = {
-			speed: typeof param.speed !== 'undefined' ? param.speed : 1.5,
-			className: typeof param.className !== 'undefined' ? param.className : 'parallax'
+			// set height on elements
+			calculateHeight(parallax, speed);
+
+			// recalculate height on resize
+			if (!mobile) {
+				window.addEventListener('resize', function () {
+					windowHeight = window.innerHeight;
+					calculateHeight(parallax, speed);
+				});
+			}
+
+			// Add scroll event listener
+			window.addEventListener('scroll', function () {
+				animateParallax(parallax, speed);
+			});
 		};
-		var parallax = document.getElementsByClassName(param.className);
 
-		for (var i = 0; parallax.length > i; i++) {
+		// This is the easiest way to have default param.
+		var param = $.extend({
+			// These are the defaults.
+			speed: 1.5
+		}, param );
+
+
+		var parallaxs = this;
+
+		this.each(function() {
+			var parallax = this;
 			// make container div
 			var wrapper = document.createElement('div');
-			parallax[i].parentNode.insertBefore(wrapper, parallax[i]);
-			wrapper.appendChild(parallax[i]);
-			var parallaxContainer = parallax[i].parentElement;
+			this.parentNode.insertBefore(wrapper, parallax);
+			wrapper.appendChild(parallax);
+			var parallaxContainer = parallax.parentElement;
 			parallaxContainer.className += 'parallax__container';
 
 			// parent elem need position: relative for effect to work - if not already defined, add it
 			if (window.getComputedStyle(parallaxContainer.parentElement, null).getPropertyValue('position') !== 'relative') {
 				parallaxContainer.parentElement.style.position = 'relative';
 			}
 
-			var imgData = parallax[i].dataset.parallaxImage;
+			var imgData = parallax.dataset.parallaxImage;
 			// add image to div if none is specified
 			if (typeof imgData !== 'undefined') {
-				parallax[i].style.backgroundImage = 'url(' + imgData + ')';
+				parallax.style.backgroundImage = 'url(' + imgData + ')';
 				// if no other class than .parallax is specified, add CSS
-				if (parallax[i].classList.length === 1 && parallax[i].classList[0] === 'parallax') {
-					parallax[i].style.backgroundRepeat = 'no-repeat';
-					parallax[i].style.backgroundPosition = 'center';
-					parallax[i].style.backgroundSize = 'cover';
+				if (parallax.classList.length === 1 && parallax.classList[0] === 'parallax') {
+					parallax.style.backgroundRepeat = 'no-repeat';
+					parallax.style.backgroundPosition = 'center';
+					parallax.style.backgroundSize = 'cover';
 				}
 			}
-		};
+		});
 
 		// when page is loaded && init completed -> run function
 		document.addEventListener('readystatechange', function (event) {
 			if (event.target.readyState === 'complete') {
-				up(parallax, param.speed);
+				up(parallaxs, param.speed);
 			}
 		});
 	};
-};
+
+}));

dist/universal-parallax.scss

@@ -1,11 +1,11 @@
 .parallax__container {
 	clip: rect(0, auto, auto, 0);
-	overflow: hidden;
 	height: 100%;
-	width: 100%;
+	left: 0;
+	overflow: hidden;
 	position: absolute;
 	top: 0;
-	left: 0;
+	width: 100%;
 	z-index: -100;
 
 	.parallax {
@@ -15,9 +15,11 @@
 		background-size: cover;
 		/* --------------------------- */
 		position: fixed;
-		width: 100%;
 		top: 0;
-		transform: translate3d(0,0,0);
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		-webkit-transform-style: preserve-3d;
 		transform-style: preserve-3d;
+		width: 100%;
 	}
 }