f0rfun Posted October 30, 2020 Share Posted October 30, 2020 I came across this site and thought it was super cool. https://www.titansoft.com/en When the mouse moves across vertically and horizontally, the foreground moves along with the cursor. I'd like to try this effect on my own but am not sure the keyword I need to google on. Is there a name for this? Most of the tutorials I've across will rotate the entire object (e.g. cube) which is a bit too much. But when I launched the site on mobile, it loses this effect on touch. Is this a mobile constraint? Thanks in advance, folks! Link to comment Share on other sites More sharing options...
akapowl Posted October 30, 2020 Share Posted October 30, 2020 Hey @f0rfun The way this works, is by listening to the mouse position on the window and applying tweens to the elements according to that mouse position. So it is not a mobile constraint, when this doesn't work on mobile, but more related to the fact, that on mobile, you don't have a mousecursor, that you can check positions on. You can achieve something similar on mobile though, for example by checking on the device orientation, instead of the mousemovement, and adjust the tweens accordingly. So when you tilt your phone to one side, elements move, for example. https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation Anyways, here is a basic codepen-demo, to show how you can get to achieving such an effect See the Pen 25424af126477b014d6bff18ba34ffe5 by akapowl (@akapowl) on CodePen Hope this helps. Cheers, Paul 4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 30, 2020 Share Posted October 30, 2020 Related threads: 1 Link to comment Share on other sites More sharing options...
f0rfun Posted November 2, 2020 Author Share Posted November 2, 2020 Thanks Zach and akapowl. I can see it's a duplication. Please mark it as closed or dups then. Thanks. Link to comment Share on other sites More sharing options...
Mukhriddin Posted May 29, 2022 Share Posted May 29, 2022 On 10/30/2020 at 4:30 PM, akapowl said: Hey @f0rfun The way this works, is by listening to the mouse position on the window and applying tweens to the elements according to that mouse position. So it is not a mobile constraint, when this doesn't work on mobile, but more related to the fact, that on mobile, you don't have a mousecursor, that you can check positions on. You can achieve something similar on mobile though, for example by checking on the device orientation, instead of the mousemovement, and adjust the tweens accordingly. So when you tilt your phone to one side, elements move, for example. https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation Anyways, here is a basic codepen-demo, to show how you can get to achieving such an effect Hope this helps. Cheers, Paul Hi, there. How can we set tilt effect for every item separately? In your example, hovering one causes tilt effect of another. Thanks, Mukhriddin Link to comment Share on other sites More sharing options...
GreenSock Posted May 29, 2022 Share Posted May 29, 2022 You'd just set up the event handlers for each element separately, and of course make the animation only apply to that one. I'd do a .forEach() loop for that. Sorta like this: See the Pen gOvvXyb?editors=1010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now