Skip to content

swanie21/animal-parallax

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Animal Parallax

gif

Parallax scrolling is an effect where the background content (usually an image) is moved at a different speed than the foreground context while scrolling.

Use background properties, viewport height and viewport width to position the background-image

section {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

Use nth-of-type to set a specific background-image to each section

section:nth-of-type(2) {
  background-image: url('../img/bunny.jpg');
}

Click here for more info about parallax scrolling