Question

0

139

Vistas

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>

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-13T09:07:35.002Z

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>

0

139

jQuery scroll while not after

1 Respuestas

0

Encuentra empleos remotos

Andres GPT