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.
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)
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?
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…
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 )
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.
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
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
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?