Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 87
  • Last Modified:

Animate a Title

Hi Experts,

Using CSS only (I'm taking a CSS Course), how can I animate in a title (h1), one character at a time, into the desired position?

Thank you.
0
APD Toronto
Asked:
APD Toronto
  • 4
  • 2
1 Solution
 
Julian HansenCommented:
Blind links deleted

Please refer to EE policy on posting links to off site content (http://support.experts-exchange.com/customer/portal/articles/1162518)

Posts with links to OSC should contain enough commentary for the post to stand on its own.

JulianH
0
 
APD TorontoAuthor Commented:
Hi Julian, I don't believe I posted any links
0
 
Andrew DerseIT ManagerCommented:
It's possible, but my approach will probably hurt your SEO as the title tag would be hidden while the animation is occurring.

Here's how I would do it:

1) Have the <h1> text as hidden, but on the screen in the end position desired.
2) Break out each letter in it's own div or span.
3) Animate that span using css animation
4) Once everything is lined up, turn off all of the divs/spans and turn on <h1> tag.

Just 1 approach.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
APD TorontoAuthor Commented:
I know what you mean, but how can I both set left: -200px then transform left 30px

Can you give me an example perhaps "Hi" or "Hey"
0
 
APD TorontoAuthor Commented:
I  mean, I dont think that you have a pseudo-selector like span:onbodyload?
0
 
Andrew DerseIT ManagerCommented:
Correct, most of the time this is easily accomplished with javascript or jQuery.  I prefer jQuery. So when page loads you can manipulate the css through the jQuery calls. I personally wouldn't do it purely with css, I would use jQuery to help.
0
 
APD TorontoAuthor Commented:
I know how to do it with jQuery, but this is a CSS course. Can you help me out?
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now