Animated eCards with HTML5


You may also like...

  • Alex

    HTML5 is great if you have a knowledge of javascript but there are alot of designers who use flash, as it is quicker for them to draw out the animation in Flash. I certainly find flash easier to use and correct errors than javascript.

  • Ashley

    I followed this tutorial step by step and got nothing. :( && It’s not my browser, because I just updated all my browsers, and it doesn’t work in any of them. It doesn’t even display the “I’m sorry, your browser can’t display this eCard”. What could I be doing wrong? o.O

  • http://www.lemon-fresh.co.uk lemonfresh:design

    @Alex HTML5 is definetly the way to go. Flash is so time consuming and for clients, sometimes it is not the way to go financially.

    Keep up the good work

  • Andi

    Flash is less time consuming than javascript. you can create animations far easier and faster. but you need the plugin for it, and if you want to do something out of the flash player sandbox, you have to use javascript or a server language like php anyway…

  • http://otherofficeaz.com Steph

    I found that if I went to Chrome’s debugger for javascript there were issues with the way the code was displaying. I had to make sure ALL double quotes were single quotes, this included the ones that were in html tags and not in the script tags. Try that and see if that works.

    Ashley said:
    I followed this tutorial step by step and got nothing. && It’s not my browser, because I just updated all my browsers, and it doesn’t work in any of them. It doesn’t even display the “I’m sorry, your browser can’t display this eCard”. What could I be doing wrong? o.O

  • Anon

    I seem to have the same problem as Ashley.
    Anyone know how to fix this?
    Thanks in advance

  • Anon

    My bad… forgot to download the jquery :]

  • Anon

    Solved the problem by installing Jquery and retyping all ” and ‘ marks.
    There is also a slight error in the code:

    if (y3>400) y3=-200;
    y4-y4+1;

    It should read y4=y4+1 otherwise you get a static snowflake

  • Ashley

    Thanks! That did work! =)

    Steph said:
    I found that if I went to Chrome’s debugger for javascript there were issues with the way the code was displaying. I had to make sure ALL double quotes were single quotes, this included the ones that were in html tags and not in the script tags. Try that and see if that works.

  • John

    Another web designer tutorial that does not work properly!

  • Star

    Does anyone have this code working and completed if so can you post it so that I may compare what I have done wrong.

    Thank you in advance

  • http://www.alherabd.com Mizan

    I’m getting help from this one.

  • Pingback: 60 Excellent Web Development Tutorials | stylishwebdesigner()

  • http://www.softtechbd.com monjurul

    Project Management , CRM & Help Desk , Time Tracking , Issue & Bug Tracking , Document Management , Finance & Accounting , HR Management , Supper mall etc.

  • http://pressreleases.cambridgewhoswho.com Nazir

    Google is currently the world’s most popular search engine; used by several hundred million people everyday. Among the masses searching Google are your clients, potential clients and even your competition. If you are currently seeking a new career opportunity, you can bet that your future employer is also researching you online.

  • http://www.hugclub.net izlude

    Adobe announced it would discontinue flash player on androids and blackberry. Adobe is considering the same for PC in the next 2 to 3 years. This is bad news for e-cards.

    As you all know, swf ecards are very “tiny” in size while retaining high quality presentation. Observe this Easter e-card http://www.hugclub.net/personalcards/happyeasterooh.html

    The solution is easy, but has some drawbacks… Simply make your e-cards in flash, as normal… but this time “do not loop your music” and remove the “replay button”! do not exceed 24fps.

    Use Moyea swf to video converter pro to change your flash e-card to a video format. These will be playable in an HTML5 web player. Phones can view it too, so you get a bigger audience.

    The drawback…. large file size. The swf I used was only 370 KB. Converting it to mp4 pushed it to 2 MB, or flv to 1.2 MB. The bandwidth can add up for your web hosting exponentially. Be very cautious! If you’re gonna do this, get ad support on your website, you’ll need the extra revenue.

  • Outi K.

    Hi!
    I got the example functioning with these checks:

    1. It should read y4=y4+1 otherwise you get a static snowflake (as Anon said there earlier)
    2. Check the jQuery link and file name. Latest js. file is not named as “jquery-
    1.3.2.min.js”, I downloaded a file called “jquery-1.7.1.min.js”. Also if you did not place it on a folder named “scripts” the link is not functional as the link is broken.
    3. Make sure you have saved the images in the correct place = same folder as your page.
    http://www.webdesignermag.co.uk/wp-content/uploads/2009/12/eCard.zip

    Thanks for this tutorial, it was illuminating for a non-coder like me! Happy Holidays!

  • Paul

    Does anyone know of a site that has e cards made from html5 that will play on iPad and can ba sent via email?

  • Dating By Number

    I’ve tried this e-card code – but the send button does not work -please advise on how I could get it to work. Here is my attempt http://www.datingbynumber.co.uk/FORM/9_copy.html