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)
Cool, but please don't use this. It is essentially unusable on my iPad. Virtual keyboards tend to choke on such fanciness. If you want my input, make it easier, not harder for me.
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
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.
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.
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.
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.
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.
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.
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.
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.
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. :)
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.
72 comments
[ 3.4 ms ] story [ 132 ms ] threadEliminates the flashing completely. It introduces some weird safari behavior so only include it if you know what you're doing.
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)
Repro:
Delete the intro text, type 'wat'. Hit 'home'. Hit 'delete' three times. Observe breakage.
slightly more constructive response
On desktop it's super cool though. Kudo's!
You could have ended your sentence there.
[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.
I guess it makes the silly assumption that pressing keys types letters — which is not true with CJK text input (IMEs).
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.
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.
How can I use effect2 without having to change/toggle the class (i.e. effect2 class onPageLoad)??
...still not working...
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.
Chrome 27.0.1423.0 dev-m
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 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.