Ascending balloon with a captivating parabolic display

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>

Answer №1

Set the initial position of the balloon by adjusting the left property to -50px.

To prevent scrollbars from appearing, add overflow: hidden to the container of the balloon. You can then use jQuery or JavaScript to dynamically adjust the width of the container based on the browser's viewport size.

Style with CSS

.balloon-container {
    position: relative;
    height: 200px; // Define the height of your container here
}

.balloon {
    position: absolute;
    left: -50px;
}

Enhance with jQuery

$(document).ready(function() {

  function resizeContainer() {
    $('.container').css('width', window.innerWidth);
  }

  function animateBalloon() {
    $('.balloon').css('left', '-50px');

    $('#promo').animate({
      left: '+=100%',
    }, 10000, 'linear', function() {
      animateBalloon();
    });
  }

  // Call functions on page load.
  resizeContainer();
  animateBalloon();

  $(window).resize(function() {
    // Re-run functions on window resize.
    resizeContainer();
  });

});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to conceal an element so that it only becomes visible when a user begins to input text

Hey there! I'm in the process of adding a search feature to my Jekyll site, and I've opted to use Simple-Jekyll-Search, which you can check out here: Link. Take a peek at what's inside my search.html: <input type="text" id="my-search-in ...

Incorporating a splash of color while changing the background color on scroll

Is it possible to include more colors between the "beginning-color" and the "ending-color" in this code that changes the background color on scroll? example $(document).ready(function(){ var scroll_pos = 0; var animation_begin_pos = 0; ...

Having issues passing parameters with Ajax, Python Bottle, Jquery, and JSON collaboration

Every time I make an AJAX request POST, the newUser() function seems to be ignoring any arguments being passed even though I have filled out both userInput and passInput fields. Here's the JS/JQ/AJAX code snippet: var userInput = document ...

Vue Functional Calendar - Easily manipulate selectedDates with the power of v-model

I am trying to set specific dates as selected in the vue functional-calendar (version 2.8.87) component (https://github.com/Digital-Threads/vue-functional-calendar). I have set up the v-model and can successfully detect dates selected by a mouse-click. Ho ...

Error in JavaScript/NodeJS

How can I modify this code snippet to return any of the specified values if they are set, and return null if none of them are set? var token = request.body.token || request.query.token || request.headers['x-access-token']; The issue is that whe ...

Can Mutation Observer be utilized in conjunction with a Three.js element in an A-Frame environment?

export class ColliderComponent { constructor() { this.observer = this.createMutationObserver(); this.registerAframeComponent(); } //Registers the AFRAME component. registerAframeComponent(){ const self = this; AFRAME.regi ...

Is it a wise decision to provide the client with a new token just one minute before the expiration of the old one?

When monitoring my backend, I constantly check the remaining time before the JWT expires, which is set to 15 minutes. If there is only one minute left or less, I generate a new JWT and include it in the response header as a setToken. The front-end can then ...

A guide to integrating ffmpeg with NuxtJS

I am completely new to Nuxt and currently in the process of migrating a Vue application that generates gifs using ffmpeg.wasm over to Nuxt.js. However, every time I try to access the page, the server crashes with the following error message: [fferr] reques ...

What is preventing me from applying JSON patches in both directions?

My current project involves merging JSON objects using patches following the guidelines outlined in RFC 7396. To achieve this, I am utilizing JSON Merge Patch along with Pretty JSON. Below is the code snippet I have: #!/usr/bin/env node var jsonmergepatch ...

Guide to successfully redirecting to a new page post login, along with sending a token as a handler to middleware using the express framework

My application utilizes nextJS, express JS, and JWT. I have created two pages - a login page and an admin page where the latter is protected and only accessible after verifying the token using JWT. My goal is to redirect users to the admin page immediately ...

Generate three random names from an array and assign them to an element

This website is amazing! I've interacted with so many awesome people here! Currently, I have successfully implemented code to get one random name from an array. However, I now want to display three different names each time, and I'm facing a roa ...

Issue with Event.target not functioning properly when clicking outside the div to close it

I am facing an issue with my main div and sub div, which is referred to as a form because it is enclosed within the main div. I am trying to close the form when clicking outside of the main div, but unfortunately, this functionality is not working as expec ...

Troubleshooting undefined results with AngularJS ng-repeat filter

My objective is to create a Letter Filter, where users can click on buttons from A to Z to filter the displayed data. When clicking on the letter 'A' button, only data starting with 'A' should be shown. However, I have encountered an i ...

Js: Automatically populating data into various input fields

I've encountered an issue with form input value injection using a <script> and POST requests. When I attempt to create another form with the same input field (same name and id), the value injection doesn't work, and troubleshooting has bee ...

What is the process for enabling a Submit button and updating its value following a successful Ajax response within a Django environment?

My current project involves using Django as the web framework. I am in the process of setting up an AWS lab or AWS account. To avoid multiple submissions, I have disabled the Submit button once the user enters information such as lab name, CIDR block, etc. ...

How can I access properties of generic types in TypeScript?

Converting the generic type to any is a valid approach (The type E could be a typescript type, class, or interface) of various entities like Product, Post, Todo, Customer, etc.: function test<E>(o:E):string { return (o as any)['property' ...

Tips for transferring data from an HTML textbox to a JavaScript variable

I'm currently working on a form that fetches data from a database and dynamically stores it in a table. There's a button labeled "add" which, when pressed by the user, adds a new row to the table. I also have a hidden counter that keeps track of ...

Issue with sorting feature in jquery jtable is not functioning properly

I'm currently working with jquery jtable and I'm facing an issue with sorting. Specifically, I want to sort based on the myPoolName column. Despite adding sorting:true to my code, the sorting feature does not seem to be working. Can someone pleas ...

Guide on bringing in Javascript file into your Ionic/Angular application

Within my Ionic 2 application, I have incorporated three.js along with a PLYLoader extension for three.js (accessible here: https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/PLYLoader.js) Integrating three.js is straightforward by includi ...

Learn how to easily navigate to your profile page by clicking on a button after logging into your account

I created a homepage with a button for users to either login or go to their profile. My intention is for the button to function as follows: When a user logs in, the button will display the username and clicking on it will take the user to their profile pa ...