I’m hoping the coding masters / experts can help me out with this one.
I was wondering how one would achieve the smooth background movement / 3 dimensional feel based on mouse position that is happening here:
https://www.refletcommunication.com/en/experience
Any help would be greatly appreciated! Thank you!
I am not an expert in codes that I leave to the Guru as Daniel or, MaxZieb, h_Classen, or “El Grande” DBear
but I studied Hype Pro and managed to do exercises that have achieved that effect and without code only with Hype and their commands forgive me if I use this code "
<style>
#nav {
position: fixed! important;
}
</ style>
I am a user of Tumult and a fan of it as a powerful interactive work tool.
Sorry to not support my opinion at this time with an example but the next week that this back in my studio put something in the forum.
Yea, it would be great if you shared your example!
Thank you for the response.
Now thats cool 
I recommend going into the developer console and having a basic look at how they are doing it. From looking at the resources, you’ll first notice that it is driven by quite a lot of javascript :).
But the image resources are a little more telling - you can see that the background is really just composed of various background and foreground slices.
You could make such a background in a similar manner, and have two timelines in Hype that represent the x and y axis, and how they move in a parallax manner. While Hype doesn’t listen for mouse moved events, you could do this yourself and just drive the timelines. I’m pretty sure there’s some code on the forums that basically shows this if you search for “mouse moved” (A quick glance make it look like this result looks like what you’d want for one axis).
Hi Jonathan,
Yes, I did get set up a project where the mouse position control the timeline. However the one that I set up (of course with help from you guys!) is very basic. I was wondering what I need to do in order to get to the example level of smoothness and 3 dimensional feel.
Also when you say background and foreground slices, does it mean it’s set up like a frame by frame? Or in a sense that each part is being controlled by a separate timeline?
But anyhow, thank you and team for always showing much support!
This site has animated displacement effect on hover, which ads an extra level of depth and interactivity.
http://fannymyard-design.com/
If you use the web inspector, you can take a look at their image resources. For example, here's the background/foreground images:
experience-default-background-displacement.jpg
experience-default-background.jpg
experience-default-forground-displacement.jpg
experience-default-forground-mask.jpg
experience-default-forground.jpg
I don't really know what they are doing or how they are doing it; you'd need to dig into the code :). A simple technique is just breaking up a layer into different slices along the z-axis and animating them independently to achieve parallax, but they appear to be doing much more to achieve a smoother faux 3D effect.
