Clash Royale CLAN TAG#URR8PPP

Animation positioning on window resize

I was wondering if it was possible to use jquery window.resize() to ensure the two donuts positioning never collides with the home text in the middle. I'm not sure how to link the x and y of the window size to change the top/left and bottom/right positioning values.

Or is there a way I could decrease the width and height of the donuts on window resize?

Any help would be 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;


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

100%
left: -5%;
top: -5%;
transform: translateZ(100px);



#donut2
width: auto;
height: auto;
position: absolute;
animation: donut2 2s;
animation-fill-mode: forwards;


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

100%
right: -5%;
bottom: -5%;
transform: translateZ(-100px);



#homeText
width: 100%;
height: auto;
text-align: center;
font-size: 30px;


<div id="container">
<div id="donut">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Glazed-Donut.jpg">
</div>

<div id="homeText">
<p>
Reward Points
</p>

<p>Get Your Daily Sweet Rewards</p>
</div>

<div id="donut2">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Glazed-Donut.jpg">
</div>
</div>

1 Answer
1

Please Try This. I think this should be work:-

#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;



By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.