universal-tilt-js / universal-tilt.js

🎆 Parallax tilt effect library
https://universal-tilt-js.github.io/universal-tilt.js/
MIT License
135 stars 14 forks source link

5 cents to nice plugin #35

Open Puppin opened 5 years ago

Puppin commented 5 years ago

Hi there. Playing around find some good things to add

             key: "getValues",
              value: function getValues() {
                var x, y;
                **var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);**
                if (this.isMobile()) {
                  **if (isSafari == true) {
                    x = this.event.accelerationIncludingGravity.x / -4;
                    y = this.event.accelerationIncludingGravity.y / 4;**
                    } else {
                      x = this.event.accelerationIncludingGravity.x / 4;
                      y = this.event.accelerationIncludingGravity.y / -4;
                    }                    
                  var stateX, stateY;

This makes equal behavior on iPhones and Android devices. I guess -4 makes right movement depends on device orientation.

'background-image': 'radial-gradient(circle at bottom center, rgba(252,253,255,1) 20%,rgba(255,255,255,0) 60%)', parameters for shine gradient looks better for me.

Also it will be great to move the card by finger on mobile in addition to device orientation movement. And filter acceleration data of course lol.

And finally small question. I didn't get easing for shine rotation. It was possible to make it in previous versions (like in demo page). But now it unfortunately does not work. Quick shine rotation on mobile absolutely not cool and looks glitching.

JB1905 commented 5 years ago

Thank you for the suggestions for improvements. I'll try to take a look at them next week.