Animate image once at the center and then finally fixed the image at the Top-Left corner of the HTML Page

HTML & CSS
1

Hi,

Below is the scenario that needs to be develope.

On page load, after 5 seconds the image should animate from the center to the front of the page and then again go back. Initially the size of the image should be small and grow gradually as it animates and moves front of the page and then the image should gradually decrease in size and go back centrally and then from there it should move to the top-left corner of the page and fixed it there for always.

Can anyone guide me how to do this in html and jquery?

Thanks & Regards,
Gopi Krishna T

2

Hi there @Gopal_Krishna welcome to the forums.

Can you show us how far you have got with your HTML and jQuery?

3

I am able to animate back and forth. But then getting problem in moving image from back to top-left corner. Still working on that part.

Thanks & Regards,
Gopi Krishna

4

Hi there Gopal_Krishna,

we don’t need javascript, especially frameworks, to do this. :mask:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="yourpage.css" media="screen">

<style media="screen">
img {
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    padding:0;
    border:0 solid #000;
    background-color:#8b7b7b;
    animation: stuff 22.5s forwards;
}
@keyframes stuff {
0% {
    width:0
 }
22.2%{
    width:0;
    top:calc(50%);
    left:calc(50%);
 }
44.4%{
    width:500px;
    top:calc(50% - 157px);
    left:calc(50% - 250px);
 }
66.6%{
    width:0;
    top:calc(50%);
    left:calc(50%);
 }
77.7%{
    width:0;
    top:0;
    left:0;
    padding:0;
    border:0 solid #000;
 }
100%{
    width:25%;
    top:0.5em;
    left:0.5em;
    padding:5px;
    border:1px double #000
 }
 }
</style>

</head>
<body> 

<img src="http://www.coothead.co.uk/images/face-2.jpg" alt="">

</body>
</html>

coothead

2 Likes
5

<ot>

Have you ever considered changing your userName to “coolhead”? :sunglasses:

</ot>

1 Like
6

No, not really, but before I became quite severely follically
challenged, I was often fondly referred to as a shithead. :sunglasses:

On reflection though, the reason for that name may not
have had any connection to the lack of hair on my pate . :flushed:

coohead

2 Likes
7

Hi there Gopal_Krishna,

unfortunately, the code that I gave you in post #4 does not work in iE11. :ng:

This is due to an IE11 bug that occurs when using “calc()” in “@keyframes)”. :ng:

This amended code addresses that problem…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="yourpage.css" media="screen">

<style media="screen">
img {
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    padding:0;
    margin:0;
    border:0 solid #000;
    background-color:#8b7b7b;
    animation: stuff 22.5s forwards;
 }
@keyframes stuff {
0% {
    width:0;
    top:50%;
    left:50%;
    width:0;
    margin0;
  }
22.2% {
    width:0;
    top:50%;
    left:50%;
    margin:0;
 }
44.4% {
    width:500px;
    top:50%;
    left:50%;
    margin:-157px 0 0 -250px;
  }
66.6% {
    width:0;
    top:50%;
    left:50%;
    margin:0;
  }
77.7% {
    width:0;
    top:0;
    left:0;
    padding:0;
    border:0 solid #000;
  }
100% {
    width:25%;
    top:0.5em;
    left:0.5em;
    padding:0.6em;
    border:0.1em double #000
  }
 }
</style>

</head>
<body> 

<img src="http://www.coothead.co.uk/images/face-2.jpg" alt="">

</body>
</html>

coothead

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.