Can somebody suggest me how to create text effects (like we can create in flash) in HTML 5 using javascript/jquery. And also the custom font for whatever text is appearing there? Is it possible? any example?
Thanks in advance.
You really need to look at Css3 for text based effects. But if you want to create full animations then Canvas would be your HTML5 tech of choice.
Try taking a look here:
http://canvas-text.googlecode.com/svn/trunk/examples/animation.html
http://aaronwinborn.com/blogs/aaron/cuf%C3%B3n-alternative-sifr-image-replacement
Cufon draws fonts onto canvas so you could then animate them with javascript.
http://www.8bitrocket.com/2010/05/15/html-5-canvas-creating-gaudy-text-animations-just-like-flash-sort-of/
http://speckyboy.com/2009/11/16/20-easy-to-use-jquery-text-effects-and-animations/
here:
http://www.catswhocode.com/blog/8-examples-of-stunning-css3-text-effects
here:
http://www.addictivefonts.com/various/css3/css3-text-effects/
and here:
http://code.google.com/webfonts
Related
This website has an excellent animated map showing the migration patterns of wildebeest in the Serengeti. Unfortunately, they animated their map using Flash.
I wanted to know whether there were alternatives for doing something similar, perhaps with Javascript. I found a plugin called Two.js however the documentation isn't great and it seems to be a bit overkill for what I need.
Does anyone know of any good resources or examples they could kindly link me to?
I think you have two options:
Using HTML5 canvas and animate your objects using window.requestAnimationFrame();
Animate the dom, here you could use GSAP or Web Animation API.
With HTML5 canvas you work with raster image (pixels) instead using the DOM you could animate any HTML elements including also SVG which is vector.
For my recent project I need to add a specific text animation - to achieve the effect of a pen writing some text on canvas.
I would like to hear your thoughts what would be the best way how to do that based on your experience?
Could you point me in the right direction and include some references where I could learn how to do that?
I am currently using Twitter Bootstrap Framework for Frontend.
http://lazylinepainter.info/
This is just the tool you need
There are a lot of libraries helping you to animate your content without using canvas (not cross browser...)
http://www.createjs.com/#!/TweenJS
http://www.greensock.com/gsap-js/
In slideshows using libraries such as jQuery/jQueryUI, it is common to split a slide and disperse the fragments for disappearing the current slide. I am curious about the trick to do this with Javascript. I mean pure JS to understand the process, not implementing with an available library.
As I searched over the internet, a common way to split a image by Javascript is to set the image as a background and show fragments by CSS, but I doubt this is the method used for creating slideshow effects.
How Javascript can split an image/slide?
You could try using the canvas tag in HTML 5. You can import an image on the canvas and work your magic on it from there. I do not have an example in hand but you could give it a try yourself.
I need to make animated symbols which show how the symbol should be drawn. Something similar to this:
http://www.handwritingforkids.com/handwrite/cursive/animation/images/animation_a.gif
How I would go about doing this in HTML5?
HTML5 <canvas> element is what you want. The canvas is a drawable context where you can create arbitrary shapes.
MDN has a tutorial for getting started with the canvas API: https://developer.mozilla.org/en/Canvas_tutorial
In pure HTML (even 5) you can't do this (note: <canvas> also requires JavaScript). Maybe, just maybe you could hack it together in HTML+CSS, but it is much easier to do it in JavaScript.
I suggest the RaphaëlJS vector graphics library
Is it possible to have irregular shapes like anchors on some surface in JS that can be clickable and it becomes a ball on runtime on page loads? I want to animate that surface that can be a ball and also want to track that which anchor shape is at particular point.
So is it possible using JS? How can this be achieved? I was unable to find any solution. Is there some JS library that can do this? Something like processing.js or Raphael js?
Could I suggest an HTML image map? You can embed an IMG tag in the page set it's usemap attribute and then define shapes on that image to be clickable areas.
It doesn't have as many features as a canvas but maybe a regular IMG element will do in this case.
I suggest using SVG with excelent Raphael js library. You can make interactive animations with pure javascript (i.e. without additional plugins) and those objects can be made irregular anchors (overriding click, mouseover and mouseout events to emulate anchor behaviour).
Another idea is to use HTML5 canvas, but this requires more code (the technology is still immature) and may fail to work under different browsers.