Can Body Background Scroll Parallax

Introduction

Modern CSS is a powerful tool you can apply to create many advanced User Interface (UI) features. In the past, these features relied on JavaScript libraries.

In this guide, you will set up a few CSS lines to create a scrolling parallax effect on a spider web folio. You lot will apply images from placekitten.com as placeholder background images.

You will have a webpage with a pure CSS scrolling parallax consequence one time you've completed the tutorial.

Warning: This article uses experimental CSS properties that do not work across browsers. This projection has been tested and works on Chrome. This technique doesn't work well in Firefox, Safari, and iOS due to some of those browsers' optimizations.

Step 1 — Creating a New Project

In this pace, use the command line to prepare a new project folder and files. To first, open your terminal and create a new project binder.

Type the following command to create the projection folder:

                                                    mkdir                css-parallax

In this instance, y'all called the folder css-parallax. At present, change into the css-parallax binder:

                                                    cd                css-parallax

Next, create an index.html file in your css-parallax folder with the nano command:

                                                    nano                index.html

You will put all the HTML for the project in this file.

In the adjacent step, you will outset creating the structure of the webpage.

Stride ii — Setting Up the Application Structure

In this footstep, you volition add the HTML needed to create the construction of the project.

Inside your index.html file add the following code:

css-parallax/index.html

                                    <!              DOCTYPE              html              >                                                      <html              lang                              =                "en"                            >                                                      <head              >                                                      <meta              charset                              =                "UTF-8"                            />                                                      <meta              proper noun                              =                "viewport"                            content                              =                "width=device-width, initial-scale=one.0"                            />                                                      <championship              >            CSS Scrolling Parallax                              </championship              >                                                      </head              >                                                      <trunk              >                                                      </body              >                                                      </html              >

This is the basic construction of most webpages that employ HTML.

Add together the post-obit lawmaking inside the <body> tag:

          [characterization css-parallax/index.html]                                          <body              >                        ...                                          <main              >                                                      <section              grade                              =                "section parallax bg1"                            >                                                      <h1              >            Cute Kitten                              </h1              >                                                      </section              >                                                      <section              class                              =                "section static"                            >                                                      <h1              >            Boring                              </h1              >                                                      </section              >                                                      <section              class                              =                "section parallax bg2"                            >                                                      <h1              >            Fluffy Kitten                              </h1              >                                                      </department              >                                                      </principal              >                        ...                                          </body              >

This code creates three different sections. Ii will take a groundwork prototype, and i will be a static, plain background.

In the next few steps, you volition add together the styles for each department using the classes you added in the HTML.

Step 3 — Creating a CSS File and Calculation Initial CSS

In this step, y'all volition create a CSS file. And so you volition add together in the initial CSS needed to style the website and create the parallax effect.

Start, create a styles.css file in your css-parallax folder with the nano command:

                                                    nano                styles.css

This is where you will put all of the CSS needed to create the parallax scrolling effect.

Next, get-go with the .wrapper grade. Within your styles.css file add the following lawmaking:

                      [characterization css-parallax/styles.css]  .wrapper            {            height            :            100vh;            overflow-ten            :            hidden;            overflow-y            :            machine;            perspective            :            2px;            }

The .wrapper class sets the perspective and scroll properties for the whole page.

The pinnacle of the wrapper needs to be set up to a fixed value for the effect to work. You lot can use the viewport unit vh set to 100 to get the full height of the screen's viewport.

When yous calibration the images, they will add a horizontal scrollbar to the screen, so you can disable it by adding overflow-ten: hidden;. The perspective property simulates the distance from the viewport to the pseudo-elements you will create and transform further down in the CSS.

In the adjacent step, y'all volition add more than CSS to style your webpage.

Step 4 — Calculation Styles for the `.section` Grade

In this step, you volition add styles to the .section form.

Within your styles.css file add the following code below the wrapper class:

css-parallax/styles.css

                      .wrapper            {            height            :            100vh;            overflow-ten            :            hidden;            perspective            :            2px;            }                          .section              {                                      position              :              relative;                                      height              :              100vh;                                      display              :              flex;                                      align-items              :              heart;                                      justify-content              :              center;                                      color              :              white;                                      text-shadow              :              0 0 5px #000;                                      }

The .section grade defines the size, brandish, and text properties for the main sections.

Set a position of relative so that the child, .parallax::afterward can be admittedly positioned relative to the parent element .section.

Each section has a view-height(vh) of 100 to take up the viewport's full height. This value can be changed and set to whatever height you prefer for each section.

Finally, the remainder CSS properties are used to format and add styling to the text inside each section. It positions the text in the heart of each department and adds a color of white.

Next, yous will add a pseudo-element and style information technology to create the parallax effect on ii of the sections in your HTML.

Pace 5 — Adding Styles for the `.parallax` Class

In this step, you will add together the styles to the .parallax class.

Start, you volition add a pseudo-element on the .parallax class to be styled.

Note: Yous can visit MDN web docs to larn more than about CSS pseudo-elements.

Add the post-obit lawmaking below the .department class:

css-parallax/styles.css

                      ...  .section            {            position            :            relative;            height            :            100vh;            brandish            :            flex;            align-items            :            middle;            justify-content            :            center;            color            :            white;            text-shadow            :            0 0 5px #000;            }                          .parallax::afterward              {                                      content              :              " "              ;                                      position              :              absolute;                                      peak              :              0;                                      right              :              0;                                      bottom              :              0;                                      left              :              0;                                      transform              :              translateZ              (-1px)              scale              (i.5)              ;                                      background-size              :              100%;                                      z-alphabetize              :              -1;                                      }                        ...

The.parallax class adds an ::after pseudo-element to the background epitome and provides the transforms needed for the parallax effect.

The pseudo-element is the concluding child of the element with the class .parallax.

The first half of the code displays and positions the psuedo-chemical element. The transform property moves the pseudo-element back abroad from the photographic camera on the z-alphabetize, then scales it support to fill the viewport.

Because the pseudo-element is further away, it appears to motion more slowly.

In the next step, you will add in the background images and static background style.

Stride 6 — Adding the Images and Background For Each Department

In this stride, you volition add the concluding CSS properties to add in the groundwork images and groundwork color of the static department.

First, add a solid background colour to the .static department with the following code after the .parallax::after course:

css-parallax/styles.css

                      ...  .parallax::afterward            {            content            :            " "            ;            position            :            absolute;            top            :            0;            right            :            0;            bottom            :            0;            left            :            0;            transform            :            translateZ            (-1px)            calibration            (1.5)            ;            background-size            :            100%;            z-index            :            -1;            }                          .static              {                                      background              :              reddish;                                      }                        ...

The .static class adds a background to the static section that does not have an image.

The two sections with the .parallax form also take an extra form that is different for each. Employ the .bg1 and .bg2 classes to add the Kitten background images.

Add the following lawmaking to the .static class:

css-parallax/styles.css

                      ...  .static            {            groundwork            :            red;            }                          .bg1::after              {                                      groundwork-image              :                              url                (                'https://placekitten.com/1000/900/700'                )                            ;                                      }                                      .bg2::later on              {                                      background-image              :                              url                (                'https://placekitten.com/g/800/600'                )                            ;                                      }                        ...

The .bg1, .bg2 classes add together the respective groundwork images for each section.

The images are from the placekitten website. Information technology is a service for getting pictures of kittens for apply as placeholders.

At present that all of the code for the parallax scrolling effect is added, you lot tin can link to your styles.css file in your index.html.

Step seven — Linking `styles.css` and Opening `alphabetize.html` in Your Browser

In this step, you will link your styles.css file and open up the projection in your browser to run across the parallax scrolling outcome.

First, add the following code to the <head> tag in the index.html file:

          [characterization css-parallax/index.html] ...                                          <head              >                                                      <meta              charset                              =                "UTF-8"                            />                                                      <^              >                                                      <link              rel                              =                "stylesheet"                            href                              =                "styles.css"                            />                                                      <^              >                                                      <meta              proper noun                              =                "viewport"                            content                              =                "width=device-width, initial-scale=one.0"                            />                                                      <title              >            CSS Parallax                              </title              >                                                      </head              >                        ...

At present, y'all can open your index.html file in your browser:

Scrolling parallax effect gif

With that, you have set up a functioning webpage with a scrolling effect. Bank check out this GitHub repository to come across the total code.

Determination

In this commodity, you set up a project with an index.html and styles.css file and now accept a functional webpage. Yous added in the structure of your webpage and created styles for the various sections on the site.

Information technology's possible to put the images you lot utilise or the parallax effect further away then that they movement more slowly. Yous'll take to change the pixel amount on perspective and the transform properties. If y'all don't want a background paradigm to whorl at all, use background-attachment: fixed; instead of perspective/translate/scale.