When moving the scroll it makes i++

Asked

Viewed 70 times

0

Good evening, I need to do a function, I managed to make the logic but I’m not able to perform... The logic is as follows... when scrolling the variable that was started with 0 becomes 1, moved again from 1 to 2 and so on... this count will have a maximum limit so that I can reset and start again... because this count I will use to manipulate the opacity of the div and transform:scale() of the div

How can I do?

follows my code I’ve managed to do so far

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <style type="text/css">
    body {
      overflow-y: scroll;
      height: 300em;
      background-color: #000;
      padding: 0;
      margin: 0;
    }

    #container {
      width: 100%;
      height: 100%;
      border: 2px solid;
      position: fixed;
      text-align: center;
    }

    #box1,
    #box2,
    #box3 {
      color: #ffffff;
      font-size: 34px;
      opacity: 0;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="box1">
      <h1>2015</h1>
    </div>
    <div id="box2">
      <h1>2016</h1>
    </div>
    <div id="box3">
      <h1>2017</h1s>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    window.addEventListener('load', function () {
      var box1 = document.getElementById('box1'),
        docHeight = document.documentElement.offsetHeight;
      var box2 = document.getElementById('box2'),
        docHeight = document.documentElement.offsetHeight;
      var box3 = document.getElementById('box3'),
        docHeight = document.documentElement.offsetHeight;

      box1.style.display = "block";
      box1.style.opacity = 1;
      box2.style.display = "none";
      box3.style.display = "none";

      window.addEventListener('scroll', function () {

        var scrolled = window.scrollY / (docHeight - window.innerHeight),
          opacityStyle = scrolled;

          var scrollRolle = window.scrollY / (docHeight - window.innerHeight),
          SizeStyle = 'scale( 0.'+ x + ')';

        if (scrolled >= 0) {
          //show ou hidden
          box3.style.display = "none";
          box2.style.display = "none";
          box1.style.display = "block";

          //scroll  
          box1.style.transform = SizeStyle;
          box1.style.opacity = opacityStyle;

          //opacity
          box2.style.opacity = 0;
          box3.style.opacity = 0;
        }
        if (scrolled >= 0.5) {
          //show ou hidden
          box1.style.display = "none";
          box3.style.display = "none";
          box2.style.display = "block";

          //scroll
          box2.style.transform = SizeStyle;
          box2.style.opacity = opacityStyle;

          //opacity
          box1.style.opacity = 0;
          box3.style.opacity = 0;
        }
        if (scrolled >= 0.8) {

          //show ou hidden
          box1.style.display = "none";
          box2.style.display = "none";
          box3.style.display = "block";

          //scroll
          box3.style.transform = SizeStyle;
          box3.style.opacity = opacityStyle;

          //opacity
          box1.style.opacity = 0;
          box2.style.opacity = 0;
        }
      }, false);

    });
  </script>
</body>

</html>
javascript jquery front-end
  • 1

    I think explaining the effect in practice would make it clearer.

  • The event scroll fires many times for each scroll, I think you’ll want to make a debauch. You can give an example of the use of this feature?

  • Then I do not understand your statement... mock?

  • Then @dvd the effect would be kind of a 3d transition, when the user rolls the scrol a div has been growing and increasing opacity, when it reached a certain point of the scroll it would disappear and start all over again in the second div... thus giving effect in 3d (I think it’s confusing to explain in writing)

  • you are creating 3 times the same docHeight variable, either it is global or you must create one for each object: docHeight01, docHeight02, docHeight03

No answers

Browser other questions tagged javascript jquery front-end

You are not signed in. Login or sign up in order to post.