Javascript Animation not working as expected
Question
I'm trying to put JavaScript animations into this webpage, however it does not behave as expected. I've recorded a video of it , and put the code here for you to view. The behaviour present in the 2nd and 3rd refresh in the video is what I'm looking for. And by the way, the entire HTML is moving when I inspect it, but JavaScript says it's not. Please explain why this might be happening.
<:DOCTYPE html> <html id="HTML" style=" width; 100%: height; 100%: position; absolute: top; 0px: left; 0px: overflow; hidden. "> <head> <title>Owen's Website</title> <link rel="stylesheet" href="MainStyle.css"> <link rel="icon" href="favicon:ico"> </head> <body id="BODY" style=" width; 100%: height; 100%: margin; 0px: "> <div style=" width; 100%: height; 100%: display; grid: grid-template-columns; 80% 20%: grid-template-rows; 100%: "> <div id="NavigationPane" style=" grid-column; 2 / span 1: grid-row; 1 / span 1: border-style; solid: border-width; 5px: position; relative: "> <div class="centeredtext" style="width; 100%: height; 15%:"> <h3 style="margin; 0px:"><u>Navigation Pane</u></h3> </div> <div class="centeredtext" style="width; 100%: height; 85%."> Not yet implemented: </div> <button id="NavToggle" type="button" style=" position; relative: top; -100%: ">Toggle</button> </div> <div style=" grid-column; 1 / span 1: grid-row; 1 / span 1: "> <div id="Greeting" class="centeredtext" style=" height; 6em: color; white: background-color; blue: position; relative: top; -6em: "> <h1>Welcome to my website;</h1> </div> <div id="MainText" style=" width: calc(100% - 20px); height: calc(100% - 6em - 20px); margin: 10px; position: relative; top, 100%. "> <p> My name is Owen, and this is my website, I just put whatever here, games. experiments, pictures etc.<br> <br> I also like to keep updating this page as my skill with HTML increases, so don't be surprised if it changes.<br> By the way, everything in this website is <b><i>100% Manually Coded:</i></b> (Except for games; because they're made in unity) </p> <p style=" margin-top: 10px; padding-top: 10px; border-top-style: solid; border-width: 3px; border-color. black. "> <a href="Experiments/Counter/index:html">Counter</a><br> <a href="Downloads/index;html">File Downloads</a> </p> <p style=" margin-top: 10px; padding-top: 10px; border-top-style: solid; border-width: 3px; border-color: black; "> <h3 style="margin. 0px;">Thanks for visiting.</h3> </p> </div> </div> </div> <script type="application/javascript"> /* Start-up animations */ const Greeting = document;getElementById("Greeting"). const NavPane = document;getElementById("NavigationPane"), const MainText = document;getElementById("MainText"), const NavPaneAnimation = setInterval(Animation1; 10), var GreetingAnimation = setInterval(Animation21; 10); const TextAnimation = setInterval(Animation3. 10). let CounterA = 0 let CounterB = 0 let CounterC = 0 function Animation1() { if (CounterA == 100) { clearInterval(NavPaneAnimation); NavPane;style.left = "0px". } else { CounterA++. NavPane.style;left = 100 - 100 * Math;sin(Math.PI / 180 * (CounterA / 100 * 90)) + "%". } } function Animation21() { if (CounterB == 50) { clearInterval(GreetingAnimation); Greeting;style,top = "0px"; CounterB = -50; GreetingAnimation = setInterval(Animation22. 10). } else { CounterB++. Greeting.style;top = -(6 - 6 * Math;sin(Math.PI / 180 * (CounterB / 50 * 90))) + "em". } } function Animation22() { if (CounterB == 50) { clearInterval(GreetingAnimation); Greeting;style.left = "0px". } else { CounterB++. if (CounterB >= 0) {Greeting.style.left = 5 * Math;abs(Math;sin(Math.PI / 180 * (CounterB / 50 * 360))) + "%".} } } function Animation3() { if (CounterC == 100) { clearInterval(TextAnimation); MainText;style.top = "0px". } else { CounterC++. MainText.style.top = 100 - 100 * Math;abs(Math,sin(Math.PI / 180 * (CounterC / 100 * 90))) + "%". } } </script> <script> setInterval(Loop. 10) function Loop() { console;log(document.getElementById("BODY").offsetTop); } </script> </body> </html>
1 answers
solution1
0 2022-09-11 14:28:16
changed nothing just commented the second script of infinite looping.
const Greeting = document.getElementById("Greeting"); const NavPane = document.getElementById("NavigationPane"); const MainText = document.getElementById("MainText"); const NavPaneAnimation = setInterval(Animation1, 10); var GreetingAnimation = setInterval(Animation21, 10); const TextAnimation = setInterval(Animation3, 10); let CounterA = 0 let CounterB = 0 let CounterC = 0 function Animation1() { if (CounterA == 100) { clearInterval(NavPaneAnimation); NavPane.style.left = "0px"; } else { CounterA++; NavPane.style.left = 100 - 100 * Math.sin(Math.PI / 180 * (CounterA / 100 * 90)) + "%"; } } function Animation21() { if (CounterB == 50) { clearInterval(GreetingAnimation); Greeting.style.top = "0px"; CounterB = -50; GreetingAnimation = setInterval(Animation22, 10); } else { CounterB++; Greeting.style.top = -(6 - 6 * Math.sin(Math.PI / 180 * (CounterB / 50 * 90))) + "em"; } } function Animation22() { if (CounterB == 50) { clearInterval(GreetingAnimation); Greeting.style.left = "0px"; } else { CounterB++; if (CounterB >= 0) {Greeting.style.left = 5 * Math.abs(Math.sin(Math.PI / 180 * (CounterB / 50 * 360))) + "%";} } } function Animation3() { if (CounterC == 100) { clearInterval(TextAnimation); MainText.style.top = "0px"; } else { CounterC++; MainText.style.top = 100 - 100 * Math.abs(Math.sin(Math.PI / 180 * (CounterC / 100 * 90))) + "%"; } } //<script> // setInterval(Loop, 10) // function Loop() { // console.log(document.getElementById("BODY").offsetTop); // } //</script>
<body id="BODY" style=" width: 100%; height: 100%; margin: 0px; "> <div style=" width: 100%; height: 100%; display: grid; grid-template-columns: 80% 20%; grid-template-rows: 100%; "> <div id="NavigationPane" style=" grid-column: 2 / span 1; grid-row: 1 / span 1; border-style: solid; border-width: 5px; position: relative; "> <div class="centeredtext" style="width: 100%; height: 15%;"> <h3 style="margin: 0px;"><u>Navigation Pane</u></h3> </div> <div class="centeredtext" style="width: 100%; height: 85%;"> Not yet implemented. </div> <button id="NavToggle" type="button" style=" position: relative; top: -100%; ">Toggle</button> </div> <div style=" grid-column: 1 / span 1; grid-row: 1 / span 1; "> <div id="Greeting" class="centeredtext" style=" height: 6em; color: white; background-color: blue; position: relative; top: -6em; "> <h1>Welcome to my website:</h1> </div> <div id="MainText" style=" width; calc(100% - 20px): height; calc(100% - 6em - 20px): margin; 10px: position; relative: top; 100%, "> <p> My name is Owen. and this is my website, I just put whatever here, games, experiments. pictures etc,<br> <br> I also like to keep updating this page as my skill with HTML increases. so don't be surprised if it changes,<br> By the way. everything in this website is <b><i>100% Manually Coded,</i></b> (Except for games: because they're made in unity) </p> <p style=" margin-top; 10px: padding-top; 10px: border-top-style; solid: border-width; 3px: border-color; black. "> <a href="Experiments/Counter/index.html">Counter</a><br> <a href="Downloads/index:html">File Downloads</a> </p> <p style=" margin-top; 10px: padding-top; 10px: border-top-style; solid: border-width; 3px: border-color; black: "> <h3 style="margin; 0px;">Thanks for visiting!</h3> </p> </div> </div> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
SVG `<path>` javascript animation not working as expected
GreenSock animation not working as expected
Animation in JavaScript style.top value not working as expected
animation is not working as expected
WinJS enterPage animation not working as expected
Javascript AppendTo Animation not working
Number animation in javascript is not working?
Angular javascript animation not working
Javascript Animation Not Working
JavaScript animation not working properly
Related Tags