Text animation options - animated GIF or Javascript or..? - javascript

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/

Related

html5 canvas image grid in javascript

I'm trying to build an image grid with canvas, but I'm not sure how to perform operations when a particular image is clicked. I want to achieve functionality like in this website https://big.dk/#projects but it's too complicated for me to grasp, I'm comfortable using javascript preferably Angularjs instead of JQuery if possible. I'm thinking of using tables to align images in a grid, can we achieve this kind of functionality without using canvas ? any suggestions would be of great help. thank you.
Yes, of course you can make this without using canvas either using bootstrap grid or with any other grid system you like,
Probably this can help you jsfiddle.net/webtiki/MpXYr/2/
And you should use transition css for smooth image zooming(resizing) on mouse hover.

What's an easy way to get started with an interactive Javascript slideshow / image viewer?

I'm very very new to Javascript. What I'd like to do is one of those rows of smaller images, that when you click on one it pops up bigger with left and right arrows for sliding through the photos.
What's the easiest way to get started doing something like that?
Any help is greatly appreciated, thanks.
You know we're not your research site, but since you're asking for the easiest way, I'd recommend HighSlide JS. It doesn't require JQuery, is highly personalizable, comes with examples which you can just copypasta and a nice tutorial.
Of course, if you'd include the JQuery lib to your page, you could also try one of these fancier plugins. And there are also some JQuery carousel plugins as noted by #Nupul.
Check out the galleries plugins at Web Resource Depot

Need to make a vertical timeline

I need to make a vertical javascript timeline like below link which is now created with flash.
Can someone give me a reference plugin? Or kindly advice me is it possible with plane javascript or javascript frameworks. I have little bit idea about plane javascript and jquery.
http://www.guardian.co.uk/world/interactive/2011/mar/22/middle-east-protest-interactive-timeline
I did some research on it. But did't get any good result.
Thanks in advance.
https://github.com/balancemedia/Timeline
Demo: http://builtbybalance.com/github-timeline/
there could be some more: https://github.com/search?langOverride=&language=JavaScript&q=timeline&repo=&start_value=1&type=Repositories
A good tutorial:
http://www.9lessons.info/2012/01/facebook-timeline-design-using-jquery.html
the whole thing is done in flash. you can achieve this in javascript(definitely with css), but there is not straight forward method for it. Even in flash it wasn't done in a straight forward method. It took some efforts to sync the movements of the timeline and the events path. start with developing custom scroll bar using javascript and css, and then develop the rest.

can Ext JS do snap-to-grid for drag/drop/resize UI?

Currently planning for a time-line application. Each elements on the time line will need to be resizable and draggable with a snap-to-grid positioning similar to jQuery UI's
http://jqueryui.com/demos/draggable/#snap-to
http://jqueryui.com/demos/resizable/#snap-to-grid (the snap to 20x20 kinda thing)
Is this feature available with Ext JS? Been googling around without any results. Can anyone point me to some examples please?
You may get some inspiration from http://ext.ensible.com/deploy/dev/examples/calendar/custom-views.html
Edit
Source code on Github

Animate PNGs with jQuery?

Is there a simple plugin or some robust code that would allow me to animate PNGs with a simple start and stop method? TSM, Alex.
[Edit: I made a jQuery plugin that animates PNGs. Will post when it's all done.]
While this is not an "off-the-shelf" plugin, you may be intrested in checking out the following tutorial:
Building an Animated Cartoon Robot with jQuery
It uses PNG images for all the layers. It explains how to implement a startHim() method, which I'm sure you'll be able to convert into a stopHim(). You may probably be able to skim through it, unless you are trying to do something similar.

Categories