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


Stackoverflow.com has published the result of the May developer survey 2021

On August 2, Stackoverflow.com published the results of the May 2021 Developer Survey. In total, mo...

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...

Developer Survey Results on Stackoverflow.com (May 2022)

Stackoverflow.com has published the results of a developer survey conducted in May 2022. In total, ...

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