The newest trend in web design

It involves moving elements, but it’s not really animation.

It includes plenty of great color and physical elements, but it’s not material.

This background trend includes elements of plenty of other trends for truly engaging moving elements that draw users in and keep them on the site with great scrolling actions. This new parallax with a twist is the latest craze to fascinate website designers.

Parallax with a twist is different because it is so much more seamless than what we’ve seen with moving background trends in the past. It is identifiable by a moving background that is activated with scroll, very much like parallax scrolling effects.

The key difference is in the lack of “screens.” The scroll creates a continuous and moving dynamic flow where the background changes color, includes moving animations and elements that move with the screen and other elements move in to and out of the focus area.

It’s different from the parallax scrolling trends we’ve seen in the past because the elements move so seamlessly and smoothly that you don’t see the layers interacting. In contrast with parallax of the past, users often saw the layers of elements interacting with each other. So you might have a background that moved over a photo or a layer that “snapped” into place as the scroll came into a specific location.

Many of these parallax with a twist designs have a few common elements. In addition to scrolling effects there are a handful of other commonalities that designers are using, although these elements aren’t truly required to make the effect work.

  • One-page design: To maximize the impact of this technique, these websites often feature a one-page design. Some use the effect on a long-scrolling homepage with navigation to interior pages with a more standard format.
  • Bold typography: Big lettering with interesting typeface choices are a common factor. Designers are mixing thick stroke serifs with novelty typeface options for maximum impact and ease of readability.
  • Bright color: Colors from flat and material design are a common factor. Big, bright, bold options are common. The palettes are pretty simple, but often include more color options that you would commonly see to facilitate background hue changes.
  • Changing content types: The content on the page often changes with the scroll, so that the user might first get a hero image, then a “page” of text, then more images and then a form or call to action. This moving content pairs well with the interactivity of the movement in the scroll and with the background.
  • Continuous story: While the content types may change throughout the design, a single story is the element that ties it all together. This continuous story is a two-fold design element. The content story must have a flow from chapter (page) to chapter (page). But the visual story must include a common thread as well. With so many changing visuals, it is important that they feel like they belong together.
  • Big images: Whether designers use illustrations or photos, the images – particularly on the home page – are oversized and impactful. Most of these websites start with a hero header-style image with a cue to scroll.
  • Scroll instructions: With anything new, users often need a cue as to how to proceed or interact with the design, and these sites do just that. Most have a simple instruction to scroll or icon (often with a simple animation to grab the attention of the user) that tells users what to do and how to engage.
  • Simple language: Because the framework behind this moving background is complex, everything around it tends to be simple, including the language on the site itself. This contrast is complexity and simplicity keeps the site easy for the user to understand and interesting enough to encourage engagement.