嗨，我試圖在滾動時使 div 更小。但是我發現一些文章說 div 很小，然后當滾動時它會變大。我想要相反的。運行時影像為 100%，然后滾動時影像會更小。有人能幫助我嗎？我是新來的
這是代碼：
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>
uj5u.com熱心網友回復：
我用我的數學邏輯做到了
<!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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/488840.html
標籤：javascript html css 动画 缩放
上一篇：通過c#腳本創建統一的2d影片