Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
universal-parallax
Advanced tools
universal-parallax - npm Package Compare versions
Comparing version 1.0.13 to 1.1.0
@@ -0,3 +1,5 @@ | ||
| 'use strict'; | ||
| /** | ||
| * @version 1.0.13 | ||
| * @version 1.1.0 | ||
| * @author Marius Hansen <marius.o.hansen@gmail.com> | ||
@@ -10,6 +12,5 @@ * @license MIT | ||
| // check if mobile | ||
| var windowHeight = window.innerHeight; | ||
| if (/Mobi/.test(navigator.userAgent)) { | ||
| windowHeight = screen.height; | ||
| }else{ | ||
| windowHeight = window.innerHeight; | ||
| } | ||
@@ -23,3 +24,3 @@ | ||
| var bgHeight = parentHeight + ((elemOffsetTop - (elemOffsetTop / speed)) * 2); | ||
| var bgHeight = parentHeight + (elemOffsetTop - elemOffsetTop / speed) * 2; | ||
| parallax[i].style.height = bgHeight + 'px'; | ||
@@ -30,3 +31,3 @@ } | ||
| // set speed | ||
| function animateParallax(parallax, speed){ | ||
| function animateParallax(parallax, speed) { | ||
| for (var i = 0; parallax.length > i; i++) { | ||
@@ -40,22 +41,19 @@ var parentTopOfElem = parallax[i].parentElement.getBoundingClientRect().top; | ||
| var universalParallax = function universalParallax() { | ||
| var universalParallax = function() { | ||
| var up = function up(parallax, speed) { | ||
| var up = function(parallax, speed) { | ||
| if(speed < 1.2){ | ||
| if (speed < 1.2) { | ||
| speed = 0; | ||
| } | ||
| // determine height | ||
| calculateHeight(parallax, speed); | ||
| // recalculate on resize | ||
| window.addEventListener("resize", function() { | ||
| window.addEventListener("resize", function () { | ||
| calculateHeight(parallax, speed); | ||
| }); | ||
| // Add scroll event listener | ||
| window.addEventListener("scroll", function() { | ||
| window.addEventListener("scroll", function () { | ||
| // apply effect to each element | ||
@@ -66,7 +64,6 @@ animateParallax(parallax, speed); | ||
| // Ready all elements | ||
| this.init = function(param) { | ||
| if(typeof param === 'undefined') { | ||
| param = {} | ||
| this.init = function (param) { | ||
| if (typeof param === 'undefined') { | ||
| param = {}; | ||
| } | ||
@@ -77,3 +74,3 @@ | ||
| className: typeof param.className !== 'undefined' ? param.className : 'parallax' | ||
| } | ||
| }; | ||
| var parallax = document.getElementsByClassName(param.className); | ||
@@ -87,3 +84,3 @@ | ||
| var parallaxContainer = parallax[i].parentElement; | ||
| parallaxContainer.className += 'parallax--container'; | ||
| parallaxContainer.className += 'parallax__container'; | ||
@@ -97,10 +94,10 @@ // parent elem need position: relative for effect to work - if not already defined, add it | ||
| // add image to div if none is specified | ||
| if(typeof imgData !== 'undefined') { | ||
| parallax[i].style.backgroundImage = 'url('+imgData+')'; | ||
| if (typeof imgData !== 'undefined') { | ||
| parallax[i].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') { | ||
| Object.assign(parallax[i].style,{ | ||
| 'background-repeat':'no-repeat', | ||
| 'background-position':'center', | ||
| 'background-size':'cover' | ||
| if (parallax[i].classList.length === 1 && parallax[i].classList[0] === 'parallax') { | ||
| Object.assign(parallax[i].style, { | ||
| 'background-repeat': 'no-repeat', | ||
| 'background-position': 'center', | ||
| 'background-size': 'cover' | ||
| }); | ||
@@ -107,0 +104,0 @@ } |
@@ -1,1 +0,1 @@ | ||
| function calculateHeight(e,a){for(var t=0;e.length>t;t++){var n=e[t].parentElement.scrollHeight,l=(windowHeight-n)/2,i=n+2*(l-l/a);e[t].style.height=i+"px"}}function animateParallax(e,a){for(var t=0;e.length>t;t++){var n=e[t].parentElement.getBoundingClientRect().top/a;e[t].style.top=n+"px"}}/Mobi/.test(navigator.userAgent)?windowHeight=screen.height:windowHeight=window.innerHeight;var universalParallax=function(){this.init=function(e){void 0===e&&(e={}),e={speed:void 0!==e.speed?e.speed:4,className:void 0!==e.className?e.className:"parallax"};for(var a,t,n=document.getElementsByClassName(e.className),l=0;n.length>l;l++){var i=document.createElement("div");n[l].parentNode.insertBefore(i,n[l]),i.appendChild(n[l]);var r=n[l].parentElement;r.className+="parallax--container","relative"!==window.getComputedStyle(r.parentElement,null).getPropertyValue("position")&&(r.parentElement.style.position="relative");var o=n[l].dataset.parallaxImage;void 0!==o&&(n[l].style.backgroundImage="url("+o+")",1===n[l].classList.length&&"parallax"===n[l].classList[0]&&Object.assign(n[l].style,{"background-repeat":"no-repeat","background-position":"center","background-size":"cover"}))}a=n,(t=e.speed)<1.2&&(t=0),calculateHeight(a,t),window.addEventListener("resize",function(){calculateHeight(a,t)}),window.addEventListener("scroll",function(){animateParallax(a,t)})}}; | ||
| "use strict";var windowHeight=window.innerHeight;function calculateHeight(e,t){for(var a=0;e.length>a;a++){var n=e[a].parentElement.scrollHeight,i=(windowHeight-n)/2,l=n+2*(i-i/t);e[a].style.height=l+"px"}}function animateParallax(e,t){for(var a=0;e.length>a;a++){var n=e[a].parentElement.getBoundingClientRect().top/t;e[a].style.top=n+"px"}}/Mobi/.test(navigator.userAgent)&&(windowHeight=screen.height);var universalParallax=function(){this.init=function(e){void 0===e&&(e={}),e={speed:void 0!==e.speed?e.speed:4,className:void 0!==e.className?e.className:"parallax"};for(var t,a,n=document.getElementsByClassName(e.className),i=0;n.length>i;i++){var l=document.createElement("div");n[i].parentNode.insertBefore(l,n[i]),l.appendChild(n[i]);var r=n[i].parentElement;r.className+="parallax__container","relative"!==window.getComputedStyle(r.parentElement,null).getPropertyValue("position")&&(r.parentElement.style.position="relative");var s=n[i].dataset.parallaxImage;void 0!==s&&(n[i].style.backgroundImage="url("+s+")",1===n[i].classList.length&&"parallax"===n[i].classList[0]&&Object.assign(n[i].style,{"background-repeat":"no-repeat","background-position":"center","background-size":"cover"}))}t=n,(a=e.speed)<1.2&&(a=0),calculateHeight(t,a),window.addEventListener("resize",function(){calculateHeight(t,a)}),window.addEventListener("scroll",function(){animateParallax(t,a)})}}; |
| { | ||
| "name": "universal-parallax", | ||
| "version": "1.0.13", | ||
| "version": "1.1.0", | ||
| "description": "Easy parallax plugin using pure javascript. Also works on mobile platforms. Cross browser support.", | ||
@@ -5,0 +5,0 @@ "main": "dist/universal-parallax.js", |
@@ -11,3 +11,3 @@ # Universal Parallax | ||
| - Mobile phone support | ||
| - Support for transparent backgrounds, without affecting content | ||
| - Support for transparent backgrounds - without affecting content | ||
@@ -19,10 +19,19 @@ ## Install | ||
| ###### #1 | ||
| Include the script in your project. | ||
| Include the script at the bottom of your project | ||
| ```html | ||
| <script src="node_modules/universal-parallax/dist/universal-parallax.min.js"></script> | ||
| ``` | ||
| ###### #2 | ||
| Choose between either.. | ||
| - Including `<link href="node_modules/universal-parallax/dist/universal-parallax.min.css" rel="stylesheet">` in your `<head>` section | ||
| - Or adding this CSS | ||
| - Including this in your `<head>` section | ||
| ```html | ||
| <link href="node_modules/universal-parallax/dist/universal-parallax.min.css" rel="stylesheet"> | ||
| ``` | ||
| - Or adding this CSS | ||
| -- _Gives more flexibility controlling the behaviour of bg images (see "optional" comment)_ | ||
| ```css | ||
@@ -36,3 +45,3 @@ .parallax--container { | ||
| left: 0; | ||
| z-index: -10; | ||
| z-index: -10; /* place further back if necessary */ | ||
| } | ||
@@ -46,3 +55,3 @@ | ||
| left: 0; | ||
| /* optional */ | ||
| /* optional - see step #3 */ | ||
| background-repeat: no-repeat; | ||
@@ -55,3 +64,3 @@ background-position: center; | ||
| ###### #3 | ||
| If `<section>` is your container, make the parallax element inside it, just before the closing tag. | ||
| If `<section>` is your container, make the parallax element inside it, just before the closing tag | ||
@@ -65,6 +74,7 @@ ```html | ||
| * You can also use a class to define your `background-image` in CSS, instead of using `data-parallax-image=""`. | ||
| * You can also use a class to define your `background-image` in CSS, instead of using `data-parallax-image=""` | ||
| ###### #4 | ||
| Fire up the JS function. | ||
| Fire up the JS function | ||
| ```js | ||
@@ -74,4 +84,10 @@ new universalParallax().init(); | ||
| ###### #5 | ||
| Check the result in your project | ||
| - If it resembles [the demo](https://marrio-h.github.io/universal-parallax/demo/) then you're done | ||
| - Pls [report any problems](https://github.com/marrio-h/universal-parallax/issues) you find! Thanks :) | ||
| ## Custom speed | ||
| You can change the parallax speed. | ||
| You can change the parallax speed; the higher the number, the slower the parallax effect. | ||
| ```js | ||
@@ -83,6 +99,8 @@ new universalParallax().init({ | ||
| Note: `speed: 1.2` is the minimum value before the background image is fixed. | ||
| **Note:** `speed: 1.2` is the minimum value before the background image is fixed. | ||
| ## Opacity | ||
| If desired, transparency can be added to one, or all parallax elements and it won't affect the opacity of your content above. | ||
| If desired, transparency can be added to one, or all parallax elements with CSS and it won't affect the opacity of your content above | ||
| ```css | ||
@@ -89,0 +107,0 @@ .parallax { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by7.69%
14
- Lines of code
- increased by0.94%
215
- Number of lines in readme file
- increased by21.18%
103
Worsened metrics
- Total package byte prevSize
- decreased by-0.96%
1802319
No dependency changes