Subscribe
Sign in
Shiny.js — Shiny reflections for mobile websites 🌟
🌟 A vanilla JavaScript library for adding shiny reflections to HTML elements.
📱 Reflections move when the user rotates or twists their device.
🖼 Currently supports text, backgrounds, and borders
17
Replies
Drew Reynolds
The reflection looks great @rikschennink! Having a blast messing around with it on my phone.
Do you have any plans for a click-and-drag version on desktop?
Share
@nydrewreynolds On the desktop the screen would not actually rotate/tilt so I'm afraid the effect then quickly becomes a bit tacky while on mobile it's actually quite subtle. I'm on the fence about this, I think it would also require actual tilt of virtual elements to make it feel more real.
This is fun :) and I think that no one wiggle their phones that gently, so I’d made it not that sensitive
Hi!
For the past couple of weeks I've been experimenting with the 'deviceorientation' event, I figured I could use it to make materials on the web come to life on mobile devices (read "devices that have gyroscopes").
The result of this is Shiny.js, a tiny JavaScript library that can add reflections to text, backgrounds, and borders. Resulting in more lifelike graphics.
Note, this is still experimental, it needs some more testing on Android and iOS landscape mode. I'm extending my mobile device lab so hope to be able to test on Android next week.
In the meantime, enjoy!
lo mas probable es que no funcione bien en muchos dispositivos que no corran bien javascript.
Pros:this is a different idea
Cons:performance