3

What is this style called?

over 7 years ago from , Interaction / Product Designer @ GE

Hi Everyone,

Looking for inspiration to build a new website. Just curious on what this style of websites is called? Or what can I search to look for tutorials? Different containers moving at different speeds with layers overlapping is something I want to implement in a side project.

*Edit: I know its parallax, but when I google parallax or multilayered parallax I cannot find tutorials or more examples.

Shopify Example

Forrestless Slepers Example

Cafe Frida Example

21 comments

  • Jonathan SimcoeJonathan Simcoe, over 7 years ago

    This style is called: obnoxious!

    14 points
    • Jim SilvermanJim Silverman, over 7 years ago

      your comment is called: obnoxious!

      14 points
      • Jonathan SimcoeJonathan Simcoe, over 7 years ago

        Sorry, I just have a frustration toward visual effects that impede or hack the natural scrolling experience.

        That being said, I didn't need to be so rude in the way I approached my feelings. Sorry, Alex.

        8 points
  • Rebecca T, over 7 years ago

    @Jonathan Simcoe, no need to be rude..it's a fun experiment for anyone to try.

    Although I am not sure what it is called, but Rally Interactive did a great site recently. Maybe you can contact them for any advice?

    https://www.epicurrence.com/

    https://prinzhorn.github.io/skrollr/ - Here's a parallax demo.

    5 points
    • Alex FloresAlex Flores, over 7 years ago

      Thanks for the examples. The Rally website is awesome!

      0 points
    • Daniel GoldenDaniel Golden, over 7 years ago

      Right, I don't think it has a name yet. The closest thing I can think of is "parallax". The style incorporates parallax, but to call it parallax would be a misnomer because most parallax is counter-productive imo.

      1 point
  • Thompson GeorgeThompson George, over 7 years ago (edited over 7 years ago )

    I would call it short-lived.

    It's almost that the elements don't align for the sake of it. I appreciate how the layouts are unconventional, but I can't say that I like them.

    3 points
  • Brian NBrian N, over 7 years ago (edited over 7 years ago )

    They all seem very derivative of De Stijl.

    They all play with the tension between empty/solid spaces, solid blocks of color, and use of the grid as an alignment aid.

    EDIT: Sorry, I didn't realize you were specifically referencing the use of motion and parallax.

    "Parallax" is definitely the most popular term for what you're looking for — there are a number of javascript plugins and tutorials easily found via Google to get you started, it's just a matter of the specific CSS properties you update on scroll events — it seems like you're just looking for a relatively subtle translateY. Alternatively, you could look into this neat/hacky CSS-only approach for that specific effect.

    2 points
  • Thompson GeorgeThompson George, over 7 years ago

    Wait, I think it's called Vaporwave.

    1 point
  • Jason Lawton, over 7 years ago

    Some of those are parallax examples, some are examples of doing animations or transitions based on scrolling the mouse. You might want to check out scrollorama which seems to do it all :) There's also a style called scrolljacking, which you can see on apple's site for the mac pro but sometimes people don't like it, as it completely takes over the scroll events and makes the site less accessible.

    1 point
    • Alex FloresAlex Flores, over 7 years ago

      Thank you for the links! I don't want to scrolljack, but definitely looking into layering some images and text on top of each other as the user scrolls down.

      0 points
      • Jason Lawton, over 7 years ago

        Also, as you can tell from some of the other comments, sometimes people really don't like it. haha. I think it'd be fun to mess around with, and maybe use on a homepage or one specific page/section, but an entire site (like the Forrestless Sleepers site) can be a bit much.

        1 point
        • Alex FloresAlex Flores, over 7 years ago

          haha im not going to apply this with my clients. Just a random side project. But with your helpful links I dug this up Scrolldeck

          1 point
          • Jason Lawton, over 7 years ago

            Yeah I remember that one now! I was trying to think of the site, but scrollorama came to mind first. There was also some nike/adidas/puma site (can't remember which) which used it so amazingly (but also over the top).

            0 points
  • Seraifa LuceSeraifa Luce, over 7 years ago

    There's a JS library that can help you achieve a similar effect: http://scrollrevealjs.org/ It gives you more flexibility to adjust the entrance of various elements as it enters the viewport.

    0 points
  • Joe Crupi, over 7 years ago

    Try this course

    https://ihatetomatoes.net/product/parallax-scrolling-master-class/

    0 points
  • Dan Charlesworth, over 7 years ago

    Parallax can be a cool effect. Makes blocks of text super hard to read though.

    0 points
  • Dan W, over 7 years ago

    Different containers moving at different speeds

    On scroll you either push or pull the containers up/down relative to the scroll speed eg. for every pixel scrolled push down 0.5px via translateY so that the container appears to move slower than scroll.

    with layers overlapping

    Just combine z-index with the above

    If you want the most basic explanation possible of how to start writing some parallax code here's a little example I made a couple of years ago.

    If you actually want to write production ready code yourself (instead of using a plugin) then definitely check out this article: medium.com/@dhg/parallax-done-right it's a great resource for parallax or scroll functions in general. This article is also great for more performance tips: kristerkari.github.io/adventures-in-webkit-land/blog/2013/08/30/fixing-a-parallax-scrolling-website-to-run-in-60-fps

    Hope that helps :)

    0 points
  • ミンニシオ 。ミンニシオ 。, over 7 years ago

    Parallax

    0 points