4

I'm looking to see if it's possible to make the following effect with purely css / jquery. I already know how to bend text in a circle, but that bends the entire element and I can't figure out how to just bend the bottom portion of the text to a circle. I guess I'm looking more to distort the text but I don't know how to best ask the question..

The purpose is to allow for elements such as these to be used as animated live text across banners.

I'd appreciate any help you guys can be. Fiddle's would be greatly appreciated.

Curved Text css3

Rob
  • 953
  • 7
  • 12
  • 4
    You can do it using an html5 canvas. What you do is slice the text into vertical slices and then manipulate those slices to form your arched text. Here's a [nice example of how to do it](http://stackoverflow.com/questions/19544735/how-to-make-rooftext-effect-and-valley-text-effect-in-html5-or-fabric-js). Then you can use the canvas element just like a text element. – markE Jan 19 '16 at 23:21
  • 1
    I like the idea... it's definitely a way to solve the problem.. I think I may need to push back on this one... That's a lot of overhead for a non important piece of text to make it live. – Rob Jan 19 '16 at 23:38
  • Regardless! Really cool to play around with! :) – Rob Jan 19 '16 at 23:45
  • What kind of animations are you referring to? Why can't you just animate a static image? – Lie Ryan Jan 19 '16 at 23:55
  • I can but I'd have to cut it up. They'd like to do individual letter animation. – Rob Jan 20 '16 at 00:08

3 Answers3

6

Nope! CSS can't actually warp text like that.

You could conceivably use different sizes for each letter and then have them aligned at the top, but that's not quite the same thing, and it wouldn't be dynamic.

Edit

markE proposed a canvas-based solution that is potentially useful to you. It's not really a CSS solution as you asked for, but perhaps the JS manipulation will get what you want: http://jsfiddle.net/AbdiasSoftware/e8hZy/

Tyler
  • 11,272
  • 9
  • 65
  • 105
  • 1
    Yep, [you can!](http://stackoverflow.com/questions/19544735/how-to-make-rooftext-effect-and-valley-text-effect-in-html5-or-fabric-js) :-) – markE Jan 19 '16 at 23:23
1

If you don't care about browser support, i.e. if this only need to work in modern browser, then you may be able to do this by using SVG.

First, you'll need to create the curved text in SVG. Then you SMIL animate the individual SVG element or CSS animate the individual SVG element.

Lie Ryan
  • 62,238
  • 13
  • 100
  • 144
  • I like this idea. This solves the problem but it's hard to reuse. And having to create unique animations for every use of this font is not practical. But due to it being a good answer I'll upvote because I didn't specify this is my request. – Rob Jan 20 '16 at 01:32
  • @Rob: if you want to, you can also use javascript to control the animation, so it's more reusable. The javascript could iterate over the SVG elements with a specified class and apply different animations on each element or set a different animation delays based on whatever javascript you write, so you don't have to animate each element by hand. – Lie Ryan Jan 20 '16 at 01:42
  • Without being more specific about the animation, we can't tell you if there is an easier way to do a particular animation that doesn't involve scripting. – Lie Ryan Jan 20 '16 at 01:54
  • interesting, have you seen any examples of using js to manipulate svg animation? I get the technical idea. But im struggling with the creative concept. Just need some inspiration. – Rob Jan 23 '16 at 17:19
  • Ah for some reason I missed your wufu forms link. That's cool. – Rob Jan 23 '16 at 17:23
0

div i {
  font-family: sans;
  position: relative;
}

div i:nth-child(1) {
  font-size:.75em;
  top:-10px;
}

div i:nth-child(2) {
  font-size:1.25em;
  top:-8px;
}

div i:nth-child(3) {
  font-size:1.75em;
}

div i:nth-child(4) {
  font-size:2.25em;
  top: 6px;
}

div i:nth-child(5) {
  font-size:1.75em;
}

div i:nth-child(6) {
  font-size:1.25em;
  top: -6px;
}

div i:nth-child(7) {
  font-size:.75em;
  top: -10px;
}
<div><i>E</i><i>s</i><i>t.</i><i>1</i><i>9</i><i>7</i><i>0</i></div>

div i {
  font-family: sans;
}

div i:nth-child(1) {
  font-size:.75em;
}

div i:nth-child(2) {
  font-size:1.25em;
}

div i:nth-child(3) {
  font-size:1.75em;
}

div i:nth-child(4) {
  font-size:2.25em;
}

div i:nth-child(5) {
  font-size:1.75em;
}

div i:nth-child(6) {
  font-size:1.25em;
}

div i:nth-child(7) {
  font-size:.75em;
}
<div><i>E</i><i>s</i><i>t.</i><i>1</i><i>9</i><i>7</i><i>0</i></div>
guest271314
  • 1
  • 15
  • 104
  • 177