SlabText.js

http://www.frequency-decoder.com/demo/slabText/

by electic • 14 years ago

131 16 14 years ago

frequency-decoder.com

vhf• 14 years ago

Great work, the effect is stunning !

Really nice that it's automatically disabled when displayed on a small screen than viewport defined.

pud• 14 years ago

Beautiful. Does it work in IE? (i'm too lazy to fire it up)

pooriaazimi• 14 years ago

No (IE9).

the_unknown• 14 years ago

works in IE10 - so good for the future.

trimetric2• 14 years ago

This 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• 14 years ago

This is what the preset word combinations mentioned in the post are for.

trimetric2• 14 years ago

Ahh, right, i missed that. I was distracted from the sub-headings by the big bold responsive headings.

wamatt• 14 years ago

Nice :)

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• 14 years ago

It's actually exactly a 1 second delay:

$(window).load(function() { setTimeout(slabTextHeadlines, 1000); });

jonah• 14 years 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• 14 years ago

This 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-ctr...) but I am stoked by your approach.

Nice work. :-)

creamyhorror• 14 years ago

Now I'll have to decide whether to replace my existing brute-force text-fitting code with your more optimal solution. Argh!

lukeholder• 14 years ago

another useful text JavaScript plugin

http://fittextjs.com/

Full Disclosure: I have nothing to do with this product :)

duiker101• 14 years ago

Not that OP's isn't nice, but I like this one more.

federicoweber• 14 years ago

Nice approach, Fittext is nice, but this bring the game to another level.

oliwarner• 14 years ago

It's a horrible mess on Chrome for Android. Use with extreme caution (and testing).

SlabText.js

Related Stories