Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ogerly/parallax-starry-sky
A responsive parallax scrolling effect with a starry sky background, including interactive elements and zoom controls. Ideal for demonstrating parallax effects and interactive UI components.
https://github.com/ogerly/parallax-starry-sky
Last synced: about 1 month ago
JSON representation
A responsive parallax scrolling effect with a starry sky background, including interactive elements and zoom controls. Ideal for demonstrating parallax effects and interactive UI components.
- Host: GitHub
- URL: https://github.com/ogerly/parallax-starry-sky
- Owner: ogerly
- Created: 2024-07-13T09:09:03.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-13T09:47:12.000Z (4 months ago)
- Last Synced: 2024-07-14T09:58:23.878Z (4 months ago)
- Language: JavaScript
- Homepage: https://codepen.io/ogerly/pen/yLdNvWv
- Size: 352 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
https://github.com/user-attachments/assets/c7b1e3ad-7f79-4cb0-9b5c-7cd43473cb2c
# Parallax Starry Sky
A responsive parallax scrolling effect with a starry sky background, including interactive elements and zoom controls. This project is ideal for demonstrating parallax effects and interactive UI components.
## Features
- **Parallax Scrolling**: Multi-layered background that moves at different speeds to create a depth effect.
- **Interactive Elements**: Clickable points that display information in a card.
- **Zoom Controls**: Buttons to zoom in and out of the view.
- **Position Controls**: Sliders to move horizontally and vertically.
## Demo
Check out the live demo on [CodePen](https://codepen.io/ogerly/pen/yLdNvWv).
## Installation
1. Clone the repository:
```sh
git clone https://github.com/yourusername/parallax-starry-sky.git
cd parallax-starry-sky
```
2. Open `index.html` in your browser.
## Usage
### HTML Structure
```html
Parallax Sternenhimmel
```
### Technical Explanation of the Parallax Starry Sky Project
#### Overview
The **Parallax Starry Sky Project** is a web application that demonstrates the use of parallax scrolling to create a visually engaging experience. It features multiple layers moving at different speeds to create a sense of depth, interactive elements represented by clickable points that open cards with information, and controls for navigation and zooming.
#### Layers and Parallax Effect
The project uses three background layers, each moving at different speeds to create the parallax effect. This effect is achieved by adjusting the transformation properties of each layer in response to user input.
1. **Layer 1 (Farthest Background)**:
- **Image**: `star_bg3.png`
- **Transformation**: `translate(${translateX * 0.5}px, ${translateY * 0.5}px) scale(${scale})`
- **Speed**: Slowest
- **Depth**: Appears farthest away
2. **Layer 2 (Middle Background)**:
- **Image**: `star_bg2.png`
- **Transformation**: `translate(${translateX * 0.3}px, ${translateY * 0.3}px) scale(${scale})`
- **Speed**: Medium
- **Depth**: Intermediate
3. **Layer 3 (Closest Background)**:
- **Image**: `star_bg1.png`
- **Transformation**: `translate(${translateX * 0.1}px, ${translateY * 0.1}px) scale(${scale})`
- **Speed**: Fastest
- **Depth**: Appears closest
#### Interactive Elements
The project includes 70 clickable points distributed randomly across the interactive layer. Each point represents a chat room and displays a card with more information when clicked.
- **Point Creation**:
- Randomly positioned within the interactive layer.
- Size: 70px diameter.
- Styles: Slight transparency and pulsing animation for every 5th point.
- **Card Display**:
- Each point opens a card displaying the chat room's title and description.
- Card position matches the point's position.
#### Navigation Controls
The project includes three types of navigation controls for user interaction:
1. **Horizontal Slider**:
- Adjusts the horizontal position of the layers.
- Range: -50 to 50 (scaled by a factor of 2).
2. **Vertical Slider**:
- Adjusts the vertical position of the layers.
- Range: -50 to 50 (scaled by a factor of 2).
3. **Zoom Controls**:
- Buttons for different zoom levels (`0.5`, `0.8`, `1`, `1.3`, `1.6`).
- Changes the scale of all layers.
#### Implementation Details
**HTML Structure**:
- Contains the layers, interactive elements, and control elements.
- Utilizes `div` elements for layers and controls, and `img` elements for background images.
**CSS Styles**:
- Styles for the body, layers, points, and controls.
- Keyframes for the pulsing animation of points.
**JavaScript Functionality**:
- Handles user input for dragging, touch movement, and wheel zooming.
- Updates transformations for parallax scrolling and zooming.
- Manages the display of cards when points are clicked.
### Story for Developers
The **Parallax Starry Sky Project** starts with setting up a multi-layered background using images of a starry sky. Each layer is given a different transformation speed to create the illusion of depth as the user navigates horizontally and vertically. Clickable points are then added to the interactive layer, each representing a chat room with detailed information displayed in a card upon interaction.
Navigation is facilitated through sliders for horizontal and vertical movement and buttons for zoom control, allowing users to explore the parallax environment intuitively. The project demonstrates the seamless integration of CSS, HTML, and JavaScript to create an interactive and visually appealing web application.
### Links to Resources
- **GitHub Repository**: [Parallax Starry Sky](https://github.com/ogerly/parallax-starry-sky)
- **Live Demo on CodePen**: [Parallax Starry Sky Demo](https://codepen.io/ogerly/pen/yLdNvWv)
________________
## File List and Explanations
1. index.html
Purpose: The main HTML file that structures the webpage.
Contains the HTML elements for the parallax layers, interactive points, and control sliders/buttons.
2. styles.css
Purpose: Defines the visual styles for the parallax layers, points, and general layout.
Includes styles for the body, parallax layers, background images, points, and cards.
3. controls.css
Purpose: Contains the styles specifically for the control elements.
Includes styles for the control panel, position info, sliders, and zoom buttons.
4. script.js
Purpose: Manages the main functionality of the parallax effect and interactive elements.
Handles the parallax scrolling effect, card display on point click, and updating transformations.
5. controls.js
Purpose: Handles the control elements for navigating and zooming.
Manages the sliders for horizontal and vertical movement, and buttons for zooming in and out.
## Functions:
## Functions List
| Function Name | File | Description |
|------------------------|-------------|-------------------------------------------------------------------------------------------------------|
| `setTransform` | script.js | Updates the transformation properties (scale, translateX, translateY) of the parallax layers and interactive elements. |
| `updatePositionInfo` | script.js | Updates the on-screen display with the current position and zoom level. |
| `document.addEventListener('touchstart', function(e))` | script.js | Captures the starting position for touch events and sets dragging to true. |
| `document.addEventListener('touchmove', function(e))` | script.js | Calculates the change in position during touch events and updates the transformation. |
| `document.addEventListener('touchend', function())` | script.js | Sets dragging to false when the touch ends. |
| `document.addEventListener('mousedown', function(e))` | script.js | Captures the starting position for mouse events and sets dragging to true. |
| `document.addEventListener('mousemove', function(e))` | script.js | Calculates the change in position during mouse events and updates the transformation. |
| `document.addEventListener('mouseup', function())` | script.js | Sets dragging to false when the mouse button is released. |
| `document.addEventListener('mouseleave', function())` | script.js | Sets dragging to false when the mouse leaves the window. |
| `document.addEventListener('wheel', function(e))` | script.js & controls.js | Adjusts the scale property based on the wheel event to zoom in or out. |
| `document.addEventListener('DOMContentLoaded', function())` | script.js | Initializes the points and attaches click event listeners to them for displaying cards. |
| `document.getElementById('horizontal-slider').addEventListener('input', function(e))` | controls.js | Updates the horizontal translation based on the slider input value. |
| `document.getElementById('vertical-slider').addEventListener('input', function(e))` | controls.js | Updates the vertical translation based on the slider input value. |
| `document.querySelectorAll('.zoom-button').forEach(button => button.addEventListener('click', function(e)))` | controls.js | Sets the scale property based on the zoom button clicked. |