JavaScript Animation Ideas 2023
Edited Version Of Previous Article:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="loGo">L<span>o</span>G<span>o</span></div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>FAQs</li>
<li>Courses</li>
</ul>
</nav>
</header>
<div class="linehei">
<div class="dot" id="dot1"></div>
<div class="dot" id="dot2"></div>
<div class="dot" id="dot3"></div>
<div class="dot" id="dot4"></div>
</div>
<footer>
<div class="logo">
<div class="main">
<p class="p">L<span>o</span>G<span>o</span></p>
</div>
<div class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis, veritatis? Porro quibusdam velit, quas
similique dolore culpa. Vitae, laborum sed!
</div>
</div>
<div class="list_1 pages">
<div class="heading">
<h2>Pages</h2>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Help</li>
</ul>
</div>
<div class="list_2 useful">
<div class="heading">
<h2>UseFul</h2>
</div>
<ul>
<li>Freelancing</li>
<li>Youtube Earning</li>
<li>Fiverr Courses</li>
<li>Blogging Tutorial</li>
</ul>
</div>
</footer>
<script>
let dot1 = document.getElementById('dot1')
let dot2 = document.getElementById('dot2')
let dot3 = document.getElementById('dot3')
let dot4 = document.getElementById('dot4')
setInterval(() => {
let x = Math.random()*240+20;
let y = Math.random()*200+30;
dot1.style.top = `${x}px`
dot1.style.bottom = `${y}px`
dot1.style.left = `${x}px`
dot1.style.right = `${y}px`
dot2.style.left = `${y}px`
dot2.style.bottom = `${x}px`
dot2.style.top = `${y}px`
dot2.style.right = `${x}px`
dot3.style.right = `${y}px`
dot3.style.left = `${x}px`
dot3.style.top = `${y}px`
dot3.style.bottom = `${x}px`
dot4.style.bottom = `${x}px`
dot4.style.top = `${y}px`
dot4.style.left = `${y}px`
dot4.style.right = `${x}px`
}, 1200);
</script>
</body>
</html>