micku7zu / vanilla-tilt.js

A smooth 3D tilt javascript library.
https://micku7zu.github.io/vanilla-tilt.js/index.html
MIT License
3.85k stars 172 forks source link

Feature idea: Controlled by another element #87

Open LukeTOBrien opened 3 years ago

LukeTOBrien commented 3 years ago

Hello there,

I like your script very much and I had an idea of a feature to add.
What if I wanted the prevent the element from tilting on mouse over but rather have the element tilt when I move the mouse another element?
If you included a controller option then I could set the controller to the selector of another div, this way I could also control many tilt elements with the same controller.
Something like:

VanillaTilt.init(document.querySelector(".your-element"), {
  controller: '#controller-div'
});

Or HTML:

<div class="your-element" data-tilt data-tilt-controller="#controller-div"></div>
<div id="controller-div"></div>

You could even have a custom (or manual) API like so:

VanillaTilt.init(document.querySelector(".your-element"), {
  controller: 'custom'
});
element.vanillaTilt.tilt({
  x: 100,
  y: 100
});

This would make it possible to keep a counter variable and tilt the element inside a setInterval for eg.

What do you think of this idea?

micku7zu commented 3 years ago

Unfortunately, I'm not working on adding new features to the library. I just wanted to provide a vanilla JS alternative for jQuery tilt.js. I'm focusing most of my free time on my Quick Cursor Android app.

LukeTOBrien commented 3 years ago

Okie dokie. Just an idea. Wish you the best with your app.

On Sun, 30 May 2021, 07:32 Șandor Sergiu, @.***> wrote:

Unfortunately, I'm not working on adding new features to the library. I just wanted to provide a vanilla JS alternative for jQuery tilt.js. I'm focusing most of my free time on my Quick Cursor Android app.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/micku7zu/vanilla-tilt.js/issues/87#issuecomment-850950143, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD3KMFPAFM6GJYXXHNMSALTTQHLYXANCNFSM45YPWPYA .

AnweshGangula commented 2 years ago

the documentation mentions a mouse-event-element option which allows you to choose an element.

Is this the feature for this request?

micku7zu commented 2 years ago

It looks like it was a pull request long time ago that added this functionality: https://github.com/micku7zu/vanilla-tilt.js/pull/37

But from what I quickly tested, it doesn't work as expected: https://jsbin.com/vedijevote/1/edit?html,output

It listens for events on the specified element, but it calculates the effect related to the main element, so it's not exactly what I expected.