Multi Direction parallax scrolling - javascript

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.

Related

Finding and trying to understand the technology used behind the scene

Sorry if the question is a bit out of place but don't know any better since i'm a complete beginner.
What i'm trying to say is let's take for example this site
https://exp-ion.lusion.co/
I am trying to "decode" what libraries and technologies are used behind the scene so i can learn more about them and try to replicate the same effects.
Is it in any way possible to get "hints" on how things are done?
Tried looking up the source code, tried inspecting various elements. I get that the scene is done using threejs library. What about the scroll ladder? What about the text?
Thank you in advance for any tips and tricks.
You can try Wappalyzer, they have a browser extension you can install that let's you see most of the technologies used in a site.

Stretch image on mouse hover

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.

How did they create such effect on Bluestack website

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/

How do I autoresize and rearrange DIVs with a script?

I am working on a project of mine and I've always wanted to incorporate a feature where the
div's on my home page would resize and rearrange automatically (as I resize the browser). Now I know HTML and CSS but not much of any of the other language to make this happen.
What I am talking about is here http://themes.elmastudio.de/renkon/ (try resizing the browser).
Can you please explain how this works or at least refer me to a website where I can learn more, even a tutorial?
Thanks a bunch.
It looks like the site you referenced is using a JavaScript library called Masonry: http://masonry.desandro.com/. They provide some intro documentation on how to use the library here: http://masonry.desandro.com/docs/intro.html. If you need help getting started with JavaScript and jQuery, I recommend the W3Schools tutorials.

How is this done. Javascript?

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.

Categories

Resources