Blog Post
Jonathan_Hill
5 months agoSuper Hero
Hello!
There's more than one way to 'click next'.
But hover states don't work on mobile devices and drag and drop isn’t always accessible. This demo attempts to address these challenges by providing device-specific interactions.
For instance, the hover interaction is replaced with a press and hold interaction if the demo is running on a phone.
The drag and drop is in reality an invisible slider, which makes the interaction accessible from a keyboard but also provides a tactile control on a touchscreen.
Try it out on your desktop and your phone and let me know what you think!
HOVER CLICK DRAG
https://bit.ly/elhc462
There's more than one way to 'click next'.
But hover states don't work on mobile devices and drag and drop isn’t always accessible. This demo attempts to address these challenges by providing device-specific interactions.
For instance, the hover interaction is replaced with a press and hold interaction if the demo is running on a phone.
The drag and drop is in reality an invisible slider, which makes the interaction accessible from a keyboard but also provides a tactile control on a touchscreen.
Try it out on your desktop and your phone and let me know what you think!
HOVER CLICK DRAG
https://bit.ly/elhc462
- DavidAnderson5 months agoStaffYou're digging deep into the javascript these days, Jon. Might be a good time to do another challenge on the topic.
- LeeRhyne-d84a3b4 months agoCommunity MemberVery clever!
- JodiSansone4 months agoCommunity MemberI always learn a lot from your demos. I never would have thought to attempt to identify what device is being used. And I never heard of Ollies and Nollies before. We didn't ski when I was a kid. No mountains in Chicago.
- Jonathan_Hill4 months agoSuper HeroThanks Jodi. It does look a little like a snowboard, but I'm actually riffing on the hoverboard from Back To The Future 2 😄
Ollie and Nollie are skateboard moves. I studied a bunch of videos to mimic the motion. I guess this might also qualify for the 'rotate a 3D object challenge'?
I'm off to google whether you can Ollie and Nollie on a snowboard now...- Fabienne_Werder4 months agoCommunity Memberyou can, and on skis, too ;)
Impressive what you created here!! :)
- SabrinaSgoda-334 months agoCommunity Membervery interesting! and reaaally cool!
- JoanneChen4 months agoSuper HeroThis is an awesome demo! I'm currently working on a Rise project, so your JavaScript code is perfect for detecting mobile users. This way, I can have different instructions for SL blocks since they work differently in desktop and mobiles. Thanks!!!
- Jonathan_Hill4 months agoSuper HeroGlad you found it helpful! That's a great use case for this code.
- LindaLorenzetti4 months agoSuper HeroWow! this is very impressive Jonathan.