Create Web Parallax Effects

7/3/2019 How To Create a Parallax Scrolling Effect
w3schools.com
  HTML CSS MORE  
How TO - Parallax Scrolling

❮ Previous Next ❯
Learn how to create a "parallax" scrolling effect with CSS.
Parallax
Parallax scrolling is a web site trend where the background content (i.e. an image) is
moved at a different speed than the foreground content while scrolling. Click on the links
below to see the difference between a website with and without parallax scrolling.
Demo with parallax scrolling
Demo without parallax scrolling
Note: Parallax scrolling does not always work on mobile devices/smart phones.
However, you can use media queries to turn off the effect on mobile devices (see last
example on this page).
How To Create a Parallax Scrolling Effect

Use a container element and add a background image to the container with a specific
height. Then use the background-attachment: fixed to create the actual parallax
effect. The other background properties are used to center and scale the image perfectly:
https://www.w3schools.com/howto/howto_css_parallax.asp 1/6
Example with pixels
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set a specific height */

height: 500px;
/* Create the parallax scrolling effect */

background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>


<div class="parallax"></div>
Try it Yourself »
The example above used pixels to set the height of the image. If you want to use percent,
for example 100%, to make the image fit the whole screen, set the height of the parallax
container to 100%. Note: You must also apply height: 100% to both <html> and
<body>:
Example with percent
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */

background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Try it Yourself »
Some mobile devices have a problem with background-attachment: fixed . However,

you can use media queries to turn off the parallax effect for mobile devices:
Example
/* Turn off parallax scrolling for all tablets and phones.

Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
Try it Yourself »
❮ Previous Next ❯
COLOR PICKER
HOW TO
Tabs
Dropdowns
Accordions
Side Navigation
Top Navigation
Modal Boxes
Progress Bars
Parallax
Login Form
HTML Includes
Google Maps
Range Sliders
Tooltips
Slideshow
Filter List
Sort List
SHARE
 

CERTIFICATES
HTML
CSS
JavaScript
SQL
Python
PHP
jQuery
Bootstrap
XML
Read More »
REPORT ERROR
PRINT PAGE
FORUM
ABOUT
Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP 5 Tutorial
PHP 7 Tutorial
jQuery Tutorial
Java Tutorial
Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
jQuery Reference
Angular Reference
Java Reference
Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
jQuery Examples
Java Examples
XML Examples
Web Certificates
HTML Certificate
CSS Certificate
JavaScript Certificate
SQL Certificate
Python Certificate
jQuery Certificate
PHP Certificate
Bootstrap Certificate
XML Certificate
Get Certified »
W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and
basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot
warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of
use, cookie and privacy policy. Copyright 1999-2019 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

Create Web Parallax Effects

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Create Web Parallax Effects

Încărcat de

Drepturi de autor:

Formate disponibile

7/3/2019 How To Create a Parallax Scrolling Effect

  HTML CSS MORE  

How TO - Parallax Scrolling

Learn how to create a "parallax" scrolling effect with CSS.

Demo with parallax scrolling

Demo without parallax scrolling

How To Create a Parallax Scrolling Effect

Example with pixels

/* Set a specific height */

/* Create the parallax scrolling effect */

Example with percent

/* Create the parallax scrolling effect */

Some mobile devices have a problem with background-attachment: fixed . However,

/* Turn off parallax scrolling for all tablets and phones.

S-ar putea să vă placă și