Page 1 of 1

display a growing image when a html page loads

Posted: Thu Apr 25, 2019 12:17 pm
by alex4orly
I want to have a popup image, like a welcome on the home page of a site.

The popup will start small and expand and when reaching the maximum size,
That will close itself....

Any suggestions.
Chheers

Re: display a growing image when a html page loads

Posted: Fri Apr 26, 2019 12:00 am
by lifecrane
Like a self destructive window? :)
I think I saw that somewhere, cant remember where , this has some info you can start maybe https://www.w3schools.com/howto/howto_c ... images.asp

modal pop up https://codecanyon.net/item/modal-popup ... nts?page=3

hope that helps, since I kind of don't know much.

Re: display a growing image when a html page loads

Posted: Fri Apr 26, 2019 12:20 am
by BaconFries
Using CSS3 transform to zoom an image:
https://www.wysiwygwebbuilder.com/transform.html
An introduction to CSS3 animations:
https://www.wysiwygwebbuilder.com/animation.html

Re: display a growing image when a html page loads

Posted: Fri Apr 26, 2019 12:48 am
by alex4orly
Hi BaconFries
Can you please point me to an example, so that I will get an idea of what it does

Thanks

Re: display a growing image when a html page loads

Posted: Fri Apr 26, 2019 6:50 am
by Pablo
There is no example that does exactly what you want.
But you can (for example) create a scaling animation
https://www.wysiwygwebbuilder.com/animation.html

Just an idea:
keyframe 0:
scale 0

keyframe 50%:
scale 1
opacity 1

keyframe: 100%
opacity 0

Re: display a growing image when a html page loads

Posted: Fri Apr 26, 2019 9:39 am
by alex4orly
Thanks, never used this
Will give it a try

Cheers