Guest Posted June 1, 2021 Share Posted June 1, 2021 Hello , i try to add some parallax effect between camera and cube , like make the cube faster than camera any tips ?, then how i can make scroll smooth ? See the Pen mdOBjrQ by leen-alfalah (@leen-alfalah) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted June 1, 2021 Share Posted June 1, 2021 Sorry, I'm not sure what you're trying to achieve, can you rephrase that? Link to comment Share on other sites More sharing options...
Guest Posted June 1, 2021 Share Posted June 1, 2021 i add some different duration between camera and box any advice to improve that ? Â Link to comment Share on other sites More sharing options...
Cassie Posted June 1, 2021 Share Posted June 1, 2021 I'm lost - I'm sorry. I'm not sure what it is you want to improve. I don't know what your intended outcome is. 1 Link to comment Share on other sites More sharing options...
Guest Posted June 2, 2021 Share Posted June 2, 2021 20 hours ago, Cassie said: I'm lost - I'm sorry. I'm not sure what it is you want to improve. I don't know what your intended outcome is. I am sorry , but i have bad English , what i want to do is add some parallax effect and smooth scroll , i mean , i try to set box movement is faster than camera movement like you can saw in my codepen demo , how i can make the parallax effect better, and the scroll smoother ? Link to comment Share on other sites More sharing options...
Solution akapowl Posted June 2, 2021 Solution Share Posted June 2, 2021 🤔 Well, I'm also not sure what the desired outcome is here.  But since you are moving things in a 3-dimensional space and using the PerspectiveCamera here, there is no need to 'apply' a parallax effect in any special way between different 3D elements - it is already there. If you'd want it to feel parallax(ish) in relation to the background, I guess you'd just have to make sure that your elements move faster than the background does.  In the end what exactly you want to achieve comes down to camera positioning and movement of either the elements or the camera ( one might be better suited than the other, depending on what you want to do, I guess).  Here is an example with ScrollTrigger's smoothScroll() helper-function included for the smooth-scrolling effect (first example pen on the .scrollerProxy() documentation page). Maybe that helps get in the right direction    See the Pen d48ab3a40f7f8614db9e6f460c331704 by akapowl (@akapowl) on CodePen  8 Link to comment Share on other sites More sharing options...
Cassie Posted June 2, 2021 Share Posted June 2, 2021 This is a great demo - nice one @akapowl 🎉 1 Link to comment Share on other sites More sharing options...
Guest Posted June 6, 2021 Share Posted June 6, 2021 That's great thankyou @akapowl Link to comment Share on other sites More sharing options...
Guest Posted June 20, 2021 Share Posted June 20, 2021 On 6/2/2021 at 5:59 PM, akapowl said: 🤔 Well, I'm also not sure what the desired outcome is here.  But since you are moving things in a 3-dimensional space and using the PerspectiveCamera here, there is no need to 'apply' a parallax effect in any special way between different 3D elements - it is already there. If you'd want it to feel parallax(ish) in relation to the background, I guess you'd just have to make sure that your elements move faster than the background does.  In the end what exactly you want to achieve comes down to camera positioning and movement of either the elements or the camera ( one might be better suited than the other, depending on what you want to do, I guess).  Here is an example with ScrollTrigger's smoothScroll() helper-function included for the smooth-scrolling effect (first example pen on the .scrollerProxy() documentation page). Maybe that helps get in the right direction       Hello Mr ,can we use this function for any canvas ? i try to add to my canvas in this demo but the scroller disappear See the Pen MWbdNXg by leen-alfalah (@leen-alfalah) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted June 20, 2021 Share Posted June 20, 2021 Please look at the demo code provided. There is a certain HTML structure that must be used, like having a viewport container. 3 Link to comment Share on other sites More sharing options...
Guest Posted June 21, 2021 Share Posted June 21, 2021 On 6/20/2021 at 8:31 PM, OSUblake said: Please look at the demo code provided. There is a certain HTML structure that must be used, like having a viewport container. Done , thank's 😃 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