search

ZachSaucier / Disintegrate

A small JS library to break DOM elements into animated Canvas particles.
MIT License
320 stars 47 forks source link

Demo clarification #4

Closed khawarizmus closed 4 years ago

khawarizmus commented 5 years ago

I am referring to the draggable demo here.

I don't really understand what's happening to the disObj or the objMoving in general. is it cloned here objMoving = disObj; ? why are you moving it here objMoving.elem.style.transform = "translate(" + (coords.x - mXo) + "px, " + (coords.y - mYo) + "px)";?

I would love to have you explain these questions as I am trying to achieve the same effect but for a scroll event instead of a drag. where basically I have a pinned element that get's in contact with another one when scrolling down and I want only the intersection part to disintegrate.

PS: I am disintegrating img tags and it's working fine with me (referring to this issue)

ZachSaucier commented 5 years ago

Hello. Glad to see someone using this :)

I just used objMoving to make it so that I didn't have to pass the variable into each listener manually. You could pass it into mouseDown, elMove, and mouseUp using bind if you'd like to instead. It points to the currently clicked on disObj.

As for your situation of disentegrating on scroll, you don't need the draggable functionality. I'd recommend using data-dis-type="contained" and telling what the container is. Then you can animate the element's movement outside of the container using whatever normal means that you move things on scroll.

I'm glad that img tags are working for you! If you get your project online and can link it (or a demo setup) I'd love to have you post in that issue.

khawarizmus commented 5 years ago

Thank you for your fast reply!

I think I misunderstood how this library works, that's why I was confused with the code. I thought that the effect of disintegration happening only at the border of the element was due to your snippet of code (and that's the effect I want to achieve ).

but the effect comes from the data-dis-type="contained" so now it all makes sense. I was also looking for where you were triggering the disintegration until your explanation just now.

Anyway, thank you very much for your help and have a good day.

PS: I will try to get the effect I want still work and if I do I will update this issue.