Before / After photo effect


(GL29) #1

Hi,
I would like to create something like this with Hype 3 Pro:

http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/

I managed to manually create a iBook Author Widget which works quite well (despite the fact I get a white flash while the widget loads) … but I would like to include this type of effect within a Hype project.

Can someone give me some suggestions ?

Thanks

GL29


(GL29) #2

Just found this topic !


(stephen) #3

Here is an example I made a while back that has a drag reveal. Hope it helps!

Penguins.zip (504.7 KB)


Howto: Four Different Masking Techniques
(GL29) #4

Thanks Stephen - nice and easy solution once you master Hype :wink:


(Markus Bjerre) #5

I experienced some glitching with Stephens version, probably because the way you relatively decrease and increase group/image size and position. I would check out h_classen’s version instead GL29, even if it’s quite hard to understand the way it works and how it’s coded; the animation is seamless on my end.


(GL29) #6

Correct Markus … But I wish someone could help amending h_classen’s version so the picture is revealed half way from the start.
GL


(hewart) #7

Hi…

Nice Stephen! I’ve never seen it work like that before.

The only way I’ve been able to work this effect out in the past is the iframe in a “before/after” HTML frame I create and host separately as attached…

Hope that helps…

before_after.hype.zip (88.3 KB)
mar9.zip (525.3 KB)