help@rskworld.in +91 93305 39277
RSK World
  • Home
  • Development
    • Web Development
    • Mobile Apps
    • Software
    • Games
    • Project
  • Technologies
    • Data Science
    • AI Development
    • Cloud Development
    • Blockchain
    • Cyber Security
    • Dev Tools
    • Testing Tools
  • Blog
  • About
  • Contact

Theme Settings

Color Scheme
Display Options
Font Size
100%
Back to Project
RSK World
ganesh-chaturthi
/
assets
RSK World
ganesh-chaturthi
Ganesh Chaturthi Celebration - HTML5 Canvas + 3D Aarti + Modern UI + Glassmorphism Design
assets
  • flower_particle.jpg650.8 KB
  • ganesha_hero.jpg1 MB
  • ganesha_layer.jpg710.9 KB
  • kailash_bg.jpg986.2 KB
  • modak_layer.jpg550.1 KB
  • mouse_layer.jpg659.7 KB
  • unified_bg.jpg1.1 MB
script.js
script.js
Raw Download
Find: Go to:
// Next Ganesh Chaturthi Date (approximate for demonstration)
const chaturthiDate = new Date('September 14, 2026 00:00:00').getTime();

// Countdown Timer
function updateCountdown() {
    const now = new Date().getTime();
    const distance = chaturthiDate - now;

    if (distance < 0) {
        document.getElementById('countdown').innerHTML = "<h2>Happy Ganesh Chaturthi!</h2>";
        return;
    }

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById('days').innerText = String(days).padStart(2, '0');
    document.getElementById('hours').innerText = String(hours).padStart(2, '0');
    document.getElementById('minutes').innerText = String(minutes).padStart(2, '0');
    document.getElementById('seconds').innerText = String(seconds).padStart(2, '0');
}

setInterval(updateCountdown, 1000);
updateCountdown();

// Copy Wish Function
function copyWish(elementId) {
    const textToCopy = document.getElementById(elementId).innerText;
    
    navigator.clipboard.writeText(textToCopy).then(() => {
        // Find the button that was clicked and temporarily change its text
        const btns = document.querySelectorAll('.copy-btn');
        btns.forEach(btn => {
            if (btn.getAttribute('onclick') === `copyWish('${elementId}')`) {
                const originalText = btn.innerText;
                btn.innerText = "Copied!";
                btn.style.backgroundColor = 'var(--primary-color)';
                btn.style.color = '#fff';
                
                setTimeout(() => {
                    btn.innerText = originalText;
                    btn.style.backgroundColor = 'transparent';
                    btn.style.color = 'var(--primary-color)';
                }, 2000);
            }
        });
    }).catch(err => {
        console.error('Failed to copy text: ', err);
    });
}

// --- Three.js Realistic 3D Background ---
const container = document.getElementById('three-container');

// Scene Setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x050403);
scene.fog = new THREE.FogExp2(0x050403, 0.015);

// Camera Setup
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Renderer Setup
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);

// Handle Resize
window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
});

// Texture Loader
const textureLoader = new THREE.TextureLoader();

// Unified Photorealistic Background
const bgTexture = textureLoader.load('assets/unified_bg.jpg');
const bgMaterial = new THREE.MeshBasicMaterial({ 
    map: bgTexture, 
    transparent: true,
    depthWrite: false
});
// Make the plane large enough to cover the screen and allow for parallax
const bgPlane = new THREE.Mesh(new THREE.PlaneGeometry(28, 28), bgMaterial);
bgPlane.position.z = -5; // Behind the UI
scene.add(bgPlane);

// Lighting 
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); 
scene.add(ambientLight);

const pointLight = new THREE.PointLight(0xff8c00, 1.5, 30); 
pointLight.position.set(0, 0, 3);
scene.add(pointLight);

// Real Flower Particles System
const particlesGeometry = new THREE.BufferGeometry();
const particlesCount = 0; 
const posArray = new Float32Array(particlesCount * 3);
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));

const flowerTexture = textureLoader.load('assets/flower_particle.jpg');
const particleMaterial = new THREE.PointsMaterial({
    size: 1.0, // Larger size for detailed flower
    map: flowerTexture,
    transparent: true,
    opacity: 0.9,
    blending: THREE.AdditiveBlending,
    depthWrite: false
});

let particlesMesh = new THREE.Points(particlesGeometry, particleMaterial);
scene.add(particlesMesh);

let fallingParticles = [];

// Interactions
document.getElementById('ring-bell-btn').addEventListener('click', () => {
    const originalIntensity = pointLight.intensity;
    pointLight.intensity = 15;
    
    // Subtle background zoom
    bgPlane.scale.set(1.02, 1.02, 1.02);

    setTimeout(() => {
        pointLight.intensity = originalIntensity;
        bgPlane.scale.set(1, 1, 1);
    }, 200);
});

document.getElementById('shower-flowers-btn').addEventListener('click', () => {
    for(let i=0; i<80; i++) {
        fallingParticles.push({
            x: (Math.random() - 0.5) * 20,
            y: 8 + Math.random() * 8,
            z: (Math.random() - 0.5) * 5 + 2, // Bring flowers closer to camera
            vy: -0.03 - Math.random() * 0.04,
            vx: (Math.random() - 0.5) * 0.02
        });
    }
});

// Mouse & Scroll Parallax Effect
let mouseX = 0;
let mouseY = 0;
let scrollY = window.scrollY;

window.addEventListener('mousemove', (event) => {
    mouseX = (event.clientX / window.innerWidth) * 2 - 1;
    mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
});

window.addEventListener('scroll', () => {
    scrollY = window.scrollY;
});

// Animation Loop
const clock = new THREE.Clock();

function animate() {
    requestAnimationFrame(animate);
    const elapsedTime = clock.getElapsedTime();

    const scrollOffset = scrollY * 0.005;

    // Subtle, elegant background parallax
    bgPlane.position.x = mouseX * 0.2;
    bgPlane.position.y = mouseY * 0.2 + scrollOffset * 0.5;
    
    // Camera Parallax (Overall scene movement)
    camera.position.x += (mouseX * 0.5 - camera.position.x) * 0.05;
    camera.position.y += (mouseY * 0.5 - camera.position.y - scrollOffset * 0.2) * 0.05;
    camera.lookAt(scene.position);

    // Update Particles
    if (fallingParticles.length > 0) {
        const currentPositions = new Float32Array(fallingParticles.length * 3);
        
        for(let i = fallingParticles.length - 1; i >= 0; i--) {
            let p = fallingParticles[i];
            p.y += p.vy;
            p.x += p.vx;
            
            if(p.y < -10) {
                fallingParticles.splice(i, 1);
                continue;
            }
            
            currentPositions[i*3] = p.x;
            currentPositions[i*3+1] = p.y;
            currentPositions[i*3+2] = p.z;
        }
        
        particlesMesh.geometry.setAttribute('position', new THREE.BufferAttribute(currentPositions, 3));
    } else {
        particlesMesh.geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(0), 3));
    }

    pointLight.intensity = 1.5 + Math.sin(elapsedTime * 10) * 0.2;

    renderer.render(scene, camera);
}
animate();
210 lines•6.9 KB
javascript
🚀 Support RSK World

Subscribe to our YouTube channel for latest tutorials & updates!



Click subscribe & support our work ❤️

About RSK World

Founded by Molla Samser, with Designer & Tester Rima Khatun, RSK World is your one-stop destination for free programming resources, source code, and development tools.

Founder: Molla Samser
Designer & Tester: Rima Khatun

Development

  • Game Development
  • Web Development
  • Mobile Development
  • AI Development
  • Development Tools

Legal

  • Terms & Conditions
  • Privacy Policy
  • Disclaimer

Contact Info

Nutanhat, Mongolkote
Purba Burdwan, West Bengal
India, 713147

+91 93305 39277

hello@rskworld.in
support@rskworld.in

© 2026 RSK World. All rights reserved.

Content used for educational purposes only. View Disclaimer