I have created a basic animation featuring a balloon moving from the left to the right side of the screen. However, I am interested in transforming it into a parabolic movement instead of a linear animation. Additionally, I would like the animation to start from the right side and hide towards the left side of the screen.
Below is the code snippet:
$(document).ready(function() {
function loop() {
$('#promo').css({
left: 0
});
$('#promo').animate({
left: '+=100%',
}, 10000, 'linear', function() {
loop();
});
}
loop();
});
#promo {
position: absolute;
z-index: 500;
left: 0px;
top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="promo">
<img border="0" alt="promo balloon" src="http://www.placehold.it/50" />
</div>