Quiero hacer un script que cambie el tamaño de un div según su posición. Como un flujo de cobertura.
Estoy usando el método jQuery scroll(), pero solo se activa DESPUÉS del desplazamiento, no mientras se desplaza. Esto da como resultado una compensación del efecto hacia arriba o hacia abajo.
También probé un intervalo pero eso es aún peor.
¿Hay algún método para hacer esto más "en tiempo real"?
$(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>transition: all .25s; . ¿Es este el efecto que quieres?
$(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>