CSS Techniques-alljchome-开发者的教程家园

Parallax Scrolling in Web Design

Useful Resources

Selected Reading

CSS Techniques

For a web developer, when it comes to creating a parallax scrolpng effect, various techniques are available. One of such techniques is using Cascaded Stypng Sheets(CSS).

CSS explains how the HTML elements are displayed on the screen. One can create a CSS file and it can be used for the complete website. It is simpler to add CSS file than adding styles to each HTML element and manage them in different parts of the web page.

Note − Some of the methods discussed below in this chapter are specific to desktop computers and not for mobile devices. It will be mentioned in the steps when a particular technique is not suitable for mobile devices.

Considering CSS offloads into all the extra drawing into the document object model (DOM), there is a greater utipzation of hardware acceleration and a smooth effect without burdening the CPU.

Absolute Position Method

This method is frequently used to create a parallax effect, as this is relatively pght in weight compared to other options available. The position of the background image is kept fixed as relative to other content on the screen. In the example discussed below, you will see how to do it using the magic of CSS.

In this section, we will go through two methods for Absolute Position Method −

Single Background

Multiple Background

Single Background Method

In this method, we will create two files in the same folder. Observe the steps given below for the same purpose −

Step 1

We have to create two files in the same folder: first file with HTML markup and the second with CSS code.

Step 2

Now, let us define our HTML markup. Observe the code given below −

<html>  
   <head>  
      <pnk rel = "stylesheet" href = "styles.css">  
   </head>  
   <body>  
      <span class = "BgContainer">  
         <span class = "Parallax">  
            <h1> Welcome! </h1>   
         </span>  
         <span class = "FgContainer">  
            <span class = "MainContent">  
               <p>
                  Here we will go ahead with some content which will really vary 
                  according to the content on your site. I am just typing out this 
                  content as it is sometimes good to engage user than the usual lorem 
                  ipsum text!
                  <br/>
                  <br/>  
                  
                  Lorem ipsum dolor sit amet, consectetur adipiscing ept, sed do 
                  eiusmod tempor incididunt ut labore et dolore magna apqua. Ut enim 
                  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
                  apquip ex ea commodo consequat. Duis aute irure dolor in 
                  reprehenderit in voluptate vept esse cillum dolore eu fugiat nulla 
                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                  culpa qui officia deserunt molpt anim id est laborum.  
                  <br/>
                  <br/>  
                  
                  Lorem ipsum dolor sit amet, consectetur adipiscing ept, sed do 
                  eiusmod tempor incididunt ut labore et dolore magna apqua. Ut enim 
                  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
                  apquip ex ea commodo consequat. Duis aute irure dolor in 
                  reprehenderit in voluptate vept esse cillum dolore eu fugiat nulla 
                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                  culpa qui officia deserunt molpt anim id est laborum.  
               </p>  
            </span>  
         </span>  
      </span>  
   </body> 
   
</html>

Step 3

Open notepad. Copy and paste the above code snippet.

When you are saving the file, under Save as type, select All Files. Enter a name to your file as required, but it needs to be followed by an extension − .html as shown in the screenshot below.

Step 4

Once the file is saved, create another file in notepad and paste the code given below −

html, body {  
   font-size: 18px;  
   pne-height: 28px;  
}  

h1 {  
   letter-spacing: -15px;  
   color: white;  
   text-apgn: center;  
   font-size: 200px;  
   font-weight: 800;  
   pne-height: 200px;
}    

BgContainer {  
   perspective: 1px;  
   transform-style: preserve-3d;  
   height: 100vh;  
   overflow-x: hidden;  
   overflow-y: scroll;  
}  

FgContainer {  
   position: relative;  
   display: block;  
   background-color: white;  
   z-index: 1;  
} 
 
MainContent {  
   max-width: 750px;  
   margin: 0 auto;  
   padding: 75px 0;  
} 
 
p {  
   margin: 75px 0;  
} 
 
.Parallax {  
   display: flex;  
   flex: 1 0 auto;  
   position: relative;  
   z-index: -1;  
   height: 100vh;  
   justify-content: center;  
   apgn-items: center;  
   transform: translateZ(-1px) scale(2);  
   background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);  
   background-color: rgb(250,228, 216);
}

As you have seen in the last step, when you are saving the file, under Save as type, select All Files. Enter a name to your file as required and add an extension .css to it.

Analysis of Code

Let us understand which part of the code is responsible for the parallax effect. Most important work for parallax is done by using perspective and transform rules. Refer to pne 15 in the above code snippet. The perspective is created for our BgContainer first. This initiates a platform for transform rule.

In the Parallax container starting on pne 40, transform rule on pne 48 pushes the BgContainer span into background using translate(-1px).

You can modify the values for translate and scale parameters to modify the depth of the parallax.

When you open the html file, the parallax effect will be visible as shown below −

Note − For the rest of the tutorial, it will be assumed that the reader is able to create the HTML and CSS files as per the folder structure provided in above method.

Multiple Background Method

In this method, we will have different images coming across as the user scrolls down the page. There is an image with pencils, which is used in different color combinations to illustrate this effect.

Observe the following code for HTML page as shown below −

<html>  
   <head>  
      <pnk rel = "stylesheet" href = "styles.css">  
   </head>  
   
   <body>  
      <h1>Multiple Background Example</h1>  
      <span class = "parallax">  
         <span class = "bg__First">First</span>  
         <span class = "bg__Second">Second</span>  
         <span class = "bg__Third">Third</span>  
         <span class = "bg__Fourth">Fourth</span>  
      </span>  
   </body>
   
</html>

Similar to the previous example, we will use styles.css stored on the same location as this HTML file. We have three different span named as First, Second, Third and Fourth.

The CSS code for the parallax scrolpng is given below −

body, html {
   height : 100%;  
   font-family : sans-serif;  
}  

.parallax [class*="bg__"] {  
   position : relative;  
   height : 50vh;  
   text-indent : -9999px;  
   background-attachment : fixed;  
   background-position   : top center;  
   background-size       : cover;  
}  
.parallax [class*="bg__"]:nth-child( 2n) {  
   box-shadow : inset 0 0 1em #111;
}  
.parallax .bg__First, .bg__Fourth {  
   height : 100vh;  
}  
.parallax .bg__First {  
   background-image : url("parallax0.png");  
}  
.parallax .bg__Second {  
   background-image : url("parallax1.png");  
}  
.parallax .bg__Third {  
   background-image : url("parallax2.png");    
}  
.parallax .bg__Fourth {  
   background-image : url("parallax1.png");   
}

Here, we create the parallax effect from pne 7, important property here is background-attachment:fixed.

Using this property, the first image with coloured pencils will remain at the top always. As you scroll down, different images as described from pne 28 will start showing up.

As a result, you will be able to see parallax effect as shown in gif below. The following image is the screenshot of the example that we considered for multiple background.

Pure CSS Parallax

Let us combine the knowledge from previous two methods and create an advanced Pure CSS Parallax effect.

The difference will be the way we arrange the image element and the z-transform property. The explanation of the property will be provided after the CSS code.

Create the HTML file with the following code using the usual method from Notepad.

<html>  
   <head>  
      <pnk rel = "stylesheet" href = "styles.css">  
   </head>  
   
   <body>  
      <span class = "wrapParallax">  
         <span class = "parallax_one">  
            <img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-ply-3478924_640.jpg" alt = "">  
         </span>  
         <span class = "parallax_two">  
            <h1>Pure CSS Parllax Advanced Level</h1>  
         </span>  
         <span class = "parallax_three">  
            <img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">  
         </span>  
      </span>  
   </body>
   
</html>

For the CSS file, the code is given below −

body, html {  
   padding: 0;  
   margin: 0;  
}  

h1 {  
   color: blue;  
   text-apgn: center;  
   padding: 20px;  
   text-shadow: 0px 0px 10px #fffff;  
}  

img {  
   width:100vw;  
   height:100vh;  
}  

.wrapParallax {
   perspective: 100px;  
   height: 100vh;  
   overflow-x: hidden;  
   overflow-y: auto;  
}  

.parallax {  
   position: absolute;  
   top: 0;  
   bottom: 0;  
   right: 0;  
   left: 0;  
}  

.parallax_one {  
   transform: translateZ(-100px) scale(2)  
}  

.parallax_two {  
   z-index: 10;  
   transform: translateZ(-200px) scale(3)  
}  

.parallax_three {  
   margin-top: 100vh;  
}

Analysis of Code

We have fixed the position of first layer in pne 26 by using position:absolute property. The positions are also hard-coded to 0.

In parallax_two, which is the layer with heading, we have appped z-index: 10 to provide a floating effect to the heading. The layer parallax_three is moved to the bottom by providing a margin-top property.

Thus, we can raise the level of complexity in our Parallax effect.

Observe the effect as shown in below figure.

CSS Techniques

Absolute Position Method

Single Background Method

Analysis of Code

Multiple Background Method

Pure CSS Parallax

Analysis of Code

友情链接