Need to make a vertical timeline - javascript

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.

Related

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

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/

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

flash website redone in jquery? feasible?

I'm considering attempting a redesign of a flash website with jquery effects and transitions in place. I just wanted to reach out to the community to maybe see how feasible this really is considering the particular transitions and effects this website has.
Here's the link:
http://antonynicoli.com/english.html
The gallery I guess can be recreated by carousel plugin, but there are so many out there so maybe could suggest a stable one that would be be best suited to this job. The other items that really caught my attention in which I wouldn't really know where to start is the navbar and the effect that looks like a book opening when you click on a link on the navbar. Any and all input would be appreciated. Thanks.
This is probably doable, but I'm wondering about the motivations behind changing to an HTML/jQuery solution when it looks pretty good right now (as Brad pointed out above, it would require a total rework). I see a couple of things going on:
Carousel: jCarousel (http://sorgalla.com/jcarousel/) (never used it but it is popular)
Animations: jQuery Animate (http://api.jquery.com/animate/)
Other widgets/interactions: jQueryUI: (http://www.jqueryui.com)
Not sure how you would go about the open-book animation, but I suspect you could accomplish it with some clever jQuery animations.
The best way to see if it could be done is: start doing it! jQuery has tons of resources and you'll get good help here on StackOverflow.
After looking at the site i do believe most of the effects can be recreated fairly well using jQuery. Of course, your end-result might not be as smooth as the flash implementation but i think it can be done.
If you look at using HTML 5 i believe a lot of animations such as page transition with the opening book can be simulated with the canvas element. Same with the navigation elements.
https://developer.mozilla.org/en/canvas_tutorial
http://diveintohtml5.ep.io/canvas.html#divingin
As you mentioned some of the effects such as the carousel can be recycled from existing plugins. The only holdback really is how much time do you want to invest in porting a design to a language not as well suited to do the job. jQuery is an excellent framework but it is far from a drop-in replacement to create effects that are trivial to create in Flash/Actionscript.
the whole site can be done with jquery. all you have to do is map out all the animation done on the site and write it on paper. then look for the jquery alternatives online and check them off one by one. some things might not be exact but it will do the job.

Using HTML/JS or another web solution to render a twirling ribbon

Any thoughts on creating a fluid/flowing ribbon for a website effect?
I'm open to any ideas. Ideally I could do this simply with html and some js library, but I'm open to suggestions for doing this with flash also. Any links to tutorials or examples would be greatly appreciated as well.
Thoughts?
Processing.js is a popular JavaScript animation library which is a port of the Processing visualization language. There are some pretty impressive demos on the site, including this one of a snake which follows your mouse. I could imagine taking that and modifying it to be a twirling ribbon. Also, check out HasCanvas for 350+ more demos - I'm betting that someone has made something similar to what you're looking for - here is kind of a neat ribbon-y effect I saw on the first page.

Recreating the Javascript-powered 360° VR view from the iPad gallery

On the iPad gallery at http://movies.apple.com/ipad/gallery/ there is a nifty 3D-ish view when you click on the "360°"-Button on the lower right. It seems to be built with Prototype, some custom JS and 180 single JPEGs.
Now, I don't want to steal Apple's code, but I really would like to have a similar effect. I'm afraid recreating the effect all by myself would be too much for me, so
has anybody ever done something like this and released it as open source (or a paid library or something like this)? Integration with jQuery would be an added bonus.
How about this:
Reel is a jQuery plugin which takes an
image tag and makes it a live
"projection" of pre-built animation
frames sequence. Its aim is to provide
a 360° view of something or someplace.
Great alternative to widely used Flash
techniques.
Maybe what heporap is trying to say is: construct the 3D VR effect in the same way you might make a slider animation.
I guess a slider changes the position of an image in relation to where a mouse cursor is positioned so...
Perhaps try changing the IMG tag's SRC attribute on document.onmousemove and object.onmousedown for drag/positioning effect?
Maybe that sounds obvious, and I'm no maverick coder but it's a start...
I know its an old thread, but its still high on google result.
Here is a jQuery plugin that does exactly that effect http://giniedp.github.com/spritespin/
you better try out threesixty: http://www.mathieusavard.info/threesixty/
You may make it like a slider to change image's src.
http://movies.apple.com/media/us/ipad/2010/spins/apple-ipad-us-20100127_512x512/ipad-1up-us-20100127_512x512_172.jpg
http://movies.apple.com/media/us/ipad/2010/spins/apple-ipad-us-20100127_512x512/ipad-1up-us-20100127_512x512_135.jpg
Try this one with zoom: http://www.ajax-zoom.com/examples/example15.php
Or use this one. It's also Javascript but with curves for slowing down and another kinds of zoom functions.

Categories