Scroll zoom transition

[PatFontebasso]

Hey! I would like to try something I saw on certain camera manufacture pages..

So in Gridder I made the first "picture" (Backside of the camera)
and when you scroll you come to the first photo.
So while you scroll from 1 to 2 in the gridder. I want to zoom through the Viewfinder of the Camera.

I found this tutorial. But its not quite working for me..
https://www.youtube.com/watch?v=5d-shXKoRl8

So right now it looks like this
https://imgur.com/a/kmYoI33

Best Regards,
Patricio

[arminunruh]

hey so i'd need a link to the page where u tried to do this

i dont think this code is compatible with fullscreen slider

i think to code this u need some experience no

[PatFontebasso]

Hey,

https://www.nikonusa.com/en/nikon-products/product/mirrorless-cameras/z-9.html

Like here if you scroll down to the point where it zooms through the Viewfinder.

So far it looks in CSS like this ".zoom {
position: sticky;
top: 20vh;
will-change: transform;
width: 100%;
transform: scale(1.0);
}

.bottom {
height: 100vh;
}

.top {
height: 50vh;
}

.wrap {
position: sticky;
height: 75vh;
width: 50vh;
top: 50vh;
left: 20%;
}
"

and HTML
"<section class="top"></section>
<section class="wrap">
<img class="zoom" src="https://patriciofontebasso.com/wp-content/uploads/2024/03/yash4.jpg" >
</section>
<section class="bottom"></section>"

And I would love to know how to limit this effect to one page only.. now its on every page. But ChatGPT and Tutorials do not explain it so well to me. (I just started to "code" today)

[arminunruh]

no i mean a link of your lay theme page

[PatFontebasso]

@arminunruh

https://patriciofontebasso.com/

[arminunruh]

no i mean on the actual page on your website where u're trying to make this work ^^<3

[PatFontebasso]

@arminunruh

https://patriciofontebasso.com/yashica-analogue-zoom-test/

Yeah idk. I give up. I need to take more HTML, CSS and JavaScript courses to get it to work as shown in the examples from Nikon or Hasselblad above.

[felix_rabe]

@PatFontebasso nice photos on your website! I think for this animation you would need a js script that scales the image according to the scroll-position.

I made this here with the logo, but it gets smaller on scroll.
https://sanmedicus.de

you can use the website codepen.io to mess around and build sketches before implementing it to lay theme.

[PatFontebasso]

@felix_rabe <3 thanks so far mate! Looks good. I might try again to do it hehe.