By moving the scroll it does i ++

0

Good night, I need to do a function, I was able to do the logic but I'm not able to execute ... The logic is as follows ... when scrolling the variable that started with 0 becomes 1, moved again from 1 becomes 2 and so goes in succession ... this count will have a maximum limit so that I can zero and start again ... because this count I will use to manipulate opacity of div and transform:scale() of div

How can I do it?

Follow my code I've been able 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><scripttype="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>
    
asked by anonymous 01.04.2018 / 02:50

0 answers