Really cool. Changing the timeScale value on JS line 33 to 1 slows everything down and makes the animation a little easier to see if you're interested in seeing how the effect works.
Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis
51–60 of 80 posts
Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis
#52Click delay is bad UI. When you click it, the face first blinks, then moves. So it appears to not be working. Would be better to move first, then blink upon completion.
fixed it for you: http://codepen.io/anon/pen/PpJwKL
Nice! Though it looks like in your version the blink is happening from top-to-bottom as opposed to collapsing in the middle. I like the blink after the toggle, but the actual blink animation in the original in preferable imo.
Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis
#53The author has a lot of interesting pens http://codepen.io/chrisgannon/pens/popular/
Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis
#54This should really be an with bonus CSS/JS so that it's backward compatible and doesn't break the world of accessibility, tabs, focus, forms, etc.
I think it's fine for design to explore visual representations of an input but the HTML should try to stay clean.
Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis
#55That's adorable. I wonder how using such a toggle could change the user behavior. I had a bit of a hard time turning the face into a sad face. I really liked it much better at green. It would be easier to convince me to pay money with this toggle. Then again, I'm a sucker for happy faces and cute things, so maybe I'm just weak to this kind of thing.
I already see it happening. In 5 years emotional-manipulation-driven design is going to be the next hot thing.
You mean 5 years ago?
Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis
#56Earlier quoted context omitted.
I already see it happening. In 5 years emotional-manipulation-driven design is going to be the next hot thing.
When you buy a recording of one of Louis C.K.'s shows from his website, you are given the choice (*) Yes, I'd like to receive further emails about louis C. K. things. ( ) No, leave me alone forever you fat bastard.
...and when you select No, does the background fade to black, with crackling lightning and rolling thunder?
Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis
#57Earlier quoted context omitted.
fixed it for you: http://codepen.io/anon/pen/PpJwKL
Nice! Though it looks like in your version the blink is happening from top-to-bottom as opposed to collapsing in the middle. I like the blink after the toggle, but the actual blink animation in the original in preferable imo.
If you slow down the original, it does the same thing. Optical illusion I think.
Edit: only the second blink is funky. The first is how you recall.
Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis
#58Can I use this under any kind of OSS license? I'm not the most familiar with codepen so I apologise if it's on there somewhere already.
https://blog.codepen.io/legal/licensing/
Public pens are MIT licensed.
Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis
#59This should really be an with bonus CSS/JS so that it's backward compatible and doesn't break the world of accessibility, tabs, focus, forms, etc. I think it's fine for design to explore visual representations of an input but the HTML should try to stay clean.
I don't like the switch design for people using a mouse.
What is the behaviour? Should I click the switch? Where do I click it: where it is or where I want it to go? Or should I drag it?
And usually only one of those actions work and I seem to always miss toggling it on the first try.
Re: Show HN: An HTML/CSS/JS toggle switch with happy and sad emojis
#60Click delay is bad UI. When you click it, the face first blinks, then moves. So it appears to not be working. Would be better to move first, then blink upon completion.
Now that we're at it: clickable things have the "hand" cursor. All of the widget is actionable yet the cursor is not always pointy. It's one of my pet peeves. That being said, the animation is beautifully done and the widget very cute. This is just eye-candy.
Would you use a hand cursor for a button?