javascriptjquerynicescroll

Toggle class on Element on Horizontal scroll with nicescroll

I am making a website in which i am going to use Horizontal Scroll. I am using jQuery.nicescroll for smooth scrolling.

$(function() { 
  var scroll = $(window).scrollLeft();
		if (scroll >= 0) {
  		$('#animateBtn').click(function(){
        $('.section-parent').addClass('half');
        // Smooth Scroll
        $('#js-slideContainer').niceScroll({
          cursorwidth: "0px",
          cursorborder: "5px solid transparent",
          scrollspeed: 260,
          smoothscroll: true
        });
      });
		}
   

    // Custom Cursor
      var follower, init, mouseX, mouseY, positionElement, printout, timer;
      follower = document.getElementById('follower');
      printout = document.getElementById('printout');
      mouseX = (function(_this) {
        return function(event) {
          return event.clientX;
        };
      })(this);
      mouseY = (function(_this) {
        return function(event) {
          return event.clientY;
        };
      })(this);
      positionElement = (function(_this) {
        return function(event) {
          var mouse;
          mouse = {
            x: mouseX(event),
            y: mouseY(event)
          };
          follower.style.top = mouse.y + 'px';
          return follower.style.left = mouse.x + 'px';
        };
      })(this);
      timer = false;
      window.onmousemove = init = (function(_this) {
        return function(event) {
          var _event;
          _event = event;
          return timer = setTimeout(function() {
            return positionElement(_event);
          }, 1);
        };
      })(this);
});
* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	width: 100%;
}
body {
	padding: 100px;
	margin: 0;
	background: #e2e1dc;
}
::-webkit-scrollbar {
  display: none;
}
.card {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.section-parent {
  width: 87.5vw;
  height: calc(100vh - 12.5vw);
  margin-right: 6.25vw;
  margin-bottom: 0;
  transition: width 1.6s cubic-bezier(.73,.01,.36,.99);
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.section-bg {
  background: url("https://via.placeholder.com/700x300") center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.half {
  width: 49.7792vh;
}
.section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.grey {
  background-color: #bfbeb7;
}
.green {
	background-color: green;
}
.white-smoke {
  background-color: white-smoke;
}

.caption {
  text-align: center;
}


/*** Cursor ***/
html {
  cursor: none;
}
#follower {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  pointer-events: none;
}
#follower #circle1 {
  position: absolute;
  -webkit-animation: pulse 2s infinite; 
  animation: pulse 2s infinite;
  background: #fff;
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}
#follower #circle2 {
  position: absolute;
  -webkit-animation: pulse 4s infinite; 
  animation: pulse 4s infinite;
  background: rgba(200,0,0,0.8);
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}
@-moz-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@-webkit-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@-o-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://nicescroll.areaaperta.com/wp-content/plugins/jnicescroll/js/jquery.nicescroll.min.js"></script>
<div id="follower">
  <div id="circle1"></div>
  <div id="circle2"></div>
</div>

<div class="card" id="js-slideContainer">
    <div class="section-parent">
      <div class="section-bg">
        <button type="button" id="animateBtn" class="animateBtn">Click Here</button>
      </div>   
    </div>
    <div class="section grey">
      <div class="caption">
        <h2>Some Heading</h2>
        <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</P>
      </div>
    </div>  
    <div class="section green">
      <div class="caption">
        <h2>Other Heading</h2>
        <P>Error explicabo architecto iure, numquam quisquam dolores itaque quos aliquid laudantium eaque, voluptas.</P>
      </div>
    </div> 
  </div>

For better understanding, open the snippet in Full View.

Here is the Fiddle

As you can see in the demo

.section-parent will add a class .half on button click. what i want is to remove .half class when user scroll back to leftmost and again add class .half on scroll. this time the animation should perform without click on button.

for reference, please check this website: villafeltrinelli

Solution

  • I added a scroll function and modified your scroll selector

    $(function() { 
  var scroll = $("#js-slideContainer").scrollLeft();
		if (scroll >= 0) {
  		$('#animateBtn').click(function(){
        $('.section-parent').addClass('half');
        // Smooth Scroll
        $('#js-slideContainer').niceScroll({
          cursorwidth: "0px",
          cursorborder: "5px solid transparent",
          scrollspeed: 260,
          smoothscroll: true
        });
      });
		}
   
  $("#js-slideContainer").scroll(function() {
    if ($("#js-slideContainer").scrollLeft() == 0) {
      $('.section-parent').removeClass('half');
    } else {
      $('.section-parent').addClass('half');
    }
  });    

    // Custom Cursor
      var follower, init, mouseX, mouseY, positionElement, printout, timer;
      follower = document.getElementById('follower');
      printout = document.getElementById('printout');
      mouseX = (function(_this) {
        return function(event) {
          return event.clientX;
        };
      })(this);
      mouseY = (function(_this) {
        return function(event) {
          return event.clientY;
        };
      })(this);
      positionElement = (function(_this) {
        return function(event) {
          var mouse;
          mouse = {
            x: mouseX(event),
            y: mouseY(event)
          };
          follower.style.top = mouse.y + 'px';
          return follower.style.left = mouse.x + 'px';
        };
      })(this);
      timer = false;
      window.onmousemove = init = (function(_this) {
        return function(event) {
          var _event;
          _event = event;
          return timer = setTimeout(function() {
            return positionElement(_event);
          }, 1);
        };
      })(this);
});
    * {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	width: 100%;
}
body {
	padding: 100px;
	margin: 0;
	background: #e2e1dc;
}
::-webkit-scrollbar {
  display: none;
}
.card {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.section-parent {
  width: 87.5vw;
  height: calc(100vh - 12.5vw);
  margin-right: 6.25vw;
  margin-bottom: 0;
  transition: width 1.6s cubic-bezier(.73,.01,.36,.99);
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.section-bg {
  background: url("https://via.placeholder.com/700x300") center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.half {
  width: 49.7792vh;
}
.section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.grey {
  background-color: #bfbeb7;
}
.green {
	background-color: green;
}
.white-smoke {
  background-color: white-smoke;
}

.caption {
  text-align: center;
}


/*** Cursor ***/
html {
  cursor: none;
}
#follower {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  pointer-events: none;
}
#follower #circle1 {
  position: absolute;
  -webkit-animation: pulse 2s infinite; 
  animation: pulse 2s infinite;
  background: #fff;
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}
#follower #circle2 {
  position: absolute;
  -webkit-animation: pulse 4s infinite; 
  animation: pulse 4s infinite;
  background: rgba(200,0,0,0.8);
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}
@-moz-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@-webkit-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@-o-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
@keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://nicescroll.areaaperta.com/wp-content/plugins/jnicescroll/js/jquery.nicescroll.min.js"></script>
<div id="follower">
  <div id="circle1"></div>
  <div id="circle2"></div>
</div>

<div class="card" id="js-slideContainer">
    <div class="section-parent">
      <div class="section-bg">
        <button type="button" id="animateBtn" class="animateBtn">Click Here</button>
      </div>   
    </div>
    <div class="section grey">
      <div class="caption">
        <h2>Some Heading</h2>
        <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</P>
      </div>
    </div>  
    <div class="section green">
      <div class="caption">
        <h2>Other Heading</h2>
        <P>Error explicabo architecto iure, numquam quisquam dolores itaque quos aliquid laudantium eaque, voluptas.</P>
      </div>
    </div> 
  </div>