Animation in JavaScript style.top value not working as expected

Question

I am trying to achieve parallax effect where I have almost done but I have problem in Heading tag <h1 id="text">Merry Chrismas</h1> which is not animating. <h1 id="text">Merry Chrismas</h1> goes to top when scrolling.

 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>

[ JSBIN Demo ]

Answer 1

Try modifying to this:

text.style.top = value * -0.2 + '%';

#text {
  position: fixed;
  top: 0;
}

You can adjust to the speed that you need

Animation in JavaScript style.top value not working as expected

Question

1 answers

solution1
0 2021-12-31 08:41:09

Animation in JavaScript style.top value not working as expected

Question

1 answers

solution1 0 2021-12-31 08:41:09

solution1
0 2021-12-31 08:41:09