https://github.com/swanie21/animal-parallax
Parallax Example
https://github.com/swanie21/animal-parallax
css3 html5 parallax-scrolling
Last synced: over 1 year ago
JSON representation
Parallax Example
- Host: GitHub
- URL: https://github.com/swanie21/animal-parallax
- Owner: swanie21
- Created: 2017-01-30T18:48:30.000Z (over 9 years ago)
- Default Branch: gh-pages
- Last Pushed: 2017-02-15T18:15:12.000Z (over 9 years ago)
- Last Synced: 2025-01-08T16:06:53.687Z (over 1 year ago)
- Topics: css3, html5, parallax-scrolling
- Language: CSS
- Homepage: http://kirstenswanson.io/animal-parallax/
- Size: 42.8 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Animal Parallax
### 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](https://medium.com/@kswanie21/the-simplicity-of-parallax-82ff7896e43#.1d0ye1dap)