Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 19
  1. #1
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    20,891

    Default 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
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  2. #2
    Join Date
    Feb 2007
    Location
    UK
    Posts
    19,458

    Default Re: Whats this effect called?

    well i would call it a 'pan in' - thats from a movie/camera point of view
    -------------------------------
    Wyrd bi ful ard

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,324

    Default Re: Whats this effect called?

    Quote Originally Posted by Egg Bramhill View Post
    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
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    20,891

    Default 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.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,324

    Default Re: Whats this effect called?

    Quote Originally Posted by Egg Bramhill View Post
    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
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  6. #6

    Default 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.

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,324

    Default Re: Whats this effect called?

    Quote Originally Posted by mwenz View Post
    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.
    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
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  8. #8

    Default Re: Whats this effect called?

    Quote Originally Posted by handrawn View Post
    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?

  9. #9
    Join Date
    Feb 2007
    Location
    UK
    Posts
    19,458

    Default Re: Whats this effect called?

    Click image for larger version. 

Name:	a day in the life.jpg 
Views:	19 
Size:	56.5 KB 
ID:	130832

    -------------------------------
    Wyrd bi ful ard

  10. #10

    Default Re: Whats this effect called?

    Anyone been experimenting with creating animated svg's to reveal an underlaying image?

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •