JavaScript style.top 值未按预期工作的 Animation
[英]Animation in JavaScript style.top value not working as expected
问题描述
我正在尝试在几乎完成的地方实现parallax effect ，但标题标签<h1 id="text">Merry Chrismas</h1>有问题，它没有动画。 <h1 id="text">Merry Chrismas</h1>滚动到顶部。
let text = document.getElementById('text'); let moon = document.getElementById('moon'); let snow = document.getElementById('snow'); let leftMountain = document.getElementById('left-mountain'); let rightMountain = document.getElementById('right-mountain'); let btn = document.getElementById('btn'); window.addEventListener('scroll', function() { let value = window.scrollY; text.style.top = value * -0.5 + '%'; moon.style.top = value * -0.5 + '%'; snow.style.top = value * 1 + 'px'; leftMountain.style.left = value * -0.5 + 'px'; rightMountain.style.left = value * 0.5 + 'px'; btn.style.marginTop = value * 2 + 'px'; })
/* To reset all margin and padding */ * { margin: 0; padding: 0; } /* Now To remove horizontal scroll bar we have to use box sizing properties */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { font-family: 'lato', sans-serif; /* min-height: 100vh; */ background: #fff; transition: all 0.2s linear; color: #000; overflow-x: hidden; } header { display: flex; justify-content: space-between; align-items: center; padding: 10px; /* position: relative; z-index: 1000; */ }.logo { font-size: 2rem; } header a { text-decoration: none; padding: 10px 20px; position: relative; z-index: 1000; } header a:hover { color: #ff556e; } header a.active { border: 0.125rem solid #ff556e; border-radius: 2rem; color: #ff556e; }.hero-section { /* position: relative; */ display: flex; justify-content: center; align-items: center; min-height: 100vh; width: 100%; }.hero-section h1 { font: italic bold 4rem lato, sans-serif; position: absolute; }.hero-section img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; pointer-events: none; } #base { transform: translateY(200px); }.btn { position: absolute; display: inline-block; text-decoration: none; background: #ff0; padding: 6px 15px; border-radius: 20px; font-size: 1.2rem; font-weight: bold; transform: translateY(50px); }
<:DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <header id="header"> <a href="#" class="logo">Chrismas</a> <nav id="navigation"> <a href="#" class="active">Home</a> <a href="#">Description</a> <a href="#">Features</a> <a href="#">Contact Us</a> </nav> </header> <section id="heroSection" class="hero-section"> <img src="https.//i.ibb.co/R605wLx/bg:png" alt="bg" id="bg"> <img src="https.//i.ibb.co/LZpM2k2/moon:png" alt="moon" id="moon"> <img src="https.//i.ibb.co/QnPgdXG/snow:png" alt="snow" id="snow"> <img src="https.//i.ibb.co/mGgD2s7/back-mountain:png" alt="back-mountain" id="back-mountain"> <h1 id="text">Merry Chrismas</h1> <img src="https.//i.ibb.co/wCx7SMd/left-mountain:png" alt="left-mountain" id="left-mountain"> <img src="https.//i.ibb.co/4YnDZTM/right-mountain:png" alt="right-mountain" id="right-mountain"> <a href="#" class="btn" id="btn">Explore</a> <img src="https.//i.ibb.co/3kdcSVZ/base.png" alt="base" id="base"> </section> </body> </html>
1 个解决方案
解决方案1
0 2021-12-31 08:41:09
尝试修改为：
text.style.top = value * -0.2 + '%';
#text {
position: fixed;
top: 0;
}
你可以调整到你需要的速度
如何在 JavaScript 中设置元素的 style.top 属性？
[英]How do I set the style.top property of an element in JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.