https://github.com/frolov-andrey2405/scrollvista

https://github.com/frolov-andrey2405/scrollvista

Last synced: about 19 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/frolov-andrey2405/scrollvista
• Owner: Frolov-Andrey2405
• License: gpl-3.0
• Created: 2023-12-05T19:49:19.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2023-12-06T18:23:22.000Z (11 months ago)
• Last Synced: 2023-12-06T22:38:13.453Z (11 months ago)
• Language: CSS
• Size: 77.8 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ScrollVista

ScrollVista is a web project that creates a captivating and immersive scrolling experience. By combining 3D scrolling effects, multimedia elements, and engaging content, ScrollVista offers a unique and visually stunning presentation.

## Detailed description

The project consists of three main files:

1. **index.html:** The HTML file serves as the main structure of the web page. It includes a gallery section with various frames containing multimedia content such as images and videos. The frames are designed to provide an interactive and dynamic experience as the user scrolls through the page.

2. **main.css:** The CSS file defines the styling for the entire project. It includes a reset for margins, paddings, and box-sizing, as well as the definition of variables for consistent styling values. The file also handles the styling of fonts, the overall layout, frames, media elements, and additional styling for text alignment and sound button.

3. **app.js:** The JavaScript file implements the 3D scroll effect for frames. It dynamically adjusts the position and opacity of frames based on the user's scrolling behavior, creating a visually appealing parallax effect. Additionally, the file includes functionality for audio controls, allowing users to toggle the sound on and off with a dedicated sound button.

## Features

- **3D Scroll Effect:** The frames in the gallery respond to the user's scroll, creating a 3D parallax effect that enhances the visual experience.

- **Multimedia Integration:** The project incorporates images and videos within frames, providing a rich and immersive content presentation.

- **Audio Controls:** Users can control the background audio with a dedicated sound button, allowing for a customized audio experience.

- **Responsive Design:** The layout and styling are designed to be responsive, ensuring an optimal viewing experience across different devices.

## Preview

![Preview](/assets/images/Preview.gif)