jQuery toggleClass example

Toggle class name on click in jQuery

by royshoa

HTML

<section class="container">
  <div class="space"></div>
  <div class="image-container">
    <img class="simple-parallax" src="https://cdn-cms-localhost.f-static.com/uploads/1012/2000_5ed8ee0ca5099.jpg" alt="simpleParallax image" />
  </div>
  <div class="space"></div>
  <div class="image-container">
    <img class="simple-parallax" src="https://cdn-cms-localhost.f-static.com/uploads/1012/2000_5ed8ee0ca5099.jpg" alt="simpleParallax image" />
  </div>
  <div class="space"></div>
  <div class="image-container">
    <img class="simple-parallax" src="https://cdn-cms-localhost.f-static.com/uploads/1012/2000_5ed8ee0ca5099.jpg" alt="simpleParallax image" />
  </div>
  <div class="space"></div>
  <div class="image-container">
    <img class="simple-parallax" src="https://cdn-cms-localhost.f-static.com/uploads/1012/2000_5ed8ee0ca5099.jpg" alt="simpleParallax image" />
  </div>
  <div class="space"></div>
  <div class="image-container">
    <img class="simple-parallax" src="https://cdn-cms-localhost.f-static.com/uploads/1012/2000_5ed8ee0ca5099.jpg" alt="simpleParallax image" />
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/simpleParallax.min.js"></script>

CSS

body {
  min-height: 1500px;
}
.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  /* max-height: 400px;
  overflow: auto; */
}

/* .container > div {
flex: 100%;
} */
/* div{
overflow: hidden;
} */
img,
video {
  width: 100%;
  height: auto;
}

.simpleParallax {
  /* margin: 0 0 48px; */
}

.space {
  min-height: 100px;
}

.image-container {
  width: 100%;
  height: 567px;
  background: #2196F3;
  text-align: center;
  overflow: hidden;
}

JavaScript

// Run when the page ready (before images and other resource)
jQuery(function($) {

	  
  var image = document.getElementsByClassName('simple-parallax');


  new simpleParallax(image, {
    delay: 1, 
    orientation: 'down',
    scale: 2,
    overflow: true,
    customWrapper: '.image-container'
  });


});