Close Menu
    JavaScript

    How to create Galaxy Animation using HTML CSS and JS

    Coding StellaBy Updated:No Comments4 Mins Read

    Let’s create a Galaxy Animation using HTML, CSS, and JavaScript. This project will feature a mesmerizing galaxy scene with twinkling stars and smooth motion to give a beautiful space effect.

    We’ll use:

    • HTML to structure the galaxy elements.
    • CSS to style and add glowing star effects.
    • JavaScript to animate the stars and create smooth movement.

    Let’s get started on building the Galaxy Animation. Whether you’re a beginner or an experienced developer, this project is a fun way to learn animations and create a stunning cosmic scene with simple code. 🌌✨

    HTML :

    This HTML code creates a simple webpage that displays a galaxy animation using a <canvas> element. It links an external CSS file (style.css) for styling and a JavaScript module file (script.js) that likely contains the animation logic. The <canvas> tag is where the galaxy animation is drawn.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galaxy Animation | @coding.stella</title>
</head>
<body>
    <canvas class="webgl">
        
    </canvas>
    <script type="module" src="script.js"></script>
</body>
</html>

    CSS :

    This CSS removes all default margins and padding from the page, hides scrollbars (overflow: hidden), and makes the <canvas> (with class .webgl) fill the entire screen by fixing it to the top-left corner. It also removes any outline around the canvas, ensuring the galaxy animation covers the full background smoothly.

    *{
    margin: 0;
    padding: 0;
}

html,
body
{
    overflow: hidden;
}

.webgl
{
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
}

    JavaScript:

    This JavaScript code creates a 3D rotating galaxy animation using the Three.js library. It first sets up a scene, camera, and WebGL renderer on a <canvas>. Then, it generates thousands of glowing points (stars) arranged in spiral branches to form a galaxy using random positions, colors, and blending effects. The generateGalaxy() function handles creating and coloring these stars. The camera slowly orbits around the galaxy using OrbitControls, and the tick() function continuously updates and renders the animation frame by frame, making the galaxy appear alive and rotating smoothly.

    // import './style.css'
import * as THREE from "https://cdn.skypack.dev/three@0.132.2";

import { OrbitControls } from "https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js";


// import { Geometry, TetrahedronGeometry } from 'three'

/**
 * Base
 */
// Debug

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

//galaxy
const parameters = {}
parameters.count = 100000;
parameters.size = 0.01;
parameters.radius = 2.15; 
parameters.branches = 3; 
parameters.spin = 3;
parameters.randomness = 5;
parameters.randomnessPower = 4;
parameters.insideColor = '#ff6030';
parameters.outsideColor = '#0949f0';

let material = null; 
let geometry = null; 
let points = null; 

const generateGalaxy = () => {
    
if(points !== null){
    geometry.dispose();
    material.dispose();
    scene.remove(points);
}
material = new THREE.PointsMaterial({
    size: parameters.size,
    sizeAttenuation: true,
    depthWrite: false,
    blending: THREE.AdditiveBlending,
    vertexColors: true
})

    geometry = new THREE.BufferGeometry();
    const positions = new Float32Array(parameters.count * 3);

    const colors = new Float32Array(parameters.count * 3);
    const colorInside = new THREE.Color(parameters.insideColor);
    const colorOutside = new THREE.Color(parameters.outsideColor);


    for(let i=0; i<parameters.count; i++){
        const i3 = i*3;
        const radius = Math.pow(Math.random()*parameters.randomness, Math.random()*parameters.radius);
        const spinAngle = radius*parameters.spin;
        const branchAngle = ((i%parameters.branches)/parameters.branches)*Math.PI*2;
        

        const negPos = [1,-1];
        const randomX = Math.pow(Math.random(), parameters.randomnessPower)*negPos[Math.floor(Math.random() * negPos.length)];
        const randomY = Math.pow(Math.random(), parameters.randomnessPower)*negPos[Math.floor(Math.random() * negPos.length)];
        const randomZ = Math.pow(Math.random(), parameters.randomnessPower)*negPos[Math.floor(Math.random() * negPos.length)];

        positions[i3] = Math.cos(branchAngle + spinAngle)*(radius) + randomX;
        positions[i3+1] = randomY;
        positions[i3+2] = Math.sin(branchAngle + spinAngle)*(radius) + randomZ;

        const mixedColor = colorInside.clone();
        mixedColor.lerp(colorOutside, Math.random()*radius/parameters.radius);

        colors[i3] = mixedColor.r;
        colors[i3+1] = mixedColor.g;
        colors[i3+2] = mixedColor.b;
        
        
    }
    geometry.setAttribute('position',new THREE.BufferAttribute(positions,3));
    geometry.setAttribute('color',new THREE.BufferAttribute(colors,3));

    points = new THREE.Points(geometry, material);
    scene.add(points);

}
generateGalaxy();

/**
 * Test cube
 */

/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * Camera
 */
// Base camera
const camera = new 
THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 3
camera.position.y = 3
camera.position.z = 3
scene.add(camera)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()

    // Update controls
    controls.update()

    camera.position.x = Math.cos(elapsedTime*0.05);
    camera.position.z = Math.sin(elapsedTime*0.05);
    camera.lookAt(0,0,0);

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

    In conclusion, creating a Galaxy Animation using HTML, CSS, and JavaScript is an exciting and creative project. By combining structure, styling, and animation, we’ve brought the galaxy to life with glowing stars and smooth motion. This project is perfect for improving your animation skills and adding a magical touch to your web designs. 🚀💫

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply