Mouse Move Parallax


#1

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.


#2

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)


#3

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!


#4

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?


#5

Here is the file I am working on…

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


#6

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


#7

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


#8

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…


#9

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


(Mark Hunte) #10

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)


(Mark Hunte) #11

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')

#12

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:


(Felix) #13

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

Thank you,

-Felix