"Mesmerizing Animated Ball Reels | HTML, CSS, JavaScript Animation Tutorial"

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Animated Ball</title>

  <style>

    body {

      margin: 0;

      overflow: hidden;

    }


    #ball {

      width: 50px;

      height: 50px;

      background-color: #3498db;

      border-radius: 50%;

      position: absolute;

    }

  </style>

</head>

<body>


<div id="ball"></div>


<script>

  document.addEventListener('DOMContentLoaded', function () {

    const ball = document.getElementById('ball');

    const screenWidth = window.innerWidth;

    const screenHeight = window.innerHeight;

    const ballSize = 50;


    let x = screenWidth / 2 - ballSize / 2;

    let y = screenHeight / 2 - ballSize / 2;


    let speedX = 5;

    let speedY = 3;


    function animateBall() {

      x += speedX;

      y += speedY;


      if (x + ballSize > screenWidth || x < 0) {

        speedX = -speedX;

      }


      if (y + ballSize > screenHeight || y < 0) {

        speedY = -speedY;

      }


      ball.style.left = x + 'px';

      ball.style.top = y + 'px';


      requestAnimationFrame(animateBall);

    }


    animateBall();

  });

</script>


</body>

</html>


Comments

Post a Comment

Popular posts from this blog

Cute Lamp Login Page

Looking for a fun, interactive way to spice up a dark-themed UI? Today, we are building a "Cute Lamp" login page . This single-file solution features a fully scalable SVG cartoon lamp with changing expressions, smooth color-shifting neon glows, and a pull-string interaction cycle that toggles the light and the UI theme! Below is the complete HTML, CSS, and JavaScript code. Just copy it and save it as an .html file. index.html Copy Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cute Lamp Interactive Login</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); :root { --bg-color: #0b0f14; --font-family: 'Poppins', sans-serif; ...
Read more

Header Animation | Bold Text & 3D Effect | CSS Tutorial|Cursor animation effect using html css js

Code  <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Header Animation</title>   <style>     header nav ul {       list-style: none;       padding: 0;       margin: 0;     }     header nav ul li {       display: inline-block;       margin-right: 20px;     }     header nav ul li a {       text-decoration: none;       color: #333; /* default color */       position: relative;       transition: color 0.3s ease, transform 0.3s ease;       font-weight: bold; /* make text bold */     }     header nav ul li a:hover {       color: red; /* hover color */       transform: translateZ...
Read more

Portfolio website

Kanani Shubham - Portfolio Kanani Shubham About Portfolio Education Contact Creative Developer & Designer I build visually stunning websites with modern designs and innovative user interfaces that enhance the user experience. About Me With a passion for both design and technology, I have developed a wide range of skills in web development. From front-end design to back-end solutions, I aim to create aesthetically pleasing and functional websites for businesses. Education Bachelor's in Computer Science XYZ University - 2018 to 2022 Full-S...
Read more