Whats this effect called?
Hi I like the effect I see on quiet a few websites when an image grows/zooms-in. I'd like to do it in JS but I can't find an example.
My example uses svg's to achieve the desired effect but I'd like a JS version. Can anyone point me in the right direction.
LINK
Re: Whats this effect called?
well i would call it a 'pan in' - thats from a movie/camera point of view
Re: Whats this effect called?
Quote:
Originally Posted by
Egg Bramhill
Hi I like the effect I see on quiet a few websites when an image grows/zooms-in. I'd like to do it in JS but I can't find an example.
My example uses svg's to achieve the desired effect but I'd like a JS version. Can anyone point me in the right direction.
LINK
Well Egg, I shall point you to the very place: https://parkeston.com/Harwich-AIS/mo...over-Hover.htm.
You built it from my Inner Zoom CSS (sorry) and JavaScript: https://www.talkgraphics.com/showthr...693#post634693 & following Post.
Just change the CSS transition to around 2s and the background-size to around 200%.
Acorn
Re: Whats this effect called?
Thanks for that Acorn. I forgot I'd done that. However I want it zoom the opposite way. I think I've found a site that may help.
Re: Whats this effect called?
Quote:
Originally Posted by
Egg Bramhill
Thanks for that Acorn. I forgot I'd done that. However I want it zoom the opposite way. I think I've found a site that may help.
Egg, now I am confused.
My suggestion of changing the timing and scale was to give an Inner Zoom In:
<style>
.innerZoom {
background-size: 100%;
background-position: center center;
transition: all 2s ease-in-out;
}
.innerZoom:hover {
background-repeat: no-repeat;
background-size: 200%;
}
</style>
If you want a Zoomed presentation moving to full image, an Inner Zoom Out, just flip the background sizes:
<style>
.innerZoom {
background-size: 200%;
background-position: center center;
transition: all 2s ease-in-out;
}
.innerZoom:hover {
background-repeat: no-repeat;
background-size: 100%;
}
</style>
Acorn
Re: Whats this effect called?
It's popularly called the Ken Burns effect. He didn't originate the effect but did popularize it.
https://en.wikipedia.org/wiki/Ken_Burns_effect
https://www.wevideo.com/blog/for-work/being-ken-burns (nice example down the page).
I last used it in 2010/2012 for the last website I built and maintained.
Re: Whats this effect called?
Quote:
Originally Posted by
mwenz
But the approach we are using doesn't pan slowly; that is the killer part of the Ken Burns effect.
In my original Post I indicated any Animatable CSS property could be added although for fullest control, you would use @keyframes.
@Egg, you Ken Burnsed a time back as best as I recall.
Acorn
Re: Whats this effect called?
Quote:
Originally Posted by
handrawn
well i would call it a 'pan in' - thats from a movie/camera point of view
As Egg seems to have solved the problem himself some time ago, isn't it a deja point of view?
1 Attachment(s)
Re: Whats this effect called?
Re: Whats this effect called?
Anyone been experimenting with creating animated svg's to reveal an underlaying image?