CODEWITHSUNDEEP
jqueryanimationtransitionshow-hideslideup
Troy
Troy

Reputation: 211

jQuery Animation - Multiple Elements

I have been trying to achieve an effect on a webpage which I have achieved once, but I want to apply it to multiple page sections. However I'm having an issue with positioning and getting the desired animation

I'm using jQuery and the slideUp method. I have the following code;

(function() {

    var pageEl = $('div.first-layer');

    $(document).on('scroll', function() {
        pageEl.slideUp(1300, function() { $(document).off('scroll').remove(); });
    });
})();

This has the desired effect;

As you can see I have managed to achieve this animation once with the above code but I want to be able to apply this effect on scroll, with 3 different elements.

My idea was to attach an id/class and for each class have a different scroll event attached to it, when it reaches the desired scroll point for each class/id hide the other 2 elements.

If anyone could point in the right direction or offer some advice It would be appreciated. Been stuck on this for a while now. If you would like more information please just ask.

Thank you.

edit: I have created a JSFiddle, for you to see what I' trying to achieve; https://jsfiddle.net/tdatkxrf/4/

Upvotes: 0

Views: 69

Answers (1)

Spluf
Spluf

Reputation: 820

Ok, so, depending on how you want it to trigger the event you might have to play a bit more with it, right now it's extra sensitive, but here it is:

Edit: on Plunkr I have modified the sensitivity by adding a new variable that counts the scrolling. I will leave this as it is so you can see both implementation (plunker with the variable, answer without). plunkr: https://plnkr.co/edit/02mko4f5ZSqSDLtlvDwR?p=preview

html:

<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1 style="text-align: center; font-family: helvetica;">jQuery slideUp</h1>
    <div class="container" style="display: flex; align-items: center; flex-direction: column; position: relative; background: grey;">
      <div id="section-one" style="height: 300px; width: 300px; background: #cc6699;">
        <h1 style="text-align: center; font-family: helvetica;">Section One</h1>
      </div>
      <div id="section-two" style="display:none; height: 300px; width: 300px; background: #cc9966;">
        <h1 style="text-align: center; font-family: helvetica;">Section Two</h1>
      </div>
      <div id="section-three" style="display: none; height: 300px; width: 300px; background: #6699cc;">
        <h1 style="text-align: center; font-family: helvetica;">Section Three</h1>
      </div>
    </div>
  </body>

</html>

jQuery:

// Code goes here

$(document).ready(function() {

  var e1  = $('#section-one');
  var e2 = $('#section-two');
  var e3 = $('#section-three');

  var sections = [e1, e2, e3];

$('.container').bind('mousewheel', function(e){scrollCheck(e);});

var scrollCheck = function(e){
    if(e.originalEvent.wheelDelta /120 > 0) {
      for(i= 0; i<sections.length;i++){
        j=i-1;
        if(sections[i].attr('display') != "none" && i > 0){
          sections[i].slideUp(1300);
          sections[i].attr('display', "none");
          sections[j].slideDown(1300);
          sections[j].attr('display', "");
          return;
        }
      }
    }
    else{
      for(i= 0; i<sections.length;i++){
        j=i+1;
        if(sections[i].attr('display') != "none" && i+1 < sections.length){
          sections[i].slideUp(1300);
          sections[i].attr('display', "none");
          sections[j].slideDown(1300);
          sections[j].attr('display', "");
          return;
        }
      }
    }
  }
});

there are also some packages to detect the mousewheel events, you might want to have a look at one of those.

Upvotes: 1

Related Questions