Skip to content

AliJone/Parallax-Effect-Website-HTML-CSS-JS

Repository files navigation

Parallax-Effect-Website-HTML-CSS-JS

Parallax Scrolling Effect Using Vanilla JavaScript

This project demonstrates a stunning Parallax Scrolling Effect on a web page, achieved using Vanilla JavaScript. It features a dynamic night-to-day transition with various elements such as stars, the moon, and mountains moving at different speeds to create an immersive parallax effect.

Features

  • Dynamic Parallax Effect: Elements move at different speeds for a 3D-like experience.
  • Night-to-Day Transition: Seamlessly transitions from a starry night to a sunny day backdrop.
  • Pure JavaScript: No external libraries or frameworks used.

Setup

To view this project:

  1. Clone the repo: git clone https://github.com/AliJone/Parallax-Effect-Website-HTML-CSS-JS.git

  2. Open the index.html file in a web browser.

Usage

Simply scroll down the page to see the parallax effect in action. The movement and opacity of the elements like stars, moon, and mountains change in response to the scroll position.

Technologies Used

  • HTML
  • CSS
  • Vanilla JavaScript

Contributing

Feel free to fork this repository and contribute to it. All contributions are welcome!

Contact

Created by Ali Jone - feel free to contact me!

www.linkedin.com/in/ali-jone-merchant


About

Parallax website night to day transition using vanilla JS

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages