jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<body>

  <div class="scrolling-wrapper">

    <div class="image_container">

      <img src="http://mattieumoreaudomecq.com/wp-content/uploads/CM_1.png" class="image_test">

    </div>

    <div class="image_container">

      <img src="http://mattieumoreaudomecq.com/wp-content/uploads/CM_1.png">

    </div>
    
  </div>

</body>

CSS

body {
  
  height:100%;
  margin:0;
}

.scrolling-wrapper {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
width: auto;
height: 100vh;
white-space: nowrap;
}

.image_container {
  height:100vh;
  position:relative;
    margin-left:500px;
  margin-right:500px; 
}

.image_container img {
  
  height:100%;
  width:auto;
  position:absolute;
  bottom:0px;
  transform-origin: bottom center;
 
}

JavaScript

$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta);
e.preventDefault();
});
});

$(window).scroll(function() {

var $image = $(".image_test");
var $rt = ($("body").width() - ($image.offset().left + $image.outerWidth()));
  
  console.log($rt);
});