Making an interactive website

[stagnax]

Hi,

I really really want to make a website like http://www.rleonardi.com/interactive-resume/ , but i have no idea where to start
If you have visited the link i mentioned above, then I’d like to know things like:

how does the character stays in the same place while the background scrolls?
how do you achieve the effect where you scroll the website vertically while the content scrolls horizontally?
At one point the character changes its movement and goes up, how do you achieve that?

I’m new to all these technologies so if anyone could simplify the complexity of building a site like this.

Thank you in advance.

[JeroenR]

I would say, just look into the source. It is done by javascript. Catch the scroll event probably and use the distance to position several elements. The character’s position stays the same, so that one is always in the middle.

[Shikkediel]

It’s a fun effect and I don’t want to spoil it but it performs very badly the way it was written. Full screen fixed position (which seems unavoidable) and JavaScript position changes instead of using a transform makes it perform at 10fps on my otherwise decent desktop. But I’ll let it slide because it looks to be written in 2013, lol.

That said, here’s a quick example with a basic idea:

codepen.io/anon/pen/dZBPwa

[stagnax]

Hi,
thanks for replying

Should I use javascript or CSS3 for animation?

[stagnax]

Hi,
thanks for replying
As a beginner, where do you think I should start from??

[Shikkediel]

Should I use javascript or CSS3 for animation?

Depends on the circumstance but in general, CSS is preferred. Complex animations will be harder to achieve though.

As a beginner, where do you think I should start from?

That’s a very broad question… but a basic understanding of HTML and CSS is a good start. To me there’s no better way to learn web design than by just building stuff.

[Author]

Posts