CODEWITHSUNDEEP
javascriptjquery
Screenload
Screenload

Reputation: 439

jQuery scroll while not after

I want to make a script that resizes a div based on its position. Like a cover flow.

I'm using the jQuery scroll() method, but it only triggeres AFTER the scroll, not while scrolling. This results in an offset of the effect to the top or bottom.

I also tried an interval but that is even worse.

Is there a method to make this more "realtime"?

$(window).scroll(function() {

  windowOffset = $(window).scrollTop();
  windowMiddle = $(window).height() / 2;

  $('li').each(function() {
    offset = Math.abs(windowMiddle - $(this).position().top + windowOffset);
    $(this).text(offset);
    $(this).css({
      width: 700 - offset
    });
  });

});
body {
  margin: 0;
  padding: 0;
}

.scroll {
  position: absolute;
  display: block;
  width: 100%;
}

ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: block;
  margin: auto;
  width: 300px;
  height: 70px;
  background: yellow;
  margin-bottom: 20px;
  transition: all .25s;
  text-align: center;
  line-height: 70px;
  font-size: 50px;
}

.helper {
  display: block;
  position: fixed;
  width: 100%;
  top: 50%;
  left: 0%;
  background: red;
  height: 1px;
}
<!DOCTYPE html>
<html lang="de" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="helper">

  </div>
  <div class="scroll">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>

</html>

Upvotes: 0

Views: 30

Answers (1)

Marc
Marc

Reputation: 11613

I removed transition: all .25s;. Is this the effect you want?

$(window).scroll(function() {

  windowOffset = $(window).scrollTop();
  windowMiddle = $(window).height() / 2;

  $('li').each(function() {
    offset = Math.abs(windowMiddle - $(this).position().top + windowOffset);
    $(this).text(offset);
    $(this).css({
      width: 700 - offset
    });
  });

});
body {
  margin: 0;
  padding: 0;
}

.scroll {
  position: absolute;
  display: block;
  width: 100%;
}

ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: block;
  margin: auto;
  width: 300px;
  height: 70px;
  background: yellow;
  margin-bottom: 20px;
  /*transition: all .25s;*/
  text-align: center;
  line-height: 70px;
  font-size: 50px;
}

.helper {
  display: block;
  position: fixed;
  width: 100%;
  top: 50%;
  left: 0%;
  background: red;
  height: 1px;
}
<!DOCTYPE html>
<html lang="de" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="helper">

  </div>
  <div class="scroll">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>

</html>

Upvotes: 2

Related Questions