Sprite-based CSS & jQuery Handwriting

Nico Hämäläinen

5 months ago · 2,529 views

13 comments 25 likes

I was working with a logo of an upcoming/under construction project of mine, and wanted to imitate writing the text on the webpage, as the logo is text-only right now, see below:

$I was working with a logo of an upcoming/under construction project of mine, and wanted to imitate writing the text on the webpage, as the logo is text-only right now, see below: At first I started googling for solutions on "self-writing text" in photoshop, not finding any easy way to do it, and thus had to resort to manual labour. I asked my friend if he could create an animated gif with photoshop by removing/adding pieces of/on the text with a soft brush and send me the frames. He did, after which I went over to http://spritemachine.com to generate a CSS sprite out of the given images, the frames of the animation could be exported as transparent PNGs, since it was all separate images. I ended up with this image (added background and resized so you can see it better): Following this process, I added an element to my HTML page with the id #sprite, and gave it the following CSS (in Stylus syntax): #sprite background: url(/img/logo_sprite.png) no-repeat top left size: 231px 130px &.frame-1 { background-position: 0px 0px; } &.frame-2 { background-position: -231px 0px; } &.frame-3 { background-position: 0px -130px; } &.frame-4 { background-position: -231px -130px; } &.frame-5 { background-position: 0px -260px; } &.frame-6 { background-position: -231px -260px; } &.frame-7 { background-position: -462px 0px; } &.frame-8 { background-position: -462px -130px; } &.frame-9 { background-position: -462px -260px; } &.frame-10 { background-position: 0px -390px; } &.frame-11 { background-position: -231px -390px; } &.frame-12 { background-position: -462px -390px; } &.frame-13 { background-position: 0px -520px; } &.frame-14 { background-position: -231px -520px; } &.frame-15 { background-position: -462px -520px; } &.frame-16 { background-position: -693px 0px; } &.frame-17 { background-position: -693px -130px; } &.frame-18 { background-position: -693px -260px; } &.frame-19 { background-position: -693px -390px; } &.frame-20 { background-position: -693px -520px; } &.frame-21 { background-position: 0px -650px; } &.frame-22 { background-position: -231px -650px; } &.frame-23 { background-position: -462px -650px; } &.frame-24 { background-position: -693px -650px; } &.frame-25 { background-position: 0px -780px; } &.frame-26 { background-position: -231px -780px; } &.frame-27 { background-position: -462px -780px; } &.frame-28 { background-position: -693px -780px; } &.frame-29 { background-position: -924px 0px; } &.frame-30 { background-position: -924px -130px; } &.frame-31 { background-position: -924px -260px; } &.frame-32 { background-position: -924px -390px; } &.frame-33 { background-position: -924px -520px; } &.frame-34 { background-position: -924px -650px; } &.frame-35 { background-position: -924px -780px; } &.frame-36 { background-position: 0px -910px; } &.frame-37 { background-position: -231px -910px; } &.frame-38 { background-position: -462px -910px; } &.frame-39 { background-position: -693px -910px; } &.frame-40 { background-position: -924px -910px; } &.frame-41 { background-position: -1155px 0px; } &.frame-42 { background-position: -1155px -130px; } &.frame-43 { background-position: -1155px -260px; } &.frame-44 { background-position: -1155px -390px; } &.frame-45 { background-position: -1155px -520px; } &.frame-46 { background-position: -1155px -650px; } &.frame-47 { background-position: -1155px -780px; } &.frame-48 { background-position: -1155px -910px; } &.frame-49 { background-position: 0px -1040px; } Now I have all the frames as neatly numbered classes for getting to specific frames! Next came the actual animation, which was done through a snippet of coffeescript like so: # Same as $(function() { }), just a "do this when the page loads" jQuery -> # Get the sprite element sprite = $ "#sprite" # Starting, ending and current frame numbers of the animation startFrame = 1 endFrame = 49 currentFrame = 1 # The function which sets the sprite's class to show the next frame nextFrame = -> sprite.attr "class", "frame-#{currentFrame}" currentFrame++ # The function which recursively calls itself to animate smoothly # Note that this requires window.requestAnimationFrame from your # browser to provide smooth framerate animation animate = -> # Stop animation if the current frame is higher than the end frame return null if currentFrame is endFrame+1 # Else, request animation frame with this same function requestAnimationFrame animate # Show the next frame nextFrame() # Start animation animate() You can see the final product over here: http://havn.co/$

At first I started googling for solutions on "self-writing text" in photoshop, not finding any easy way to do it, and thus had to resort to manual labour. I asked my friend if he could create an animated gif with photoshop by removing/adding pieces of/on the text with a soft brush and send me the frames.

He did, after which I went over to spritemachine.com to generate a CSS sprite out of the given images, the frames of the animation could be exported as transparent PNGs, since it was all separate images. I ended up with this image (added background and resized so you can see it better):

Following this process, I added an element to my HTML page with the id #sprite, and gave it the following CSS (in Stylus syntax):

#sprite
        background: url(/img/logo_sprite.png) no-repeat top left
        size: 231px 130px

        &.frame-1 { background-position: 0px 0px; }
        &.frame-2 { background-position: -231px 0px; }
        &.frame-3 { background-position: 0px -130px; }
        &.frame-4 { background-position: -231px -130px; }
        &.frame-5 { background-position: 0px -260px; }
        &.frame-6 { background-position: -231px -260px; }
        &.frame-7 { background-position: -462px 0px; }
        &.frame-8 { background-position: -462px -130px; }
        &.frame-9 { background-position: -462px -260px; }
        &.frame-10 { background-position: 0px -390px; }
        &.frame-11 { background-position: -231px -390px; }
        &.frame-12 { background-position: -462px -390px; }
        &.frame-13 { background-position: 0px -520px; }
        &.frame-14 { background-position: -231px -520px; }
        &.frame-15 { background-position: -462px -520px; }
        &.frame-16 { background-position: -693px 0px; }
        &.frame-17 { background-position: -693px -130px; }
        &.frame-18 { background-position: -693px -260px; }
        &.frame-19 { background-position: -693px -390px; }
        &.frame-20 { background-position: -693px -520px; }
        &.frame-21 { background-position: 0px -650px; }
        &.frame-22 { background-position: -231px -650px; }
        &.frame-23 { background-position: -462px -650px; }
        &.frame-24 { background-position: -693px -650px; }
        &.frame-25 { background-position: 0px -780px; }
        &.frame-26 { background-position: -231px -780px; }
        &.frame-27 { background-position: -462px -780px; }
        &.frame-28 { background-position: -693px -780px; }
        &.frame-29 { background-position: -924px 0px; }
        &.frame-30 { background-position: -924px -130px; }
        &.frame-31 { background-position: -924px -260px; }
        &.frame-32 { background-position: -924px -390px; }
        &.frame-33 { background-position: -924px -520px; }
        &.frame-34 { background-position: -924px -650px; }
        &.frame-35 { background-position: -924px -780px; }
        &.frame-36 { background-position: 0px -910px; }
        &.frame-37 { background-position: -231px -910px; }
        &.frame-38 { background-position: -462px -910px; }
        &.frame-39 { background-position: -693px -910px; }
        &.frame-40 { background-position: -924px -910px; }
        &.frame-41 { background-position: -1155px 0px; }
        &.frame-42 { background-position: -1155px -130px; }
        &.frame-43 { background-position: -1155px -260px; }
        &.frame-44 { background-position: -1155px -390px; }
        &.frame-45 { background-position: -1155px -520px; }
        &.frame-46 { background-position: -1155px -650px; }
        &.frame-47 { background-position: -1155px -780px; }
        &.frame-48 { background-position: -1155px -910px; }
        &.frame-49 { background-position: 0px -1040px; }

Raw

Now I have all the frames as neatly numbered classes for getting to specific frames!

Next came the actual animation, which was done through a snippet of coffeescript like so:

# Same as $(function() { }), just a "do this when the page loads"
jQuery ->
  # Get the sprite element
  sprite = $ "#sprite"

  # Starting, ending and current frame numbers of the animation
  startFrame = 1
  endFrame = 49
  currentFrame = 1

  # The function which sets the sprite's class to show the next frame
  nextFrame = ->
    sprite.attr "class", "frame-#{currentFrame}"
    currentFrame++

  # The function which recursively calls itself to animate smoothly
  # Note that this requires window.requestAnimationFrame from your
  # browser to provide smooth framerate animation
  animate = ->
    # Stop animation if the current frame is higher than the end frame
    return null if currentFrame is endFrame+1
    # Else, request animation frame with this same function
    requestAnimationFrame animate
    # Show the next frame
    nextFrame()

  # Start animation
  animate()

Raw

You can see the final product over here:

havn.co/

Tagged: animation coffeescript CSS sprites stylus text

Comments are only visible to Forrst members. Log in or Request an invite.

Sprite-based CSS & jQuery Handwriting

Nico Hämäläinen

More Posts from Clooth

More Posts from Everyone