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>