5 ms·
SlabText.js
- vhf 14y agoGreat work, the effect is stunning ! Really nice that it's automatically disabled when displayed on a small screen than viewport defined.
- pud 14y agoBeautiful. Does it work in IE? (i'm too lazy to fire it up)
- pooriaazimi 14y agoNo (IE9).
- the_unknown 14y agoworks in IE10 - so good for the future.
- trimetric 14y agoThis is a really impressive effect, but I'd hesitate to use it as part of a generic cms backed site since the auto-sizing could inadvertently editorialize the meaning of a headline at different page widths. "Roddick SURVIVES, Staving Off Retirement" vs "Roddick Survives, Staving Off RETIREMENT"
- zaptheimpaler 14y agoThis is what the preset word combinations mentioned in the post are for.
- trimetric 14y agoAhh, right, i missed that. I was distracted from the sub-headings by the big bold responsive headings.
- wamatt 14y agoNice :) Just some feedback, there's about a 1 second delay before the final text is rendered on initial load. This creates a slight jarring experience due to resizing, kinda analogous to the infamous @font-face FOUC/FOUT issue Tested on latest versions of Chrome, Firefox and Safari.
- dsellergren 14y agoIt's actually exactly a 1 second delay: $(window).load(function() { setTimeout(slabTextHeadlines, 1000); });
- jonah 14y ago"Always call the script after all fontface fonts have downloaded. I’ve hacked this for the demo to enable you to see the headline transformation as the script kicks-in but you should always use google WebFont loaders active() and inactive() callbacks to launch the slabText treatment (or a similar "font loaded" callback feature from another font provider)."
- monsterix 14y agoThis is very useful in a scenario where one wants the text to scale up and occupy space like it had been done on physical paper. I remember attempting something like this earlier (http://stackoverflow.com/questions/8421533/how-to-obtain-ctrl-behavior-on-a-browser-using-javascript http://stackoverflow.com/questions/8421533/how-to-obtain-ctr...) but I am stoked by your approach. Nice work. :-)
- creamyhorror 14y agoNow I'll have to decide whether to replace my existing brute-force text-fitting code with your more optimal solution. Argh!
- federicoweber 14y agoNice approach, Fittext is nice, but this bring the game to another level.
- lukeholder 14y agoanother useful text JavaScript plugin http://fittextjs.com/ http://fittextjs.com/ Full Disclosure: I have nothing to do with this product :)
- duiker101 14y agoNot that OP's isn't nice, but I like this one more.
- oliwarner 14y agoIt's a horrible mess on Chrome for Android. Use with extreme caution (and testing).