Interactive Drone Animation with Parallax Effect – HTML, CSS, & JS

Explanation:

HTML Structure: The HTML defines a #banner div containing the #drone-box, which holds the drone image and its rotors.

CSS Styling: The CSS styles the banner with a background image and positions the drone and its rotors. The rotors have a continuous rotation animation defined by the @keyframes rule.

JavaScript Functionality: The JavaScript uses jQuery to listen for mouse movements over the #banner. As the mouse moves, it calculates new positions for the #drone-box to create a parallax effect, making the drone appear to follow the cursor.

External Resources:

jQuery Library: The script tag includes the jQuery library from a CDN to facilitate DOM manipulation.

Images: The drone and rotor images are linked directly from their URLs. Ensure these links are accessible; if not, you might need to download the images and host them locally or on a reliable server.

<!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>Drone Animation</title>
  <style>
    /* CSS code */
    * {
      margin: 0;
      padding: 0;
    }
    #banner {
      width: 100%;
      height: 100vh;
      position: absolute;
      background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(https://i.postimg.cc/2jtKpGMM/pic.jpg);
      background-position: center;
      background-size: cover;
    }
    #drone-box {
      margin: 150px auto;
      width: 200px;
      position: relative;
      transition: 2s;
    }
    .drone-pic {
      width: 100%;
    }
    .left-pic, .right-pic {
      width: 80px;
      top: 0;
      position: absolute;
      animation: rotation 0.2s linear infinite;
    }
    .left-pic {
      left: -11px;
    }
    .right-pic {
      right: -11px;
    }
    @keyframes rotation {
      100% {
        transform: rotateY(360deg);
      }
    }
  </style>
</head>
<body>
  <div id="banner">
    <div id="drone-box">
      <img src="https://i.postimg.cc/XJHDYkJZ/drone.png" class="drone-pic" alt="Drone">
      <img src="https://i.postimg.cc/PJCVpvpS/drone-left.png" class="left-pic" alt="Left Rotor">
      <img src="https://i.postimg.cc/j2Bgzqyt/drone-right.png" class="right-pic" alt="Right Rotor">
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // <a href="https://easywptutorials.com/javascript-tutorial/javascript-code-execution/">JavaScript code</a>
    $('#banner').mousemove(function(e) {
      var moveX = (e.pageX * -1 / 2) + 300;
      var moveY = (e.pageY * -1 / 3) + 120;
      $('#drone-box').css({
        'transform': 'translate3d(' + moveX + 'px,' + moveY + 'px,0)'
      });
    });
  </script>
</body>
</html>

Related Posts


shell_exec returns string with “238” removed?

shell_exec should return the complete output of the command it executes as a string, without removin...

What Is SEO and How It Works for Your Website?

Key Takeaways SEO, or Search Engine Optimization, is essential for boosting your website’s vis...

If and Else in single.php: Display Multiple Categories

Want to showcase multiple categories in your single.php file using “if” and “else&...

What’s the point of the default .htaccess?

That’s a very insightful and detailed analysis of the default WordPress .htaccess rules! You&#...

Recent Posts