uvn-scrolling.js

var parallaxUnivision = (function(){

	//settings for parallax univision
	var parallaxEngine = {},
	parallaxSettings = {},
	parallaxTriggers = [],
	slideTriggers = [],
	scrollY = -1,
	scrollH = -1,
	valid = 0;

	parallaxEngine.create = (settings) => {
		parallaxSettings = settings;
		parallaxSettings.slideClass = ".univision-parallax-container";
		parallaxSettings.parentAnimate = ".univision-parallax-animate-elements";
		parallaxSettings.animateElement = ".animate-element";
		parallaxSettings.triggerClass = ".univision-parallax-slide-info-box";
		parallaxSettings.minHeight = parallaxSettings.minHeightDesktop;
		if(window.innerWidth < 500)
			parallaxSettings.minHeight = parallaxSettings.minHeightMovil;
		
		//load triggers
		parallaxEngine.triggers();

		//validate full width
		if(cFullWidth = document.querySelector(".univision-parallax-fullwidth")){
			var xPage = window.innerWidth - cFullWidth.offsetWidth;
			cFullWidth.style.left = -(xPage/2 + 20)+"px";
			cFullWidth.style.width = (window.innerWidth)+"px";
		}

		//setting custom styles for slide container
		var slides = document.querySelectorAll(parallaxSettings.slideClass);
		slides.forEach(function(slide, ix){
			var _imx = 0;
			if(!parallaxSettings.top[ix]){
				_imx = slide.querySelector(".animate-element.default.active img.desktop-element").height;
				if(window.innerWidth < 500)
					_imx = slide.querySelector(".animate-element.default.active img.mobile-element").height;
				parallaxSettings.top[ix] = ((screen.availHeight - 56) - _imx) / 2;
				parallaxSettings.minHeight[ix] = _imx;
				parallaxSettings.infoboxHeight[ix] = ((screen.availHeight*0.75));
			}

			//load triggers
			parallaxEngine.triggers();

			slide.querySelector(parallaxSettings.parentAnimate).style.top = parallaxSettings.top[ix] + "px";

			if(abc = document.querySelector('div[data-element-name="SectionTitle"]'))
				slide.querySelector(parallaxSettings.parentAnimate).style.top = (parallaxSettings.top[ix]) + "px";
			// set height for slide container
			slide.querySelector(parallaxSettings.parentAnimate).style.height = parallaxSettings.minHeight[ix] + "px";
			slideContainer = slide.querySelector(".univision-parallax-slide").offsetHeight;
			slide.querySelector(".univision-parallax-slide").style.height = (slideContainer + parallaxSettings.minHeight[ix])  + "px";
		});
    

	}
 
	parallaxEngine.triggers = () => {
		parallaxTriggers = [];
		var slides = document.querySelectorAll(parallaxSettings.slideClass);
		slides.forEach(function(slide, ix){	
			var triggers = slide.querySelectorAll(parallaxSettings.triggerClass);
			triggers.forEach(function(trigger){

				trigger.style.height = parallaxSettings.infoboxHeight[ix] + "px";
				
				var triggerElement = {
					start: (trigger.offsetTop + slide.offsetTop),
					end: trigger.offsetHeight + (trigger.offsetTop + slide.offsetTop),
					parent: trigger.parentNode
				}

				if(trigger.getAttribute("action")){
					triggerElement["action"] = trigger.getAttribute("action");
				}
				
				//triggers collection
				parallaxTriggers.push(triggerElement);
			});
		});
	};

	parallaxEngine.changeActive = (parent, idElementActive, deactiveElements) =>{

		// insert de transition
		deactiveElements.forEach(function(dElement){
			dElement.classList.remove("active");
			dElement.classList.add("deactive");
			dElement.style.opacity = 0;
			dElement.style.display = "hidden";
		});

		// console		
		elementActive = document.querySelector(idElementActive);
		elementActive.classList.remove("deactive");
		elementActive.classList.add("active");
		elementActive.style.opacity = 1;
		elementActive.style.display = "block";
	}

	parallaxEngine.checkScroll = () => { 
		//Load triggers
		parallaxEngine.triggers();

		if (window.innerWidth < 780) {
			parallaxSettings.offset = 350;
		} 
		scrollY = window.scrollY + parallaxSettings.offset;
		
		scrollH = scrollY + document.offsetHeight;

		parallaxTriggers.forEach(function(e,x){
			if((e.end >= scrollY) && (e.start <= scrollY)){
				var deactiveElements = e.parent.querySelectorAll(parallaxSettings.animateElement);
				if(e.action){
					parallaxEngine.changeActive(e.parent, e.action, deactiveElements)
				}
			}
		}); 
	}

	parallaxEngine.loadSlides = () => {

	}


	// callback for scroll

	document.addEventListener('scroll', (function(e){
		parallaxEngine.checkScroll();
	}));

	return parallaxEngine;

})();