Horizontal scroll parallax effect

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container" id="container-x">
        <div id="content" class="parent">
            <div class="child" style="background-image:url(&quot;http://www.lorempixel.com/1200/780/people&quot;);">
                <h1>Heading</h1>
                <p href="#x-2">People</p>
            </div>
            <div class="child" style="background-image:url(&quot;http://www.lorempixel.com/1200/780/animals&quot;);">
                <h1>Heading</h1>
                <p>Animals </p>
            </div>
            <div class="child" style="background-image:url(&quot;http://www.lorempixel.com/1200/780/city&quot;);">
                <h1>Heading</h1>
                <p>City </p>
            </div>
            <div class="child" style="background-image:url(&quot;http://www.lorempixel.com/1200/780/cats&quot;);">
                <h1>Heading</h1>
                <p>Cats </p>
            </div>
            <div class="child" style="background-image:url(&quot;http://www.lorempixel.com/1200/780/food&quot;);">
                <h1>Heading</h1>
                <p>Foods </p>
            </div>
            <div class="child" style="background-image:url(&quot;http://www.lorempixel.com/1200/780/sports/&quot;);">
                <h1>Heading</h1>
                <p>Sport </p>
            </div>
        </div>
    </div>
  </body>

</html>

// Code goes here

$(function() { 
// - horizontal scrolling effect
/* this parameter is responsive need think about automatisation getting of wight*/
    var max_scroll_length = 0;//4000;// equal 6 photo 780x638
    document.onmousemove = function(e) {
        max_scroll_length = ($("div.child").width() * ($("div.child").length - 1));
};
    var counter_ = 0;
    var scroll_speed = 60;
    var elem = document.getElementById('container-x');

    if (elem.addEventListener) {
      if ('onwheel' in document) {
        // IE9+, FF17+
        elem.addEventListener("wheel", onWheel);
      } else if ('onmousewheel' in document) {
        // old action name
        elem.addEventListener("mousewheel", onWheel);
      } else {
        // Firefox < 17
        elem.addEventListener("MozMousePixelScroll", onWheel);
      }
    } else { // IE8-
      elem.attachEvent("onmousewheel", onWheel);
    } 
    
    function onWheel(e) {
      e = e || window.event;    
   var delta = e.deltaY || e.detail || e.wheelDelta;
    if(delta == 100 && counter_ < max_scroll_length){
        $("#content").scrollLeft((counter_ += scroll_speed));           
      }
    if(delta == -100 && counter_ > 0){
          $("#content").scrollLeft((counter_ -= scroll_speed));        
      }
    if(counter_ > 0 && counter_ < max_scroll_length){
      e.preventDefault ? e.preventDefault() : (e.returnValue = false);
      }
    }
 /* Click element function */    
    var i = $("div.child").width();
    $("div.child").click(function(event) {       
      var width_obj = $(this).width();   
        if(i < (max_scroll_length + 200)){
            $("#content").scrollLeft(i); 
        // (width_obj+6) width correction
            counter_ = i;
             i += (width_obj+6);            
         }else{             
             $("#content").scrollLeft(0); 
             i = width_obj;
              counter_ = 0;
         }
	});    	    				
});

/* Styles go here */

* {
  padding:0;
  margin:0;
}

.parent {
  width:100%;
  height:100vh;
  overflow:hidden;
  /*overflow-x:scroll;*/
  overflow-x:hidden;
  white-space:nowrap;
}

.child {
  display:inline-block;
  vertical-align:top;
  width:100%;
  height:100vh;
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
}

.h1, h1 {
  float:right;
  color:white;
  font-size:65px;
  padding:10px;
}

p {
  float:right;
  color:white;
  font-size:35px;
  padding:10px;
  clear:both;
}

.left-col p, .left-col h1 {
  float:left;
  color:white;
  font-size:35px;
  padding:10px;
  clear:both;
}

.decoration-other-content {
  width:100%;
  height:105vh;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  padding:0;
  margin-top:10px;
  margin-bottom:10px;
}

@media (max-width:767px) {
  .decoration-other-content {
    width:100%;
    height:39vh;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    padding:0;
    margin-top:10px;
    margin-bottom:10px;
  }
}

@media (max-width:767px) {
  .parent {
    width:100%;
    height:43vh;
    overflow:scroll;
  }
}

@media (max-width:767px) {
  .child {
    height:40vh;
    background-attachment:scroll;
  }
}

@media (max-width:767px) {
  .h1, h1 {
    float:right;
    color:white;
    font-size:35px;
    padding:10px;
  }
}

@media (max-width:767px) {
  p {
    float:right;
    color:white;
    font-size:20px;
    clear:both;
    padding:10px;
  }
}