Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Move an HTML div in a curved path
To move an HTML div in a curved path, you can use CSS animations, JavaScript, or HTML5 Canvas. JavaScript provides the most flexibility and browser compatibility for complex curved animations.
- CSS Transitions - Simple curved paths using cubic-bezier
- JavaScript (jQuery) - Custom curved animations with precise control
- HTML5 Canvas - Complex curved paths with mathematical precision
We'll focus on JavaScript solutions using jQuery's animate() method and modern CSS transforms.
jQuery animate() Method
The animate() method performs custom animations by changing CSS properties over time.
Syntax
selector.animate(params, [duration, easing, callback]);
Parameters
- params - A map of CSS properties that the animation will move toward
- duration - Optional parameter for animation duration (milliseconds)
- easing - Optional easing function for transition smoothness
- callback - Optional function called when animation completes
Example: Simple Curved Path with jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#myDiv {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<button onclick="moveCurved()">Move in Curve</button>
<script>
function moveCurved() {
$("#myDiv").animate({left: 200, top: 100}, 1000)
.animate({left: 350, top: 200}, 1000)
.animate({left: 200, top: 300}, 1000);
}
</script>
</body>
</html>
Example: CSS Transform Curved Animation
<!DOCTYPE html>
<html>
<head>
<style>
#curvedDiv {
width: 60px;
height: 60px;
background-color: blue;
border-radius: 50%;
position: absolute;
animation: curvedPath 3s ease-in-out infinite;
}
@keyframes curvedPath {
0% { transform: translate(0, 0); }
25% { transform: translate(100px, -50px); }
50% { transform: translate(200px, 0); }
75% { transform: translate(300px, 50px); }
100% { transform: translate(400px, 0); }
}
</style>
</head>
<body>
<div id="curvedDiv"></div>
</body>
</html>
Advanced Curved Path with Mathematical Precision
<!DOCTYPE html>
<html>
<head>
<style>
#mathDiv {
width: 40px;
height: 40px;
background-color: green;
position: absolute;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="mathDiv"></div>
<button onclick="startCurvedAnimation()">Start Sine Wave</button>
<script>
function startCurvedAnimation() {
const div = document.getElementById('mathDiv');
let x = 0;
function animate() {
x += 2;
const y = Math.sin(x * 0.02) * 100 + 150;
div.style.left = x + 'px';
div.style.top = y + 'px';
if (x < 800) {
requestAnimationFrame(animate);
}
}
animate();
}
</script>
</body>
</html>
Comparison of Methods
| Method | Complexity | Browser Support | Performance |
|---|---|---|---|
| CSS Keyframes | Low | Excellent | Best |
| jQuery animate() | Medium | Good | Good |
| JavaScript Math | High | Excellent | Good |
Conclusion
CSS keyframes provide the smoothest performance for predefined curves, while JavaScript offers precise control for complex mathematical paths. Choose based on your animation complexity and browser requirements.
Updated on: 2026-03-15T23:18:59+05:30
422 Views
Advertisements