Can you please help me find an example website with "floating" text?
May 8, 2013 2:28 PM Subscribe
I'm trying to find an example website to send to my web developer of "floating" text. I'm sure there's a better name for what I'm trying to describe. Basically, I literally mean that different lines of a short paragraph are "floating" in different directions and different fonts over an image.
Does this make sense? Can someone think of better words to describe? Best yet, can someone link to a site that has similar text?
Thank you in advance!
Do you mean using shadow effects to give the illusion of the text having distance from the image it is superimposed upon? It sounds like you're talking about a collection of phrases in different fonts over an image with varying shadows to give the impression of different depths.
posted by fearnothing at 2:33 PM on May 8, 2013
posted by fearnothing at 2:33 PM on May 8, 2013
Can someone think of better words to describe?
Maybe try drawing a crude mock-up of it in Paint. I can't picture what you're talking about at all, especially with regard to "different directions and different fonts".
posted by burnmp3s at 2:39 PM on May 8, 2013 [1 favorite]
Maybe try drawing a crude mock-up of it in Paint. I can't picture what you're talking about at all, especially with regard to "different directions and different fonts".
posted by burnmp3s at 2:39 PM on May 8, 2013 [1 favorite]
Response by poster: No. Urgh. It's infuriating when you can see something in your head and you can't describe it!
Imagine a paragraph like this:
......The quick
................ brown fox
jumped over the
............................... lazy dog.
(The periods are just spaces...which I don't know how to show on here otherwise).
BROWN FOX is in a bigger font, and maybe DOG is, too.
Each line is floating slowly in opposite directions, for instance?
Is this making any sense?
I am certain I've seen it before!
posted by jefficator at 2:39 PM on May 8, 2013
Imagine a paragraph like this:
......The quick
................ brown fox
jumped over the
............................... lazy dog.
(The periods are just spaces...which I don't know how to show on here otherwise).
BROWN FOX is in a bigger font, and maybe DOG is, too.
Each line is floating slowly in opposite directions, for instance?
Is this making any sense?
I am certain I've seen it before!
posted by jefficator at 2:39 PM on May 8, 2013
Are you talking about parallax scrolling?
A couple of good examples off the top of my head are this wedding website from the front page and this Italian design shop's site.
Google "parallax scrolling website" for plenty more.
posted by daniel striped tiger at 2:42 PM on May 8, 2013 [1 favorite]
A couple of good examples off the top of my head are this wedding website from the front page and this Italian design shop's site.
Google "parallax scrolling website" for plenty more.
posted by daniel striped tiger at 2:42 PM on May 8, 2013 [1 favorite]
Response by poster: Alright: here's an MS Paint example: http://www.flickr.com/photos/jddean/8721867708/in/photostream
posted by jefficator at 2:45 PM on May 8, 2013 [2 favorites]
posted by jefficator at 2:45 PM on May 8, 2013 [2 favorites]
I think I know what you're talking about (sorry can't view your mock-up right now), and if I'm right, what you want is probably an animated gif or something made with Flash. FWIW, you don't see titles on webpages utilizing this much anymore—it definitely looks dated to the early '90s internet when everyone put animated gif text on every damn thing.
posted by Eicats at 2:51 PM on May 8, 2013
posted by Eicats at 2:51 PM on May 8, 2013
This is likely something created in Jquery. Look for Jquery image galleries and see if that fits the bill.
posted by These Birds of a Feather at 2:58 PM on May 8, 2013
posted by These Birds of a Feather at 2:58 PM on May 8, 2013
It seems like something I would see in a TV commercial for a drug company. I don’t know that I’ve seen it on web sites.
posted by bongo_x at 2:59 PM on May 8, 2013 [2 favorites]
posted by bongo_x at 2:59 PM on May 8, 2013 [2 favorites]
Response by poster: It seems like something I would see in a TV commercial for a drug company. I don’t know that I’ve seen it on web sites.
posted by bongo_x at 4:59 PM on May 8 [mark as best answer] [+] [!]
Huh. Now that you say that, you might be totally right. Hmm.
posted by jefficator at 3:01 PM on May 8, 2013
posted by bongo_x at 4:59 PM on May 8 [mark as best answer] [+] [!]
Huh. Now that you say that, you might be totally right. Hmm.
posted by jefficator at 3:01 PM on May 8, 2013
what you want is probably an animated gif or something made with Flash
Auggh no no NO. It seems to me that you might not even be talking about something animated, but even if you are this is exactly what CSS animations are designed for. Trying to do it with a gif or embedded Flash would introduce all sorts of unnecessary complexities and probably look like crap when zoomed or on a Retina-type display, whereas just doing it with HTML and CSS will at least maintain the resolution of the text.
posted by XMLicious at 3:02 PM on May 8, 2013 [3 favorites]
If you're thinking of an animation look at this Firefox example of CSS-animated text. (The same thing is possible and can look identical in other browsers, it just requires slightly different code because they haven't all agreed on a complete specification of how everything should work yet. But it's way, way simpler code than doing it in Flash and simple animations of text are all worked out at this point.)
That can easily be moving over an image and other aspects can be animated like having the text fade in or out.
CanIUse entry for CSS animations.
posted by XMLicious at 3:06 PM on May 8, 2013 [1 favorite]
That can easily be moving over an image and other aspects can be animated like having the text fade in or out.
CanIUse entry for CSS animations.
posted by XMLicious at 3:06 PM on May 8, 2013 [1 favorite]
Are these actually physically floating (ie the text changes position over the course of time) or is the text just static but selectable on top of a given graphic? (Look at the microsoft.com site)
posted by These Birds of a Feather at 3:18 PM on May 8, 2013
posted by These Birds of a Feather at 3:18 PM on May 8, 2013
Response by poster: The text is physically floating. It moves over the image.
posted by jefficator at 3:41 PM on May 8, 2013
posted by jefficator at 3:41 PM on May 8, 2013
Have you ever seen a web site that does what you want?
posted by Rash at 4:24 PM on May 8, 2013 [1 favorite]
posted by Rash at 4:24 PM on May 8, 2013 [1 favorite]
Like how when you move your mouse over this page? If so, as daniel striped tiger says that's parallax scrolling.
posted by holloway at 4:24 PM on May 8, 2013
posted by holloway at 4:24 PM on May 8, 2013
You're describing a common animation seen most often in large Flash ads or website splash panels.
posted by Thorzdad at 4:46 PM on May 8, 2013 [1 favorite]
posted by Thorzdad at 4:46 PM on May 8, 2013 [1 favorite]
Yes, scrolling text/logos over background images were Flash's bread and butter. They look much better than what I've seen from animated CSS text, which seems more like an updated version of the < marquee > tag.
But I'd advise against calling it "floating text," as it refers to an existing CSS tag which does something else entirely.
"Scrolling banner text" strikes me as a better term to use.
posted by ShutterBun at 9:24 PM on May 8, 2013
But I'd advise against calling it "floating text," as it refers to an existing CSS tag which does something else entirely.
"Scrolling banner text" strikes me as a better term to use.
posted by ShutterBun at 9:24 PM on May 8, 2013
animated CSS text, which seems more like an updated version of the < marquee > tag
You may be thinking of early draft versions from half a decade ago or something along those lines.
CSS Animations as currently implemented don't have anything in particular to do with displaying text; any CSS property of anything that would appear on a web page can be animated, with a variety of timing and easing functionality. You can make a video clip rotate and tumble in 3D and stretch and skew as it plays if you want.
posted by XMLicious at 10:11 PM on May 8, 2013
This thread is closed to new comments.
posted by Admiral Haddock at 2:32 PM on May 8, 2013