Hola, traté de hacer que el div fuera más pequeño cuando me desplazaba. sin embargo, encontré un artículo en el que el div es pequeño y luego, cuando se desplaza, se hace más grande. yo queria lo contrario cuando se ejecuta, la imagen es del 100%, luego, cuando se desplaza, será más pequeña. ¿Puede alguien ayudarme por favor? Soy nuevo en esto
Este es el código:
https://codesandbox.io/s/sharp-lewin-to1o2b?file=/index.html
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> </head> <body> <div id="animatedDiv"></div> </body> </html> <style> #animatedDiv { background: #dc143c; min-height: 9000px; min-width: 20%; position: absolute; } </style> <script> var aDiv = document.getElementById("animatedDiv"); function changeWidth() { var scrollVal = window.pageYOffset; var scrollSlow = scrollVal / 4; //Changing CSS Width aDiv.style.width = Math.min(Math.max(scrollSlow, 20), 100) + "%"; } window.addEventListener( "scroll", function () { requestAnimationFrame(changeWidth); }, false ); </script>Lo hice con mi lógica matemática.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> </head> <body> <div id="animatedDiv"></div> </body> </html> <style> #animatedDiv { background: #dc143c; min-height: 9000px; width: 100%; position: absolute; } </style> <script> var aDiv = document.getElementById("animatedDiv"); function changeWidth() { var scrollVal = window.pageYOffset; //Changing CSS Width /* This lags if you scroll fast.. aDiv.style.width = (100 - (scrollVal*100/800)) + "%"; I just tried it out, so instead use the code down above, 800 to 1500 doesn't matter, I just increased time of animation */ //NOTE this line checks if PERCENT <= 10 then sets width to 10% ( (100 - (scrollVal*100/1500)) ) <= 10 ? aDiv.style.width = "10%" : aDiv.style.width = (100 - (scrollVal*100/1500)) + "%"; } window.addEventListener( "scroll", function () { requestAnimationFrame(changeWidth); }, false ); </script>