6

I'm building a landing page for a client with their logo in the center and their catchphrase directly below - however they want the catch phrase to be animated so that it looks as though it is being handwritten.

I have been struggling for days with this and have no clue how to do it - if someone could help me it would be such a lifesaver!

Here is the basic landing page with no animation on the catchphrase:

<div class="image-wrapper">
<a href="home.html">
<img src="http://japesfawcett.com/testsh/images/landing_logo2.png" />
</a>

<div id="test">
<p>enter the sunshine state</p>
</div>
</div>

And the CSS:

body {
    background-color: #000;
}

@font-face {
font-family: segoe;
src: url(fonts/segoesc.ttf);
}

div.image-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}

.image-wrapper img {
display: block;
}

#test {
position: absolute;
top: 100%;
width: 100%;
}

#test p {
width: 100%;
font-family: segoe;
font-size: 18px;
text-align: center;
color: #FAEDE8;
margin-top: -40px;
}

And a JS Fiddle - https://jsfiddle.net/9297gefk/

Again, any help would be incredible!

dash167
  • 115
  • 1
  • 2
  • 10

1 Answers1

11

I've created a JSFiddle of it, that will do the trick for you.

And for effect like this, using HTML5 is really good option as you've being suggested to use canvas.

Here you can change height & width of canvas and your CSS as per your need.

Source: Handwriting Effect.

vivekkupadhyay
  • 2,851
  • 1
  • 22
  • 35
  • 1
    Nice one! Canvas is ideal solution for this. – dfsq Aug 23 '15 at 12:03
  • 2
    Thanks, this is great! I suspected using the canvas was going to be helpful, just wasn't sure where to start - but again, much appreciated. – dash167 Aug 23 '15 at 13:29