DOes anyone know a good Javascript library that resembles Udemy's approach to presenting lectures?
http://www.udemy.com/mit-600-intro-to-computer-science-programming-fall-2008/#lecture/14053
It slides up and down, with a slow animation, along a vertical line, something like a timeline. I have seen something similar, but can't remember the name. Maybe you guys can help me out.
I think this will suit your requirements.
impress.js
Related
Hello i just found this site http://www.bluestacks.com/ and i was wondering how they ended up achieving such incredible effect. I know they used css3 and jquery but havent seen any tutorials on how to make stuff like this. I will like to create something like that any suggestions on how to do it or where to get such tutorials will be greatly appreciated.
It's a huge fad (that is kind of dead now, in my opinion). It's called parallax scrolling.
Google for plugins, or follow a link like this: http://www.jqueryrain.com/demo/jquery-parallax-plugin/
Basically, how can I take multiple differently-heighted elements and 'push' them against the top of a container, like on wolfram's homepage?
When I looked at their code, it appeared that they used a large amount of javascript, as well as absolute positioning, but it seems like there are easier ways to do it than that. How would one go about this?
Any help would be much appreciated. Thanks :)
You can look into a framework like UI-Kit which allows you to do things like this pretty easily.
I don't believe there is a native CSS solution for this design, although you might want to take a look at FlexBox.
Hi I'm trying to find a plug-in for flipping page, something like the Booklet but need to be responsive, if the screen are higher than wider it need to convert to single page layout, and need to work with touch, but I'm really not finding it! Maybe it doesn't exist. Is important to be free software.
If somebody knows something about, I'll really appreciate the help.
Turnjs seems to be a good option for this.
I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT
I have the artwork ready and have found many jquery libraries that will allow me to scroll horiz/vertical - but i'm not sure how to combine both together at a specific co-ordinate.
Could anyone please point me in a the right direction?
Edit: I did originally sign this post off having looked into Superscrolarama and thinking all was solved - but having struggled with implementing it - I dont think its quite the saviour I thought it was, I need both horizontal and vertical parallax as well as scrolling to achieve above, which it doesn't seem to support - so any other tips I'd be very grateful for!
I threw something together is jsfiddle for you.
http://jsfiddle.net/9R4hZ/40/
The script initializes the start positions of all of the objects first. Then handlers are set up for arrow key and mouse wheel. After that is the meat of the algorithm in the parallaxScroll function.
It uses the ARROWS or MOUSEWHEEL for scrolling.
There are from [left, right, top, bottom] transitions.
The HTML and CSS are really simple.
The JS/jQuery that runs it is self explanatory.
It's an interesting effect, that seems to be geared for artsy type sites.
Did you look into librairies like Scrollrama http://johnpolacek.github.com/scrollorama/ or Curtain http://curtain.victorcoulon.fr/?
I know in your question you mention that you already looked into different librairies but depending how they work it's difficult to really suggest how to use proper coordinates.
*edit1
If you didn't see it yet, the auther of scrollorama also did superscrollorama which give a bit more controler over the animation for example animation when an element is pinned.
http://johnpolacek.github.com/superscrollorama/
This article in smashinghub.com shows a collection of JQuery plugin for scrolling and parallax effect I'm totally sure one of them will help you.
it looks like jQuery Scroll Path is the most advanced of them or suit your requirements.
I realize I'm jumping in late here, and this might seem ultra obvious, but have you tried reverse engineering what they have done on https://victoriabeckham.landrover.com/INT? It looks like the ScrollAnimator script does a bulk of the work. I would download their site & mess with it locally, subtracting parts until I figured out which components provide which pieces of functionality. Then I would read through those to understand how they made it happen.
you have use scrollpath plugin
make path
Sorry. I don't know a good title for this, but please look here:
http://joshblog.net/projects/logic-gate-simulator/Logicly.html
I saw this from delicious over the weekend. It is in flash and I wondered if something like this, as far as the graphics and interaction goes, could be done in javascript (jquery or other library, not rolling my own.)
Again, I do not mean logic gates specifically but more the dragging, dropping and the drawing lines between objects, moving them around, etc.
Does anyone know of a website that has something like this in javascript? It kind of reminds me of dragging and dropping points on google maps but nicer. Thank you.
Looks like someone has recently made a Logic Gate Thing that might interest you, though it doesn't quite have the level of animation that the Flash version has. (Here is an explanation from the author.)
http://javascript.neyric.com/wireit/ and jQuery draggables is what you want.
Too bad the wire-it library is YUI. Would be nice if it were jQuery.
jQuery UI has some effects such as dragging and animations. There are some demos at http://jqueryui.com/demos/
Im sure you could work something similar with jQuery. Checkout the jQuery UI, they have demos of its capabilities.
Mootools can also do this - they have some pretty slick demos on their website.