How to enlarge a image or element when the page is move down please?

1

Hello,

I am trying to make a product image to be zoom in when page is moved down, just like the iPhone X,


and you can check at:

I mean I just want to make a product image or other element to be enlarged when navigated down, anyway to do that? should I use any javascript in Hype?

Thanks so much.

2

You could use Hype’s “On Enter Viewport” action along with a new timeline and ‘Scaling’ to do this. Here’s a sample…

bigger.hype.zip (9.9 KB)

3

Hi @gasspence

Thanks, I checked your sample document.

But I need control the timeline exactly by page content moving down, I searched a lot in this forum, but did not find a script to EXACTLY control the timeline, it would be great thanks if you know how to do it.

Thanks again.

Alex

4

I think what your looking for is scroll script that controls the timeline? Kind of like in the a parallax effect found below.
What you can do is pause every second or every other second of the timeline scaling the photo up down and run the script on load.

http://tumult.com/support/examples/Scroll-Animation-Control_by-Survey-Legend/Scroll-Transition-Tutorial_by_Survey_Legend.hype.zip

1 Like
5

I noticed you asked this before and I’m not the only sharing the file with you.

6

@petester, exactly yes, thanks.

I also tried this sample:

unfortunately, it seems only works for the elements within the window of scene, so this scripts seems only support ON Scene load, any way to make it works for any elements which are not in browser windows?

Alex