Fancy Input - CSS3 text typing effects for input fields(dropthebit.com)
dropthebit.com
Fancy Input - CSS3 text typing effects for input fields
http://dropthebit.com/demos/fancy_input/fancyInput.html
72 comments
Please do not use this.
The whole page flashes and flickers for me on Safari 6.0.2 on Mac OS X 10.8.2.
Input of extended characters also doesn't work. Option-[aeiou] doesn't enter any characters. Holding [aeiou] prints the base character but fails to update once a modifier is selected.
The antialising algorithm alternates between subpixel and greyscale, causing flickering changes to the boldness of the text.
All in all, very very broken.
The whole page flashes and flickers for me on Safari 6.0.2 on Mac OS X 10.8.2.
Input of extended characters also doesn't work. Option-[aeiou] doesn't enter any characters. Holding [aeiou] prints the base character but fails to update once a modifier is selected.
The antialising algorithm alternates between subpixel and greyscale, causing flickering changes to the boldness of the text.
All in all, very very broken.
Ugh. When I select text, the selected text does not appear in the same location as the corresponding unselected text, the cursor doesn't line up with the selected text, and the cursor moves to incorrect locations in the text as I move it with shift-arrows.
Pretty. But whenever I see something like this on a website, I disable styles. As easy as Ctrl-Alt-Z on my browser.
I do it for blogs that have fancy title css, scripted comments... just about for anything that's unnessesary junk and therefore just a pretty annoyance.
I do it for blogs that have fancy title css, scripted comments... just about for anything that's unnessesary junk and therefore just a pretty annoyance.
It's certainly "fancy", but... as someone who has been forced to go down this road more than a few times for desktop and mobile platforms please do NOT encourage this. The level of manipulation and monitoring of key events necessary to get even close to parity of normal input behavior and accessibility, which this example unfortunately doesn't do very well, is enough to drive one into voluntary retirement.
It's fun to look at and play with, and I know it has some useful applications, but it quickly becomes incredibly fragile and is guaranteed to waste time and effort that can, and should, be spent on other stuff. Unless of course there is nothing left to do and you're just looking for ways to torture some poor soul hopped up on Red Bull or Mountain Dew.
That said, I definitely do encourage anyone interested to explore how this stuff works. My experience has been that design pretty much overlooks input behavior in general, but there are some pretty impressive things that can be done now without painting yourself into a corner and exploring stuff like this is probably one of the fastest ways to figure out where the boundaries are.
It's fun to look at and play with, and I know it has some useful applications, but it quickly becomes incredibly fragile and is guaranteed to waste time and effort that can, and should, be spent on other stuff. Unless of course there is nothing left to do and you're just looking for ways to torture some poor soul hopped up on Red Bull or Mountain Dew.
That said, I definitely do encourage anyone interested to explore how this stuff works. My experience has been that design pretty much overlooks input behavior in general, but there are some pretty impressive things that can be done now without painting yourself into a corner and exploring stuff like this is probably one of the fastest ways to figure out where the boundaries are.
The number of bug reports in my opinion sums up the problem with doing this thing. Even though these effects can be really neat, there is nothing worse than somebody trying to put in data and have the form not accept thier input for an unknown reason.
That being said, I think these could be really neat in certain places and maybe with a bit more testing this could be super useful.
That being said, I think these could be really neat in certain places and maybe with a bit more testing this could be super useful.
This is cool, just don't press tab.
Cute, but if I were a user and I saw a form that uses this, I would probably close the tab.
Clicking the input box when it's typing "type something..." is causing a crash for me. Also, I broke it by hitting home and then spamming the left arrow key. :)
Chrome 27.0.1423.0 dev-m
Chrome 27.0.1423.0 dev-m
FYI: Switching to an IME to enter Japanese (or any other language, I imagine) breaks it and doesn't allow typing. Switching back to English doesn't fix it. Putting the cursor at the beginning again allowed me to type English, but I can no longer type at the end.
Aside the dizzy collateral effects you get after writing more than 10 words, when you try to write accented words in other languages it stops working.
With measure, and applying it wisely, this can be a good thing. But for long texts, it's a madness.
With measure, and applying it wisely, this can be a good thing. But for long texts, it's a madness.
I immediately tried to input Chinese, and it stopped working.
I'm not an advanced user of jQuery, but still feel slightly ashamed for asking:
How can I use effect2 without having to change/toggle the class (i.e. effect2 class onPageLoad)??
How can I use effect2 without having to change/toggle the class (i.e. effect2 class onPageLoad)??
Tried changing [0] to [1] in this line:
$('section :input').val('').fancyInput()[0].focus();
...still not working...
...still not working...
Bug: ctrl-a (or ctrl-anything) results in the non-ctlr key stuck in the text field with no way to delete it
Should also say - OSX10.7 + FF19
If I select 'textarea' it only wraps by letter not by complete word.
I thought someone might want to know.
I thought someone might want to know.
File this under "One of those things that can be done but never should be."
It creates a lot of extra DOM nodes, not that great to be honest for this effect.
typing more than 5 letters made be feel i was going to have a seizure.
also, the demo is lacking in basic usuability-- at least have the form reselected automatically when you change between effects.
also, the demo is lacking in basic usuability-- at least have the form reselected automatically when you change between effects.
I never had reasons for animosity against CSS, but now I do.
Stops working if you type an accent character ´
Gives me a headache.
Not working on IE9
broke it within 10 seconds
Works great on Chrome, causes weird flashes on Safari.
* {
-webkit-font-smoothing: antialiased;
-webkit-transform: translate3d(0,0,0);
}
Eliminates the flashing completely. It introduces some weird safari behavior so only include it if you know what you're doing.
Eliminates the flashing completely. It introduces some weird safari behavior so only include it if you know what you're doing.
This is a bad idea - forcing every DOM node to become a hardware accelerated layer is going to introduce a huge amount of memory overhead (webkit doesn't release composited layers when they scroll off screen, in many cases)
A better approach is to apply -webkit-transform: translate3d(0, 0, 0) to only those nodes that will animate.
Your mobile viewers, especially, will be glad that your page doesn't kill the browser (when it goes OOM)
A better approach is to apply -webkit-transform: translate3d(0, 0, 0) to only those nodes that will animate.
Your mobile viewers, especially, will be glad that your page doesn't kill the browser (when it goes OOM)
* { anything } is usually a bad idea.
I had a ghost "a" at the end of my text that I couldn't get rid of in Safari. Also it just ran slowly. Ran flawlessly in Chrome, though.
I got the "a" also from trying to do cmd+a to select all.
Same here. Diacritics also cause problems. Korean characters don't show up at all.
I'm getting the weird flashes on Chrome (25.0.1364.99) OS X 8.2 :/
Very cool effects but pretty jittery and laggy when typing fast on chrome 24, too bad.
Bug report: I managed to get it into a state where it's impossible to delete the characters behind the cursor. I remember pressing the Euro sign (alt-gr + 4) and accidentally hitting the 'Windows' key. Here's a dump of the DOM state:
http://pastebin.com/ELyMNAKd
I got the same by hitting "CMD + A" for "Select All".
Dumb Q: How did you dump the DOM state like that?
In chrome you can right-click on any element in the developer tools to select "copy as HTML" which copies the DOM as it currently is to your clipboard
I ran into a similar bug fiddling with home and end.
Repro:
Delete the intro text, type 'wat'. Hit 'home'. Hit 'delete' three times. Observe breakage.
Repro:
Delete the intro text, type 'wat'. Hit 'home'. Hit 'delete' three times. Observe breakage.
Easy to replicate. Start typing when the field does it's premable. Things go to hell quickly from there.
+1 for the DOM dump - never seen this before but great way to report a front-end error
Dead keys seem to confuse it, though. They get added to the value of the input element, but they aren't displayed.
What's a dead key?
http://en.wikipedia.org/wiki/Dead_key
slightly more constructive response
slightly more constructive response
Please use this never on mobile. The experience is impossible on android, and as seen from the rest of the comments on iOS it's not much better...
On desktop it's super cool though. Kudo's!
On desktop it's super cool though. Kudo's!
It's not super on desktop either.
I guess it makes the silly assumption that pressing keys types letters — which is not true with CJK text input (IMEs).
I guess it makes the silly assumption that pressing keys types letters — which is not true with CJK text input (IMEs).
> Please use this never
You could have ended your sentence there.
You could have ended your sentence there.
I disagree. This is exactly the kind of thing creates juiciness [1][2] in games. Just don't put it in my tax forms.
[1] https://emshort.wordpress.com/2008/05/24/make-it-juicy/
[2] https://www.youtube.com/watch?v=Fy0aCDmgnxg <-- I'd recommend anyone who cares about making and/or understanding games to watch this talk.
[1] https://emshort.wordpress.com/2008/05/24/make-it-juicy/
[2] https://www.youtube.com/watch?v=Fy0aCDmgnxg <-- I'd recommend anyone who cares about making and/or understanding games to watch this talk.
Wow, that talk is fantastic. I think a lot of it applies to regular web interaction design, too, except that there you probably need to be more subtle.
I guess that I enjoy cleanliness over pizazz. I would argue that it should really only be used in juicy environments. Put it in Peggle, but not in any email client, my tax forms, anything where I'm trying to do something that isn't purely fun.
I can see how it can add funkyness to games, plus the fact that it's possible is awesome. But, "With great power comes great responsibility"
As an interaction designer, I implore you: do NOT screw around with forms. Your conversion rates will fall through the floor. The CSS specification itself says that browsers can ignore styling for forms. This is by design. Overriding it with a bunch of unsupported animated nonsense that requires Javascript and invisible divs and such is a recipe for disaster from a usability and accessibility stand point.
If somebody were doing a browser-based game there is absolutely a place for this. Sure, general apps should not do this, but I wouldn't say you should never do this.
That said, the performance on this is too poor to use as is.
That said, the performance on this is too poor to use as is.
> That said, the performance on this is too poor to use as is.
Really? I found it to be super responsive (Firefox on Linux).
But yeah, i agree, for things like games this would be really cool.
Really? I found it to be super responsive (Firefox on Linux).
But yeah, i agree, for things like games this would be really cool.
Responsive, but my cpu usage was at 30%
fill up a text area all the way just to test. I found on a couple of the animation styles, it went from responsive to full-blown lag.
You don't fill out paper forms with fancy markers, you use black or blue pens. There's a reason for that.
Yes, and the reason is primarily socio-historical. It does not necessarily follow that it's better.
You could argue that standardised data is a good thing- certainly, we developers argue that case constantly. As such, hand-written "input" being standardised could be an equally good thing.
Friedensreich Hundertwasser would disagree, and he'd had the shipped products to prove it, too...
I always find that I agree and disagree with these kinds of comments. From an accessibility and standards point of view, I absolutely agree – don't fuck with what people understand. From a progressive, artistic point of view I think these kinds of implementations allow for some creative expression. In the end, all industries have the artsy take on what is possible, but not necessarily ideal.
As with most things, it's all about balance. Is the atmosphere of your web form worth losing 10% of its conversions?
If you're designing MYST for the web browser; probably. If some small percentage of luddites can't get past your fancy character creation screen, then the game is (likely) not for them. Their frustration is worth it for the total immersion for the ones that can. There are a number of environments in which a cohesive experience trumps the drawbacks of a fiddly interface. But if someone is wanting to convert sales of a B2B accounting application, or needs to create batch data entry forms for said application, then things need to be weighed differently.
Being a good designer isn't about knowing how to recreate [software from the 90s] in Javascript or CSS3. It's about making lots of little decisions like this all the time.
If you're designing MYST for the web browser; probably. If some small percentage of luddites can't get past your fancy character creation screen, then the game is (likely) not for them. Their frustration is worth it for the total immersion for the ones that can. There are a number of environments in which a cohesive experience trumps the drawbacks of a fiddly interface. But if someone is wanting to convert sales of a B2B accounting application, or needs to create batch data entry forms for said application, then things need to be weighed differently.
Being a good designer isn't about knowing how to recreate [software from the 90s] in Javascript or CSS3. It's about making lots of little decisions like this all the time.
Tried it on Chrome. Non-english characters look awful - fonts are mess, typing effects work randomly. Sometimes all I'm typing is invisible. For me it's unusable.
Looks great! A few bugs, and probably many usability and compatibility issues, but I can see something like this finding its way into a movie or game website. Too flashy for a regular form input, but in the right context it would feel at home.
Usefulness is overrated. Would no human ever had followed the craze of useless endeavors, we would still all be living in caves, and would not even draw with fingers on theirs walls.