0

The side-by-side content and page title, style of web layout. An example of this is Melanie Daveid's website. It is beautifully designed, and I am impressed. And I'm really interested in the design, so it would be great if someone could tell me what it's called.

P.S.: Yes I did search on Google, but I suppose I couldn't find the right keywords to find proper results.

Improve this question
6
  • @damd I mean, it does look like it is parallax scrolling, but then again, if I knew for sure, I wouldn't be asking here. So is it parallax scrolling?
    – Sam F
    Apr 7, 2016 at 11:47
  • Yea it could be, but *to specify, I meant how the page title/cover was on the left side, and scrolled down with the user's scroll, as the right half side of the page scrolled through the content of the specific page.
    – Sam F
    Apr 7, 2016 at 11:50
  • @damd Hmm, well then here's two ways we can go about, first is to assume that it's a variant of parallax scrolling, and the second is to wait till someone else who will be sure with an answer answers here. I think the best way to go is the first way, until second.
    – Sam F
    Apr 7, 2016 at 11:55
  • The 'side-by-side' layout has nothing to do with the parallax scrolling, it's just a layout. I'm not sure there is a term for it... Not everything has to be 'called' something, It's just a layout. Someone else may be able to give you some search terms though.
    – Cai
    Apr 7, 2016 at 12:36
  • 1
    I believe the term is "sticky element". The only element where something is happening is the white area on the left. The right side is just images on top of each other and nothing more. I didn't check the code, but this is how it could happen. Images have a parent element. When the top of that parent element touches the top of the viewport, the white left side gets a new class that changes the position to fixed and height to 100%, essentially gluing it to the viewport. When the bottom of the image parent touches the bottom of the viewport, the class is taken away and it returns to normal.
    – Joonas
    Apr 7, 2016 at 12:51

1 Answer 1

Reset to default
2

This type of layout is called a split layout, for the simple reason that there obvious splits in it, often in the vertical direction. Google has some pretty good results when searching using this term.

enter image description here The above image comes from a Codrops article/template on split layouts.

The movement on the page you linked does not use parallax scrolling. Parallax would mean that elements are moving at different speeds based on their layering, which doesn't happen on this page.

Instead, like Joonas commented, this scroll behavior makes use of sticky elements. This can be implemented using position: sticky by browsers that implement it (low support currently), but you can also use a polyfill to get full browser support.

Improve this answer
1
  • Thank you, this answers it perfectly well. And Joonas too. This is the info I was looking for.
    – Sam F
    Apr 7, 2016 at 13:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.