micku7zu/vanilla-tilt.js

Feature idea: Controlled by another element

LukeTOBrien opened this issue · 4 comments

LukeTOBrien commented

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

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
AnweshGangula commented

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

Is this the feature for this request?

micku7zu commented

It looks like it was a pull request long time ago that added this functionality: #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.