Adjusting animation placement when resizing the window

Is it possible to utilize jquery window.resize() to ensure that the positioning of the two donuts never interferes with the text in the middle of the home? I am unsure of how to connect the x and y values of the window size to adjust the top/left and bottom/right positioning.

Alternatively, is there a method to reduce the width and height of the donuts upon window resize?

Any assistance on this matter would be greatly appreciated!

html, body {
  margin: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  background-color: pink;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

#donut img,
#donut2 img {
  width: 500px;
  height: 500px;
}

#donut {
  width: auto;
  height: auto;
  position: absolute;
  animation: donut 2s;
  animation-fill-mode: forwards;
}
...
htmlcssanimationposition

Answer №1

Here is a solution you can try out:

#container {
  width: 100vw;
  height: 100vh;
  background-color: pink;
  display: flex;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#donut { width:30vw; }
#donut2 { width:30vw; }
#donut2 img, #donut img {
  width: 100%;
  max-width:100%;
  height:auto;
}

#donut {
  position: absolute;
  animation: donut 2s;
  animation-fill-mode: forwards;
}

@keyframes donut {
  0% {
    left: -5%;
    top: -5%;
    transform: translateZ(-100px);
  }
  100% {
    left: 5%;
    top: 5%;
    transform: translateZ(100px);
  }
}

#donut2 {
  position: absolute;
  animation: donut2 2s;
  animation-fill-mode: forwards;
}

@keyframes donut2 {
  0% {
    right: -5%;
    bottom: -5%;
    transform: translateZ(-100px);
  }
  100% {
    right: 5%;
    bottom: 5%;
    transform: translateZ(-100px);
  }
}

#homeText {
  width: 25vw;
  height: auto;
  text-align: center;
  font-size: 30px;
}

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

Ensure HTML5 video fills window completely without any overflow

I'm currently developing a new open-source alternative to Plex and I am facing some challenges with the in-browser video player. My goal is to have the video player maximize its size within the window during playback, similar to what Chrome and Netfli ...

csshtmlvideoprimefaces

Issue encountered while attempting to delete dynamically added fields

I'm facing an issue where I am adding 3 fields dynamically (2 text fields and 1 remove button). The add button is functioning correctly, but the problem arises with the remove function. Currently, it only removes the remove button itself and not the o ...

javascriptjqueryhtmltwitter-bootstrap

The function .click does not function properly when used with an anchor element within a figure tag

In my JavaScript-loaded figure, there is an image description and two buttons. Sometimes the description contains a link with a fig attribute, like this: <a fig="allow" href="#tt5">[1]</a> If the anchor is not in a figure and has a fig attrib ...

javascriptjqueryhtmlcss

What is the best way to ensure a PrimeVue TabPanel takes up the full vertical space and allows the content within the tabs to be scroll

I have created a sandbox demo to illustrate my issue. My goal is to make the content of tabs scroll when necessary but fill to the bottom if not needed. I believe using flex columns could be the solution, however, my attempts so far have been unsuccessful. ...

htmlcssvue.jsprimevue

What is the best way to ensure that when a div is opened, the information to the right does not get pushed down?

I have a functioning menu bar, but when it expands, the content below is pushed down even though it should not be affected. How can I adjust my code to prevent this issue? View my website here: <div id="menu_wrapper"> <div id="menu"> &l ...

htmlcss

Escaping an equal sign in JavaScript when using PHP

I am currently working on the following code snippet: print "<TR><TD>".$data->pass_name."</TD><TD><span id='credit'>".$data->credit_left."</span></TD><TD><input type='button' val ...

phpjavascripthtmlajax

Steps to create a zigzagging line connecting two elements

Is it possible to create a wavy line connecting two elements in HTML while making them appear connected because of the line? I want it to look something like this: Take a look at the image here The HTML elements will be structured as follows: <style&g ...

javascripthtmlcsscss-transitionscss3pie

Animating with JavaScript

I have a members button on my website that triggers a dropdown animation when clicked. However, the issue is that the animation occurs every time a page is loaded, even if the button is not clicked. I want the dropdown to only open when the button is click ...

javascriptjqueryhtmlanimation

The creation script in create-react-app automatically includes an external import in the CSS file

I am facing an issue with my create-react-app. Everything works perfectly fine when I run it using npm run start. However, after building it with npm run build, some CSS appears to be missing from the app. Upon investigation, I discovered that the file bu ...

cssnode.jsnpmcreate-react-app

Is there a way to include all images from a local/server directory into an array and then utilize that array variable in a different file?

I'm currently using Netbeans version 8.0.1 with PHP version 5.3 Here is a PHP file example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/199 ...

javascriptphphtmlarraysnetbeans

Creating a Dynamic Canvas Rendered to Fit Image Dimensions

I'm struggling with a piece of code that creates an SVG and then displays it on a canvas. Here is the Jsbin Link for reference: https://jsbin.com/lehajubihu/1/edit?html,output <!DOCTYPE html> <html> <head> <meta charset=&qu ...

javascripthtmlcsssvghtml5-canvas

What is a method to position an <img> on top of text without obscuring the text or resorting to CSS background or text-indent

To view the related code snippet, click on this link: http://jsfiddle.net/Ws8ux/ Is there a way to position the text under the logo without hiding it through display:none or text-indent? I am aiming to bring the image up while keeping the logo in the back ...

htmlcss

Moving from one page to another

I am attempting to create a transition effect between sections within a single-page application. All the sections are contained on the same page, with only one section displayed at a time while the rest are set to display none. When a specific event is tri ...

javascripthtmlcsscss-transitions

The <select> element in AngularJS 1.5 is showing the dropdown at unexpected moments, but only on iOS 10 devices

From the title, it's evident that this bug is both intriguing and frustrating. The issue lies with a regular select element in an Angular partial containing the following code: <select ng-options="availweek.weekNumber as availweek.weekNumber for a ...

htmliosangularjs

Resetting values in Javascript and JQuery when clicking a button

I've recently implemented a feature on my website header where clicking on the search button reveals a search bar, and clicking on the account button reveals an account bar. With some valuable assistance from Madalin, I was able to achieve this functi ...

javascriptjquerycss

Navigating between pages using the ExpressJS and Angular 1 routing system

Can someone help me troubleshoot an issue I'm having with my Express API and Angular front-end? Whenever I try to access the /about route, it keeps defaulting back to index.html and displaying a 404 error message. Can you take a look at my code and pi ...

htmlangularjsexpress

What is the best way to conceal a set of columns and reveal them upon clicking a header column?

Currently working with Bootstrap 3 and successfully split the top into two columns. I am aiming to replicate the design shown in the sample image without relying on JavaScript or jQuery. Upon clicking "Quick Info", there should be a new set of columns reve ...

htmlcsstwitter-bootstrap

Please do not exceed two words in the input field

I need to restrict the input field to only allow up to two words to be entered. It's not about the number of characters, but rather the number of words. Can this restriction be achieved using jQuery Validation? If not, is there a way to implement it u ...

javascriptjqueryhtmljquery-validate

Using jQuery to swap out intricate background designs

I'm attempting to use jQuery to change the background-color of an element from: background: transparent linear-gradient(#C0B 45%, #C0B) to: background-color:#000; Unfortunately, my attempt to remove the background property with .removeAttr() has n ...

jquerycssbackground

Automating web tasks through Excel VBA with SeleniumBasic has been a game-changer for me. However, I am facing

My aim is to load the messages found using WDrv.FindElementsByXPath("//*[@id='divMessageLines']/div"), but I am unsure of how to retrieve the values individually. The number of values for each search varies. The HTML segment in questio ...

htmlvbaseleniumwebautomation