Parallax effects can certainly add character to your website, but the browser may have to perform “expensive” tasks to build them, using up resources and impeding performance. Again, as already discussed, this is a basic demo and might not be suitable for all parallax cases. That’s it! In this quick tip, we managed to create a really simple parallax scrolling effect with just a few lines of JavaScript. Margin-top: screen and (max-width: 500px) px,0)` Nothing really important, just some basic stuff that will enhance the page layout:īackground: #ededed url(IMG_SRC) no-repeat center/cover īox-shadow: -15px -15px 15px rgba(0, 0, 0, 0.07) Next we’ll specify a few CSS rules for our page. These elements are parallax elements and the values of their attributes will determine their behavior during the parallax scrolling. Notice the data-direction and data-speed custom attributes assigned to the elements of the first section. The first section holds the hero image and its child elements, while the second section contains the page’s main content: The page markup consists of two sections. Let’s build it in three fundamental steps: beginning with the markup, then the styling, then the behavioral JavaScript. Here’s the page that we're going to build. To achieve it we’ll use a bit of JavaScript code, but keep in mind that you can create pure CSS parallax websites by combining 3D transforms. In this quick tip tutorial we’ll learn to add a simple yet useful parallax scrolling effect to a hero image.

Parallax js