Skip to content
/ parallax-starry-sky Public

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.

codepen.io/ogerly/pen/yldnvwv
0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

ogerly/parallax-starry-sky

BranchesTags

Repository files navigation

2024-07-1311-19-21-ezgif.com-mute-video.mp4

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.

Installation

  1. Clone the repository:

    git clone https://github.com/yourusername/parallax-starry-sky.git
cd parallax-starry-sky

  2. Open index.html in your browser.

Usage

HTML Structure

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parallax Sternenhimmel</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="controls.css">
</head>
<body>
    <div class="scroll-container" id="scroll-container">
        <div class="parallax-layer" id="layer1">
            <img src="star_bg3.png" alt="Hintergrund 1" class="bg-image">
        </div>
        <div class="parallax-layer" id="layer2">
            <img src="star_bg2.png" alt="Hintergrund 2" class="bg-image">
        </div>
        <div class="parallax-layer" id="layer3">
            <img src="star_bg1.png" alt="Hintergrund 3" class="bg-image">
        </div>
        <div class="interactive-layer" id="interactive-layer">
            <!-- Template Card -->
            <div class="card" id="template-card" style="display: none;">
                <div class="card-content"></div>
            </div>
        </div>
    </div>
    <div class="controls" id="controls">
        <div class="position-info" id="position-info"></div>
        <div class="control-sliders">
            <input type="range" id="horizontal-slider" min="-50" max="50" step="1" value="0">
            <input type="range" id="vertical-slider" min="-50" max="50" step="1" value="0" orient="vertical">
            <div class="zoom-control">
                <button class="zoom-button" data-zoom="0.5">--</button>
                <button class="zoom-button" data-zoom="0.8">-</button>
                <button class="zoom-button" data-zoom="1">o</button>
                <button class="zoom-button" data-zoom="1.3">+</button>
                <button class="zoom-button" data-zoom="1.6">++</button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
    <script src="controls.js"></script>
</body>
</html>

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

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.

About

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.

codepen.io/ogerly/pen/yLdNvWv

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages