parallax-react-js - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

build/lib/ParallaxContainer.js

		@@ -15,5 +15,7 @@ import React from "react";
		}
		//select all ParallaxLayers that are children to the ParallaxContainer in a live HTMLCollection that updates by itself
		var childcollection = thisContainer.current ? thisContainer.current.getElementsByClassName("Parallax-Layer") : new HTMLCollection;
		thisContainer.current.onscroll = function () {
		try { //use try catch block to better handle errors created by the strange behaviour of references together with hotreload
		onscroll(thisContainer.current, setPrevScroll, prevScroll); //pass the current ParallaxContainer, the setter function for "prevScroll" and the value of "prevScroll" to the "onscroll" function
		onscroll(thisContainer.current, setPrevScroll, prevScroll, childcollection); //pass the current ParallaxContainer, the setter function for "prevScroll" and the value of "prevScroll" to the "onscroll" function
		}
		@@ -31,12 +33,11 @@ catch (error) { //handle errors
		//function then calculates the needed "translateY" value for the scroll behaviour to work as expected.
		function onscroll(container, setPrevScroll, prevScroll) {
		function onscroll(container, setPrevScroll, prevScroll, childcollection) {
		var deltaScroll = container.scrollTop - prevScroll; //calculate the pixels scrolled since the lasr "onscroll" event
		setPrevScroll(container.scrollTop); //set "prevScroll" so "deltaScroll" can be calculated properly the next time "onscroll" runs
		var childrenarray = container.querySelectorAll('.Parallax-Layer'); //select all ParallaxLayers that are children to the ParallaxContainer
		for (var i = 0; i < childrenarray.length; i++) { //loop through the ParallaxLayers. For loop is faster than foreach so for loop is used.
		var prevPosY = childrenarray[i].style.transform == "" ? 0 : parseFloat(childrenarray[i].style.transform.replace("translateY(", "").replace("px)", "")); //get the previous "translateY" value so it can later be added on top
		for (var i = 0; i < childcollection.length; i++) { //loop through the ParallaxLayers. For loop is faster than foreach so for loop is used.
		var prevPosY = childcollection[i].style.transform == "" ? 0 : parseFloat(childcollection[i].style.transform.replace("translateY(", "").replace("px)", "")); //get the previous "translateY" value so it can later be added on top
		try { //use try catch again because of the strange way refs behave when hotreload is used.
		//calculate new "tranlateY" value based on wanted speed of each Layer,
		//the current position and the distance scrolled between now and the last "onscroll" event.
		childrenarray[i].style.transform = "translateY(" + (prevPosY + deltaScroll * (1 - parseFloat(childrenarray[i].getAttribute("parallaxSpeed").replace("%", "")) / 100)).toString() + "px)";
		childcollection[i].style.transform = "translateY(" + (prevPosY + deltaScroll * (1 - parseFloat(childcollection[i].getAttribute("parallaxSpeed").replace("%", "")) / 100)).toString() + "px)";
		}
		@@ -43,0 +44,0 @@ catch (error) { //handle errors

package.json

		{
		"name": "parallax-react-js",
		"version": "1.0.9",
		"version": "1.0.10",
		"description": "A libary for managing scroll speed of different components in react.",
		@@ -5,0 +5,0 @@ "scripts": {

parallax-react-js - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics