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/
Related
I just came cross an impressive portfolio, which you can see here: https://kulbachny.com/
I was wondering, how did he achieve that 'stretched and blurred' effect when moving the cursor hover his image?
I can imagine it has to do with canvas and maybe Three.js/WebGL (not so sure)(?)
I'd love to achieve the same effect, but I guess that's not so simple..
If you know how to do it, could you please explain how something such this can be built?
And if too long to explain, could you refer to good guides or technologies / libraries to study in order to be able to build this kind of animations?
Thanks a lot
I can't see what his own site is build with. But site's of his portofolio are made with TweenMax Javascript framework. You can look up yourself some TweenMax tutorials.
Does anyone know where I can get started on trying to program something like this http://www.fillet.com.br/
I have the understanding of parallax but cannot find anything remote to how they did this.
It looks like that site uses a library called Skrollr which is open-sourced on GitHub.
They have another fun example.
And here's an article with a tutorial.
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
http://www.dennys.com
I'm wondering how the top navigation was programmed, From the source code I see javascript but I am hoping someone could recommend a resource / tutorial in learning how they built both the top navigation and the siding feature.
Many thanks.
You should investigate Path.js ( https://github.com/mtrpcic/pathjs ) as the url's suggest they are using it.
I doubt anyone has written a tutorial on how Denny's made a website.
But through some playing in the console, I found they use jQuery, which comes with many effects. To bring the navigation down, they probably use something like..
$('#navigation-button').mouseenter(function () {
$('#navigation').slideDown();
});
I have something similar set up here.
Don't use any of that code directly. It's just quickly written garbage. It'd need quite a bit of tweeking for production.
It's easy with javascript/jquery. Create a main div with fixed witdh where you put all your pages (menu, home, etc) and overflow:hidden. Then, with jquery's plugin Animate slide the position of the div's content.
Search for jquery controls. There are several available on the net free of charge which help you get this functionality.
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.