Mouse Move Parallax

Anyone know how to do parallax effect on mouse move similar to this - http://www.riomovies.com
It scrolls really smoothly and has some easing.

I have attached a sample .html and .js file used.
I don’t know how to add the javascript file to Hype and call the effect.

Parallax.zip (59.9 KB)

Thanks.

There’s no built in method in Hype for mouse tracking, but you can use standard JavaScript to modify element properties, or even incorporate that library directly within Hype.

Check out this example: Control mouse of main timeline

We were toying with this exact Parallax library for our Hype Pro page, but it required very large images and didn’t work very well on mobile devices: parallaxDemo.zip (1.7 MB)

1 Like

Looking super slick and silky smooth. Nice one :smile:
I tried incorporating it into Hype but had no luck. Could you let me know how you did it please?

Thanks!

Well that parallax demo.zip example is not integrated into Hype, but the linked example here is (though that is more of an example of how to capture the mouse location and perform a transformation). What are you actually trying to create?

Here is the file I am working on…

I would like to move the characters as well as background using that parallax demo script.

When I add that external .js file Hype my stage seems to disappear.
Do you get that too?

Happy New Year Daniel. Was wondering if you could perhaps let me know how I can get this working with Hype?

Since the JavaScript library (parallax.js) controls the images using its own methods, it would conflict with how Hype positions elements – I don’t think they can be made compatible without rebuilding the parallax library so that it takes into account Hype’s own element positioning…

No problem, thanks anyway… will see if there is maybe another one out there that is more compatible with Hype.

This is only a proof of concept type of thing to give you a possible direction to go in.

It would need a lot more work and finessing and for this particular set of images I am not sure the Parallax works well with the foreground gunslinger in comparison with the rio example.

I have not set any limits to the movement distances and at the last minute added the gun arms and movement ( so don’t laugh )

The example uses JS and the cursor position.

para.hypetemplate.zip (8MB)

1 Like

The gun hand/arms may work better with increment of 5

hypeDocument.setElementProperty(gunHands, 'left', Number(gunHandsLeft) -5, 0.4, 'linear')

---------- and

hypeDocument.setElementProperty(gunHands, 'left', Number(gunHandsLeft) +5, 0.4, 'linear')

Wow, thanks mark for all your effort! Its fantastic and I really appreciate what you have done.
Something about it that does not quite feel right compared to the parallax.js method.

I found the gitHub for it - https://github.com/wagerfield/parallax
Here they describe how it is used.

When I first attempted, it would render my scene blank. I looked at the .js file and noticed the first line

;(function(window, document, undefined) {

I am no programmer but the first bit “;(” looked a bit strange so I deleted it and now when testing I can see my scene. I am guessing it might be usable now. My next step is how to make it all work? I think I need to add a class name to my elements and then add a data attribute to them as well. And then something to initialize it all. I have absolutely no clue though :frowning:

Hi! Were you able to integrate the parallax.js into Hype?

Thank you,

-Felix

Thanks Mark, Ive taken a look at your example and it does look cool. Though looking at the one below where the effect is much more pronounced making it a jaw dropping experience. I can almost hear the the theme of stranger things through this ad - weird, its that good being an audiophile and all :stuck_out_tongue_winking_eye:

Netflix Stranger Things S1

Jurassic World

2 Likes

That banner is just amazing… I want a 3d camera/position in Hype.

4 Likes

Tell me about it… :stuck_out_tongue:

This online web app editor tool which is where those and number of ads that are being made in now has it and hype has drawing capabilities :slight_smile:

https://gallery.primo.design
https://gallery.primo.design/custom
Custom has a 3d Phone.


1 Like

Those are indeed the nuts

How about this?
http://s.visarity.com/xmas2018peter and it’s responsive.

Yep, they’ve given me special access to the builder though It did take me sometime to figure out how animate since it is a different app/platform I must admit it was weird coming from Hype. The interface is somewhat cumbersome to adapt to and it could’ve been done better. Anyways, my holiday wish for hype to bring 3d import and allow animation natively. @Jonathan?

1 Like

That’s pretty nifty! 3D webgl is a very different stack than Hype’s tech so don’t hold your breath :slight_smile:.

2 Likes

inhales and exhales :grin:

3 Likes