Nov 10 2011

share

Interactive HTML5/jQuery Typography Effects

by Guest Writer:

~ 2 min read. ENJOY!

HTML5 has made it’s way, full force into the web design industry. It’s brought more structure to the glorious world wide web(YAY!). On top of all the new SEO perks it brings, we have tons of new and fancy elements to use. One of them is the canvas element, which is an HTML element developers can use to create amazing pieces of “tangible” artwork on the web.

You can play around with some basic effects on w3schools.com

The canvas element is only a container for graphics. You must use a JavaScript to actually draw the graphics. w3schools.com

In those example showcases, you’ll find we’re able to accomplish a number of different basic drawing tasks. They include building out shapes, drawing lines, using canvas to manipulate text, colors, gradients etc. These barely scratch the surface of what we’re capable of creating.

For a little glimpse of what canvas and nifty Javascript can do together, lets take a look at a great interactive typographical tutorial written by Tim Holman, on CodeDrops. He takes us through, start to finish, how to set up the markup, what type of variables we need to use, and creating all the banners and type using Javascript. Then, to top it off, he adds an interactive element which manipulates the text when mousing over the area. Take a look and see what you think. Remember this is just the beginning of the rabbit hole, have fun!

With HTML5 gaining popularity, this tutorial outlines what is really just the tip of the iceberg that is interactive design Tim Holman - CodeDrops

UPDATE: At the time of the tutorial link above, there wasn’t much support for all HTML5 markups, mainly from Internet Explorer. But now, 2016, we have full support from all major browsers, Internet Explorer 9 and above included.

Topic(s):

  • Design, Programming
  • Connect with Variety Studios website →

    Instagram Facebook Twitter

    Variety Studios is based out of Syracuse New York, specializing in web design and brand identity, plus more (just ask). We provide small and mid sized businesses affordable and professional solutions to their design needs.

    View all articles by

    Leave a Reply

    Be the First to Comment!

    Notify of
    avatar
    wpDiscuz