Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Lolia Trafam

Add some parallax effect threejs

Go to solution Solved by akapowl,

Recommended Posts

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

Sorry, I'm not sure what you're trying to achieve, can you rephrase that?

Link to comment
Share on other sites

i add some different duration between camera and box any advice to improve that ?

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

  • Solution

🤔 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

 

  • Like 7
  • Thanks 1
Link to comment
Share on other sites

This is a great demo - nice one @akapowl 🎉

  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...
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

Please look at the demo code provided. There is a certain HTML structure that must be used, like having a viewport container.

  • Like 4
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×