parallax_scrolling.js

var Parallax = (function() {
  let SCROLL_STOP = 130;

  let selectors = {
    main: '.js-parallax',
    title: '.js-parallax__title',
    content: '.js-parallax__content'
  }

  function createMap(in_min, in_max, out_min, out_max) {
    return function (val) {
	  return (val - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
    }
  }

  let translateMap = createMap(0, SCROLL_STOP, 0, 130);
  let opacityMap = createMap(0, SCROLL_STOP, 1, 0);
  let scaleMap = createMap(0, SCROLL_STOP, 1, 0.8);

  function onScroll(evt) {
    let scrollTop = $(evt.target).scrollTop();
    let translateValue = translateMap(scrollTop);
    let opacityValue = opacityMap(scrollTop);
    let scaleValue = scaleMap(scrollTop);

    if (
       scrollTop > SCROLL_STOP ||
       !selectors.$content ||
       !selectors.$title
    ) return;

	selectors.$content.css({
    	'transform': 'translate(0, -' + translateValue + 'px)'
	});

    selectors.$title.css({
    	'opacity': opacityValue,
        'transform': 'scale(' + scaleValue + ')'
	});
  }

  function querySelectors () {
	selectors.$main = $(selectors.main);
    selectors.$content = $(selectors.content);
    selectors.$title = $(selectors.title);
  }

  function bindEvents () {
	$(window).scroll(onScroll)
  }

  function init() {
   	querySelectors()
    bindEvents()
  }

  return {
    init: init
  }
})()

$(document).ready(function () {
	Parallax.init()
});

title parallax scrolling example https://sketch.com.kw/collections/vacuum-jugs/products/geo-vacuum-jug