Forums

Give help. Get help.

  • # December 7, 2017 at 12:54 am

    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.

    # December 7, 2017 at 4:43 am

    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.

    # December 7, 2017 at 7:00 am

    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

    # December 8, 2017 at 7:04 am

    Hi,
    thanks for replying

    Should I use javascript or CSS3 for animation?

    # December 8, 2017 at 7:08 am

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

    # December 8, 2017 at 1:59 pm

    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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag