Quantcast

Animated eCards with HTML5


You may also like...

30 responses to “Animated eCards with HTML5”

  1. Alex says:

    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.

  2. Ashley says:

    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

  3. @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

  4. Andi says:

    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…

  5. Steph says:

    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

  6. Anon says:

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

  7. Anon says:

    My bad… forgot to download the jquery :]

  8. Anon says:

    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

  9. Ashley says:

    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.

  10. John says:

    Another web designer tutorial that does not work properly!

  11. Star says:

    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

  12. Mizan says:

    I’m getting help from this one.

  13. […] 40. Create Animated eCards Using HTML5?s Canvas […]

  14. monjurul says:

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

  15. Nazir says:

    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.

  16. izlude says:

    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.

  17. Outi K. says:

    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!

  18. Paul says:

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

  19. Dating By Number says:

    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

  20. Johnny Quest says:

    I tried adding the code from step 2, but it’s not working, the canvas is still just white. You said to put it inside the draw (). Where, exactly, would it fit:

    }
    }
    function draw(ctx) {
    }
    $(document).ready(function(){
    init();
    I’ve tried inserting it in several different places around ‘draw’, and nothing works.
    Thanks

  21. Sherly Chatelain says:

    It’s so complicated. If you want to design animated cards, you can use AmoLink html5 greeting card. It adopts html5 technology, you needn’t learn html5 language. Just edit online with your imagination. Have a try. https://www.amolink.com/

  22. seo says:

    Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword….wait there’s even more Now what if i told you there was a simple WordPress plugin that does all the On-Page SEO, and automatically for you? That’s right AUTOMATICALLY, just watch this 4minute video for more information at. Seo Plugin

  23. Hi, known as Wall Street’s secret, discover how you can trade using a powerful piece of Free software..This have been mentioned on Bloomberg, CNNmoney, and more: To get more info, Go To: http://forexbinarysoftware.tk/

  24. Lamar says:

    There is apparently a bundle to realize about this. I suppose you made some nice points in features also.

  25. Keep working ,splendid job!

  26. Jewell says:

    fantastic points altogether, you just received a new reader. What might you suggest in regards to your put up that you made some days in the past? Any sure?

  27. I have learn several excellent stuff here. Certainly price bookmarking for revisiting. I surprise how much effort you put to create one of these great informative web site.

  28. Nice blog here! Also your website loads up fast! What web host are you using? Can I get your associate link in your host? I want my site loaded up as fast as yours lol

  29. Jesus says:

    naturally like your website however you have to take a look at the spelling on several of your posts. Several of them are rife with spelling problems and I find it very bothersome to inform the truth on the other hand I’ll surely come back again.

  30. Shad says:

    You can find certainly a lot of particulars like that to take into consideration. That’s a fantastic point to bring up. I offer you the thoughts above as general inspiration but clearly you will discover questions like the 1 you bring up where essentially the most important factor will be operating in honest beneficial faith. I don?t know if finest practices have emerged about items like that, but I’m positive that your job is clearly identified as a fair game. Each boys and girls really feel the impact of just a moment’s pleasure, for the rest of their lives.

Leave a Reply

Your email address will not be published. Required fields are marked *