Printable View
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 i would call it a 'pan in' - thats from a movie/camera point of view
Well Egg, I shall point you to the very place: https://parkeston.com/Harwich-AIS/mo...over-Hover.htm.Quote:
Originally Posted by Egg Bramhill
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
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.Quote:
Originally Posted by Egg Bramhill
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
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.
But the approach we are using doesn't pan slowly; that is the killer part of the Ken Burns effect.Quote:
Originally Posted by mwenz
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
As Egg seems to have solved the problem himself some time ago, isn't it a deja point of view?Quote:
Originally Posted by handrawn
Anyone been experimenting with creating animated svg's to reveal an underlaying image?
The Burns effect, at least the couple I've used, can be adjusted for speed and area to zoom into/out of. Burns himself used different zoom timings.Quote:
Originally Posted by Acorn
The thread simply asked "Whats [sic] this effect called?" That is all I answered.
And I countered as it is a Ken Burns Effect with no Pan, it isn't a Ken Burns Effect. It is just a Zoom In as there is no (presented or asked for) method to adjust where the zoom centres on.Quote:
Originally Posted by mwenz
Acorn
There is no need to use pan for the Burns effect. Burns also, just like those before him, used just zoom in/out. Just as he/those before him, used and/or not used multiple layers with differing movement speeds.Quote:
Originally Posted by Acorn
But hey, whatever.
whatever, but your Wikipedia reference states otherwise.Quote:
Originally Posted by mwenz
Acorn
well if we wish to be pedantic... quoting from the wiki link:
is that what we are doiing here? embedding still[s] into an otherwise live action film/video? because if we are not it 'aint a burns effect in my book, its just a pan zooming in/outQuote:
the feature enables a widely used technique of embedding still photographs in motion pictures
Quote:
Originally Posted by Acorn
Y'all should have read more, including some of the various links and how that/those effects are variously applied by Burns and Apple, Microsoft, Nokia and by various flash and Javascript implementations that have been around for many, many years.Quote:
Originally Posted by handrawn
The effects do not need to be integrated into otherwise "live action film/video."
But I'll leave TG for awhile now. Have fun.
then what exactly is special about it that makes it not a simple pan and zoom
has someone appropriated a specific to label something generic in order to make it sound special ?
from the wiki it sounds to me like the man himself is rather embarrassed by it all
I hope for not too long because I value your presence at TG.Quote:
Originally Posted by mwenz
I'll second that
look - I'm an animator, all animation is the manipulation of still images to produce [the illusion of] movement; if anyone wants to define a particular way of doing that outside of live action as a burns effect fine, but i was just expressing a personal opinion, to me it is all just animation, a form of animatics as wiki mentions
I'll just go away and 'photoshop' a few images, maybe paint a 'dali effect': a painting where you can see an object that only exisits because it is defined by the boundaries of other objects... ok I made that last one up, but he was rather good at it