search

wagerfield / parallax

Parallax Engine that reacts to the orientation of a smart device
http://wagerfield.github.io/parallax/
Other
16.49k stars 2.14k forks source link

Add 3D rotation support? #127

Closed Dan503 closed 7 months ago

Dan503 commented 9 years ago

Awesome little plugin! This isn't a bug, more of a feature request.

Could 3D CSS element rotation be built into the plugin so elements can tilt based on the tilt of the device/mouse pointer location?

cpouldev commented 8 years ago

+1

ngmerritt commented 8 years ago

I've been trying to implement this functionality as well. I'd love to see it added as a feature.

reneroth commented 7 years ago

Working with rotation will open a whole can of worms that's not in the scope of this project, but I don't want to rule it out just yet. Maybe in future versions? Keeping this issue open for now

gravyraveydavey commented 7 years ago

In case it's helpful - you can still make some cool 3D esq effects without directly mapping the rotation to the mouse. Here's an example using increasing rotation by nth-child http://codepen.io/gravyraveydavey/pen/NjNreG

Splendorr commented 7 years ago

@gravyraveydavey This was really helpful to me, thank you!

reneroth commented 7 years ago

@gravyraveydavey this looks really cool!

I'm still unsure what's the right approach for this. Of course I could try adding 3D rotation support with all its caveats and further configuration options, but this smells of feature creep. A different approach would be isolating the whole detection and input section of the code from the output (= 2D parallax transform). Then we could implement things like 3D rotation support as plugins.
But this would be a wholly different project.

Dan503 commented 7 years ago

Making it work through a plugin structure sounds like an awesome idea!

People who don't need the rotation support can just leave it out then rather than forcing hundreds of killobites of extra code down people's thoughts that they don't need.

It would be a bit like GSAP structure. You have the core code, then you can add the position plugin for the current functionality, or add the rotation plugin for the rotation functionality. And then have a mega package that has both plugins by default to make it easier to use for people that aren't as fussed about file size.

Smashr commented 7 years ago

So, tilt.js does this already, however they do not support tilt based on device orientation, and the objects only interact with the mouse pointer.

https://gijsroge.github.io/tilt.js/

I requested device tilt/orientation/gyroscope support for tilt.js here :

https://github.com/gijsroge/tilt.js/issues/28

So basically it would be awesome if parallax.js adds tilt support or tilt.js adds orientation support. I personally feel that adding an option to "rotate" in-addition to "translate" to parallax.js would be great.

patr1ck commented 6 years ago

For those interested, I added something similar to what's being discussed here in my PR: https://github.com/wagerfield/parallax/pull/243