Web page fixed background alternation to realize parallax effect

Parallax scrolling effect in recent years is very popular, but the implementation of this function is generally required javascript, and to achieve a certain degree of difficulty. On this issue, we share with you another relatively simple parallax scrolling effect technology, only need CSS can be implemented. Let's take a look.

The scrolling effect is characterized by alternating with the content of the color block using a fixed background, and when the visitor scrolls down, the background is fixed. Learn about the Advanced HTML Tutorials .

As you can see, when the content scrolls up, the first background is fixed and does not scroll up. That is: Fixed background + color block content + Fixed background + color block content ... This alternate way, resulting in a parallax effect.

compatibility

• ie9+
• Firefox
• Chrome
• Safari
• Opera

Using Tutorials

HTML code

The HTML code structure is clear, using the main tag to wrap all the content, where the. CD-FIXED-BG style is a fixed background. cd-scroll-b

Title

Content...

Title

Content...

CSS Styles
Mainly through the CSS background-attachment:fixed positioning properties to make the background fixed, see the following style code:
Body, HTML, main {
/* Important */
height:100%;
}
. CD-FIXED-BG {
min-height:100%;
Background-size:cover;
background-attachment:fixed;
Background-repeat:no-repeat;
Background-position:center Center;
}

. cd-fixed-bg.cd-bg-1 {
Background-image:url (".. /img/cd-background-1.jpg ");
}
. cd-fixed-bg.cd-bg-2 {
Background-image:url (".. /img/cd-background-2.jpg ");

.cd-fixed-bg.cd-bg-3 {
background-image : URL (".. /img/cd-background-3.jpg ");

.cd-fixed-bg.cd-bg-4 {
background-image : URL (".. /img/cd-background-4.jpg ");

.CD-SCROLLING-BG {
min-height:100%;
/span>

All right, this is the end of the fixed background scrolling effect, like you can try it, perhaps in your next Web design project to try to use. For more html/css Tutorials , you can visit e-mentor Web.

Web page fixed background alternation to realize parallax effect