Jump to content
Search Community

Mouse Cursor Effect

rala test
Moderator Tag

Go to solution Solved by Dennyno,

Recommended Posts

Hi there, welcome to the GSAP forums!
 

This is a very complex effect made using shaders - https://tympanus.net/codrops/tag/shader/

 

As we state in the forum guidelines we don't have capacity to investigate, recreate or explain how to create custom effects found on other websites.

We are more than happy to answer GSAP-specific questions though. So if you give this effect a go yourself and get stuck in the process, feel free to post a minimal demo here and we'll give you some advice on how to get closer to your goal.

  • Like 2
Link to comment
Share on other sites

It's webgl, so the canvas bg is controlled by the script itself, even if you try with CSS.

Basically the canvas is full width/height and it's behind all the other stuff on the page with a lower z-index. (Or easier: put an higher one to other elements)

Here you can find the whole working script with its vars https://paveldogreat.github.io/WebGL-Fluid-Simulation/
the transparency it's under the tab "Capture". 

Hope it helps.

//PS also on my Codepen I made another example with transparency

  • Like 1
Link to comment
Share on other sites

2 hours ago, Dennyno said:

If still interested, I got it working here 

 


And on related post of my account, you may seen all the effects you can achieve. :)

You just need to play with transparency, curls, and strengh .. 

 

 

this is awesome, thanks for sharing.  did you check my repo?

Link to comment
Share on other sites

39 minutes ago, akapowl said:

Since the code provided by the author is under the MIT License, make sure to include the copyright notice when you use it, @Dennyno

Thanks on the main demo I added credits, but seems that this project has some debate behind it, as it seems that Pavel has been fired (or has leave) the team, who now is keeping, without really credits, it going on via APPS only.
(So online it's a dead project  - I guess).

But thanks for the right point, gonna add anyway to avoid any problem if future :)

  • Like 1
Link to comment
Share on other sites

8 hours ago, vlbn said:

@Dennyno i still cant figure out how to change the canvas color to white.. 

canvas.fillStyle = "#ffffff";

does not work...  thanks!

 

That works for 2d canvas, but this is WebGL, which can usually be done with clearColor, however, that doesn't seem to work. That means the background is probably being set with gl_fragColor in one of the shaders, but I have no idea which one. It would probably be best to ask to the original author of the code.

 

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

2 hours ago, OSUblake said:

 

That works for 2d canvas, but this is WebGL, which can usually be done with clearColor, however, that doesn't seem to work. That means the background is probably being set with gl_fragColor in one of the shaders, but I have no idea which one. It would probably be best to ask to the original author of the code.

 

Here's the full updated code 

See the Pen BawdaPw by DedaloD (@DedaloD) on CodePen

 ( I did changed bg to a grey one)

On the other demo it has been missing some vars.

TRANSPARENCY: True is right the key

And I also deleted the DrawCheckboard's function that puts squares on canvas' bg while being transparent (it fakes a transparent pattern, like Photoshop empty doc), as you ca see on Pavel's main demo.

Also please  note that I did touched where it says "mousedown" to true, otherwise it works only when pressing down.
--------------------------------------
BTW this is out from the scope of this GSAP Forum, sorry @OSUblake for replying :) but this could help the community

  • Like 2
  • Thanks 2
Link to comment
Share on other sites

2 hours ago, Dennyno said:

BTW this is out from the scope of this GSAP Forum, sorry @OSUblake for replying :) but this could help the community

@Dennyno thank you very much for your valuable help. my code uses GSAP for the normal cursor pointers animation.. this smoke thing was just to add some fanciness.

  • Like 1
Link to comment
Share on other sites

  • 6 months later...

Hello, sorry for bringing back this old topic, but I copied the CodePen (with the black background not the gray) and make the canvas transparent. But now I don't know how to change the effect's color. Because with a white background, it's invisible. 

If anyone could help, that'll be lovely. 

Link to comment
Share on other sites

I had already changed my canvas to transparent so that when I put other elements behind it does work properly. And I try to change the config to BACK_COLOR: {r: 255, g: 255, b: 255}, but that didn't change anything. The trail that the cursor create is still white (on a white background).

The colors on the gray background CodePen would be perfect, but the two CodePen are too different to compare for me.

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.
×
×
  • Create New...