Parallaxing scroll slides on touch screens

Question

I'm quite new to the jQuery scene and I've stumbled upon a problem here.

I have this parallaxing website working nicely when a mouse is present, but can't make it work on touch. Any help will be most welcome.

The commented out sections are my previous attempts of solving this.

var ticking = false;
var isFirefox = (/Firefox/i.test(navigator.userAgent));
var isIe = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent));
var scrollSensitivitySetting = 60; //Increase/decrease this number to change sensitivity to trackpad gestures (up = less sensitive; down = more sensitive) 
var slideDurationSetting = 600; //Amount of time for which slide is "locked"
var currentSlideNumber = 0;
//var totalSlideNumber = (".background").length;
var totalSlideNumber = 4;

// ------------- DETERMINE DELTA/SCROLL DIRECTION ------------- //

function parallaxScroll(evt) {
  if (isFirefox) {
    //Set delta for Firefox
    delta = evt.detail * (-120);
  } else if (isIe) {
    //Set delta for IE
    delta = -evt.deltaY;
  } else {
    //Set delta for all other browsers
    delta = evt.wheelDelta;
  }

  //$("#myElement").on("touchstart", function(e) {
  //  var startingY = e.originalEvent.touches[0].pageY;

  //  $("#myElement").on("touchmove", function(e) {
  //      currentY = e.originalEvent.touches[0].pageY;
  //      delta = currentY - startingY;
  //  });
  //});

  if (ticking != true) {
    if (delta <= -scrollSensitivitySetting) {
      //Down scroll
      ticking = true;
      if (currentSlideNumber !== totalSlideNumber - 1) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
    if (delta >= scrollSensitivitySetting) {
      //Up scroll
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
      }
      previousItem();
      slideDurationTimeout(slideDurationSetting);
    }
  }
}

// ------------- SET TIMEOUT TO TEMPORARILY "LOCK" SLIDES ------------- //
function slideDurationTimeout(slideDuration) {
  setTimeout(function() {
    ticking = false;
  }, slideDuration);
}

// ------------- ADD EVENT LISTENER ------------- //

var mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel";
window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false);



// ------------- SLIDE MOTION ------------- //

function nextItem() {
  var $previousSlide = $(".background").eq(currentSlideNumber - 1);
  $previousSlide.removeClass("up-scroll").addClass("down-scroll");
}

function previousItem() {
  var $currentSlide = $(".background").eq(currentSlideNumber);
  $currentSlide.removeClass("down-scroll").addClass("up-scroll");
}

Answer 1

I just made a little modification to your code, since touch events are the same in all browsers...we can skip checking which browser it is...so replace the code of checking the browser with

function parallaxScroll(evt) {    
        var touchobj = evt.changedTouches[0]; 
        var dist = parseInt(touchobj.clientX) - startx; 
     }

now we need to find two things

• 1. start point
• 2. distance traveled

1. starting point

---

 window.addEventListener('touchstart', function(e){
        var touchobj = e.changedTouches[0]; // reference first touch point (ie: first finger)
        startx = parseInt(touchobj.clientX); // get x position of touch point relative to left edge of browser(X and Y upto the choice)
        e.preventDefault();
    }, false);

2. distance traveled

---

var touchobj = evt.changedTouches[0]; 
        var dist = parseInt(touchobj.clientX) - startx;

The overall Code would be:

function parallaxScroll(evt) {    
    var touchobj = evt.changedTouches[0]; 
    var dist = parseInt(touchobj.clientX) - startx; 

  if (ticking != true) {
    if (dist <= -scrollSensitivitySetting) {
      //Down scroll
      ticking = true;
      if (currentSlideNumber !== totalSlideNumber - 1) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
    if (dist >= scrollSensitivitySetting) {
      //Up scroll
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
      }
      previousItem();
      slideDurationTimeout(slideDurationSetting);
    }
  }
}

// ------------- SET TIMEOUT TO TEMPORARILY "LOCK" SLIDES ------------- //
function slideDurationTimeout(slideDuration) {
  setTimeout(function() {
    ticking = false;
  }, slideDuration);
}

// ------------- SLIDE MOTION ------------- //

function nextItem() {
  var $previousSlide = $(".background").eq(currentSlideNumber - 1);
  $previousSlide.removeClass("up-scroll").addClass("down-scroll");
}

function previousItem() {
  var $currentSlide = $(".background").eq(currentSlideNumber);
  $currentSlide.removeClass("down-scroll").addClass("up-scroll");
}
 }

    var startx = 0;
    var dist = 0;
   window.addEventListener('load', function(){ 
    window.addEventListener('touchstart', function(e){
        var touchobj = e.changedTouches[0]; // reference first touch point (ie: first finger)
        startx = parseInt(touchobj.clientX); // get x position of touch point relative to left edge of browser
        e.preventDefault();
    }, false);
        window.addEventListener('touchmove', _.throttle(parallaxScroll, 60), false);
        }, false);

Make These modifications and keep the rest the same make your parallax thing work with the touch...If you want I made it even work with both touch and mouse. Lemme know if you want...