1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How can I achieve this "scrolling dynamic page" effect?

Discussion in 'Web Design' started by JDMaStA, Sep 15, 2013.

  1. JDMaStA

    JDMaStA Registered Member

    Joined:
    Jan 20, 2011
    Messages:
    53
    Likes Received:
    11
    I have recently stumbled upon more and more of those "scrolling dynamic pages" (I don't know what they're exactly called...)

    This one is a good example: www.archeage.com/en

    Apple also uses this design for their new iPhones: www.apple.com/iphone-5c/ and http://www.apple.com/iphone-5s/

    Does anyone have an idea what those types of websites are called and how one could easily replicate them? (i.e. an available Template).

    Thank you very much in advance :)
     
  2. gplclub

    gplclub Newbie

    Joined:
    Sep 20, 2013
    Messages:
    4
    Likes Received:
    0
    Can't post links yet but search for onepagescroll.js
     
  3. karthimx

    karthimx Newbie

    Joined:
    Aug 17, 2009
    Messages:
    37
    Likes Received:
    3
    Occupation:
    Web Designer
    Home Page:
    but the loading time will be high at the start.
     
  4. krieg

    krieg Newbie

    Joined:
    Sep 19, 2013
    Messages:
    2
    Likes Received:
    0
    Location:
    127.0.0.1
    This is referred to as Parallax, you can achieve a nice scrolling presentation with this kind of design.

    A paragraph from wiki: Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines.

    Keep in mind you may end up with a slow loading site specially if it's going to be image heavy. Works alright if you use as a landing page, one page presentation or something of that sort. Likely not the best for an ecommerce site.

    Search for neomam 13reasons as an example, a nice infographic presentation that gives it an interactive feeling.


    If you are using worpress themeforest and mojothemes for instance have them.


    There are also a few free ones. A quick search shows bragthemes got one.


    webdesign tutsplus has a neat tutorial and a downloadable demo.
     
  5. igniteimages

    igniteimages Regular Member

    Joined:
    Apr 2, 2013
    Messages:
    393
    Likes Received:
    168
    I have one site with parallax - it's pretty cool but obviously some (lots) of thought needs to go into it.

    The theme I have it on is Coffee & Cream from Themeforest which is a hybrid 'one page'/flat/multi page/large text design (if that makes sense).

    Well worth looking into as the author is one of the rare ones who listens to feedback and acts on it.

    (no connection to the author BTW) :)
     
  6. SEOHULK

    SEOHULK BANNED BANNED

    Joined:
    Aug 20, 2013
    Messages:
    102
    Likes Received:
    45
    krieg above nailed it, listen to him.

    My .2 cents:
    1) Parallax sites are great for presentation (when design is the most importat)
    2) For SEO / ecommerce / sales ... forget it. Parallax is NOT the way to go.
    3) For mobile .. also forget it. You can make a responsive version, sure, but heavy JavaScript almost kills most phone browsers and most of this sites are not touch friendly. Even most older computers have trouble displaying them.