jQuery addClass example

Change class name on click in jQuery

by Sampath_Madhuranga

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- parallax -->
        <div class="iframe-container2">
            <div class="content">
                <div class="background">
                  <div class="layer layer-1"></div>
                  <div class="layer layer-2"></div>
                  <div class="layer layer-3"></div>
                </div>
            </div>
        </div>
<!-- partial -->
       <div class="">
         <div class="text">
           <p>In hac habitasse platea dictumst. Vivamus nec est et augue blandit aliquam quis non magna. Nunc velit nisi, porta ac libero in, porttitor placerat purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ut posuere quam. Aenean in leo mattis, convallis dolor vel, tempor lectus.</p>
           <p>Elit nulla vulputate ex, sed porta est risus ac lorem. Duis sed blandit felis. In hac habitasse platea dictumst. Vivamus nec est et augue blandit aliquam quis non magna. Nunc velit nisi, porta ac libero in, porttitor placerat purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ut posuere quam. Aenean in leo mattis, convallis dolor vel, tempor lectus.</p>
           <p>Duis sed blandit felis. Integer dictum, mi eget tristique semper, elit nulla vulputate ex, sed porta est risus ac lorem. In hac habitasse platea dictumst. Vivamus nec est et augue blandit aliquam quis non magna. Vestibulum ante ipsum primis.</p>
           <p>Integer dictum, mi eget tristique semper, elit nulla vulputate ex, sed porta est risus ac lorem. Duis sed blandit felis. In hac habitasse platea dictumst. Vivamus nec est et augue blandit aliquam quis non magna. Nunc velit nisi, porta ac libero in, porttitor placerat purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ut posuere quam. Aenean in leo mattis, convallis dolor vel, tempor lectus.</p>
        ...

CSS

* {
  box-sizing: border-box;
}

.iframe-container2{
  position: relative;
  width: 100%;
  padding-bottom: 50%; 
  height: 0;
}

.iframe-container .content{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.layer {
  position: absolute;
  background-position: center;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.layer-1 {
  background-image: url("https://i.imgur.com/bwEm8WB.png");
    margin-top: 8%;
    overflow: hidden;
    background-repeat: no-repeat;
  z-index: -3;
}

.layer-2 {
  background-image: url("https://i.imgur.com/XxTPjmC.png");
    background-repeat: no-repeat;
    overflow: hidden;
  z-index: -2;
}

.layer-3 {
  background-image:  url("https://i.imgur.com/F4xnzjU.png");
    /* margin-top: 21em; */
    overflow: hidden;
    background-repeat: no-repeat;
  z-index: -1;
}

JavaScript

$(window).bind('scroll',function(e){
    parallaxScroll();
});

function parallaxScroll(){
   var scrolled = $(window).scrollTop(); 
   $('.layer-1').css('top',(0+(scrolled*0.25))+'px');
   $('.layer-2').css('top',(0+(scrolled*0.5))+'px');
   $('.layer-3').css('top',(0-(scrolled*0))+'px');
   $('.rock-1').css('top',(400-(scrolled*0.8))+'px');
   $('.rock-2').css('top',(200-(scrolled*0.6))+'px');
   $('.rock-3').css('top',(500-(scrolled*0.4))+'px'); 
   $('.rock-4').css('top',(600-(scrolled*0.5))+'px'); 
   $('.rock-5').css('top',(600-(scrolled*0.7))+'px'); 
   $('.rock-6').css('top',(400-(scrolled*0.7))+'px'); 
   $('.rock-7').css('top',(600-(scrolled*0.5))+'px'); 
   $('.rock-8').css('top',(200-(scrolled*0.2))+'px');
   $('.rock-9').css('top',(200-(scrolled*0.4))+'px');
}