https://github.com/sans-script/paralax-scrolling
A basic implementation of the parallax effect using HTML and CSS.
https://github.com/sans-script/paralax-scrolling
Last synced: 3 months ago
JSON representation
A basic implementation of the parallax effect using HTML and CSS.
- Host: GitHub
- URL: https://github.com/sans-script/paralax-scrolling
- Owner: sans-script
- Created: 2023-12-21T17:41:34.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-21T20:04:05.000Z (over 2 years ago)
- Last Synced: 2025-03-02T03:35:26.000Z (over 1 year ago)
- Language: HTML
- Homepage:
- Size: 4.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Parallax Effect
## [Link to website](https://sans-script.github.io/paralax-scrolling/)
A simple webpage featuring a parallax effect created using HTML and CSS.
## Table of Contents
- [Description](#description)
- [Preview](#preview)
- [How it Works](#how-it-works)
- [Usage](#usage)
## Description
This project that I learned on this [YouTube tutorial](https://youtu.be/TawH-AqHTXc?si=0WIjvXm_D3hDP45b) demonstrates a basic implementation of the parallax effect using HTML and CSS. The parallax effect is achieved by adjusting the position of different elements on the page in response to the user's scroll.
## Preview
## How it Works
The webpage consists of a background image (`bg.jpg`) and several layers, including a moon (`moon.png`), mountains (`mountain.png`), and a road (`road.png`). The text "Moon Light" is also included in the composition.
The parallax effect is achieved through a simple JavaScript script that adjusts the position of each element based on the user's scroll. As the user scrolls down or up, the elements move at different speeds, creating a visually appealing parallax effect.
## Usage
1. Clone the repository:
```bash
git clone https://github.com/sans-script/paralax-scrolling.git
```
2. Open the `index.html` file in a web browser.
3. Scroll up and down to experience the parallax effect.