combile main-app.js into app.js
This commit is contained in:
MCHost
@@ -541,7 +541,6 @@
|
|||||||
|
|
||||||
<script src="js/app.js"></script>
|
<script src="js/app.js"></script>
|
||||||
<script src="js/tutorial.js"></script>
|
<script src="js/tutorial.js"></script>
|
||||||
<script src="js/main_app.js"></script>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@@ -66,6 +66,59 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
const hamburger = document.querySelector('.hamburger');
|
const hamburger = document.querySelector('.hamburger');
|
||||||
const mobileNav = document.querySelector('[data-mobile-nav]');
|
const mobileNav = document.querySelector('[data-mobile-nav]');
|
||||||
const navLinks = mobileNav.querySelectorAll('a');
|
const navLinks = mobileNav.querySelectorAll('a');
|
||||||
|
sections.forEach(section => {
|
||||||
|
section.style.transform = 'translateY(30px)';
|
||||||
|
section.style.opacity = '0';
|
||||||
|
section.style.transition = 'transform 0.7s ease-out, opacity 0.7s ease-out';
|
||||||
|
observer.observe(section);
|
||||||
|
});
|
||||||
|
|
||||||
|
const PARTICLE_POOL_SIZE = 50;
|
||||||
|
const particlePool = [];
|
||||||
|
const activeParticles = new Set();
|
||||||
|
|
||||||
|
function createParticleElement() {
|
||||||
|
const particle = document.createElement('div');
|
||||||
|
particle.classList.add('particle');
|
||||||
|
if (Math.random() > 0.6) particle.classList.add('large');
|
||||||
|
return particle;
|
||||||
|
}
|
||||||
|
|
||||||
|
function initializeParticlePool() {
|
||||||
|
for (let i = 0; i < PARTICLE_POOL_SIZE; i++) {
|
||||||
|
particlePool.push(createParticleElement());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetParticle(particle) {
|
||||||
|
particle.style.left = `${Math.random() * 100}%`;
|
||||||
|
particle.style.top = `${Math.random() * 100}%`;
|
||||||
|
particle.style.animationDelay = `${Math.random() * 8}s`;
|
||||||
|
particle.style.animationDuration = `${8 + Math.random() * 6}s`;
|
||||||
|
particle.classList.remove('fade-out');
|
||||||
|
return particle;
|
||||||
|
}
|
||||||
|
|
||||||
|
function spawnParticle() {
|
||||||
|
if (particlePool.length === 0 || activeParticles.size >= PARTICLE_POOL_SIZE) return;
|
||||||
|
|
||||||
|
const particle = resetParticle(particlePool.pop());
|
||||||
|
if (!particle.parentNode) document.body.appendChild(particle);
|
||||||
|
activeParticles.add(particle);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
particle.classList.add('fade-out');
|
||||||
|
setTimeout(() => {
|
||||||
|
activeParticles.delete(particle);
|
||||||
|
particlePool.push(particle);
|
||||||
|
}, 500);
|
||||||
|
}, 14000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function animate() {
|
||||||
|
if (Math.random() < 0.1) spawnParticle(); // Reduced spawn frequency
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Debounce function to prevent rapid clicks
|
// Debounce function to prevent rapid clicks
|
||||||
|
|||||||
@@ -1,130 +0,0 @@
|
|||||||
const sections = document.querySelectorAll('.section-bg');
|
|
||||||
const observer = new IntersectionObserver((entries) => {
|
|
||||||
entries.forEach((entry, index) => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
entry.target.style.transform = 'translateY(0)';
|
|
||||||
entry.target.style.opacity = '1';
|
|
||||||
entry.target.style.transitionDelay = `${index * 0.1}s`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, { threshold: 0.1 });
|
|
||||||
|
|
||||||
sections.forEach(section => {
|
|
||||||
section.style.transform = 'translateY(30px)';
|
|
||||||
section.style.opacity = '0';
|
|
||||||
section.style.transition = 'transform 0.7s ease-out, opacity 0.7s ease-out';
|
|
||||||
observer.observe(section);
|
|
||||||
});
|
|
||||||
|
|
||||||
const PARTICLE_POOL_SIZE = 50;
|
|
||||||
const particlePool = [];
|
|
||||||
const activeParticles = new Set();
|
|
||||||
|
|
||||||
function createParticleElement() {
|
|
||||||
const particle = document.createElement('div');
|
|
||||||
particle.classList.add('particle');
|
|
||||||
if (Math.random() > 0.6) particle.classList.add('large');
|
|
||||||
return particle;
|
|
||||||
}
|
|
||||||
|
|
||||||
function initializeParticlePool() {
|
|
||||||
for (let i = 0; i < PARTICLE_POOL_SIZE; i++) {
|
|
||||||
particlePool.push(createParticleElement());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetParticle(particle) {
|
|
||||||
particle.style.left = `${Math.random() * 100}%`;
|
|
||||||
particle.style.top = `${Math.random() * 100}%`;
|
|
||||||
particle.style.animationDelay = `${Math.random() * 8}s`;
|
|
||||||
particle.style.animationDuration = `${8 + Math.random() * 6}s`;
|
|
||||||
particle.classList.remove('fade-out');
|
|
||||||
return particle;
|
|
||||||
}
|
|
||||||
|
|
||||||
function spawnParticle() {
|
|
||||||
if (particlePool.length === 0 || activeParticles.size >= PARTICLE_POOL_SIZE) return;
|
|
||||||
|
|
||||||
const particle = resetParticle(particlePool.pop());
|
|
||||||
if (!particle.parentNode) document.body.appendChild(particle);
|
|
||||||
activeParticles.add(particle);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
particle.classList.add('fade-out');
|
|
||||||
setTimeout(() => {
|
|
||||||
activeParticles.delete(particle);
|
|
||||||
particlePool.push(particle);
|
|
||||||
}, 500);
|
|
||||||
}, 14000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function animate() {
|
|
||||||
if (Math.random() < 0.1) spawnParticle(); // Reduced spawn frequency
|
|
||||||
requestAnimationFrame(animate);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize and start
|
|
||||||
setTimeout(() => {
|
|
||||||
initializeParticlePool();
|
|
||||||
animate();
|
|
||||||
}, 500);
|
|
||||||
|
|
||||||
function throttle(fn, wait) {
|
|
||||||
let lastTime = 0;
|
|
||||||
return function (...args) {
|
|
||||||
const now = Date.now();
|
|
||||||
if (now - lastTime >= wait) {
|
|
||||||
fn.apply(this, args);
|
|
||||||
lastTime = now;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const buttons = document.querySelectorAll('.btn-minecraft');
|
|
||||||
buttons.forEach(button => {
|
|
||||||
button.addEventListener('mousemove', (e) => {
|
|
||||||
const rect = button.getBoundingClientRect();
|
|
||||||
const x = e.clientX - rect.left;
|
|
||||||
const y = e.clientY - rect.top;
|
|
||||||
button.style.setProperty('--x', `${x}px`);
|
|
||||||
button.style.setProperty('--y', `${y}px`);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Hamburger Menu Toggle
|
|
||||||
const hamburger = document.querySelector('.hamburger');
|
|
||||||
const mobileNav = document.querySelector('[data-mobile-nav]');
|
|
||||||
const navLinks = mobileNav.querySelectorAll('a');
|
|
||||||
|
|
||||||
// Debounce function to prevent rapid clicks
|
|
||||||
function debounce(fn, wait) {
|
|
||||||
let timeout;
|
|
||||||
return function (...args) {
|
|
||||||
clearTimeout(timeout);
|
|
||||||
timeout = setTimeout(() => fn.apply(this, args), wait);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
hamburger.addEventListener('click', debounce(() => {
|
|
||||||
console.log('Hamburger clicked, toggling menu');
|
|
||||||
mobileNav.classList.toggle('active');
|
|
||||||
hamburger.classList.toggle('active');
|
|
||||||
}, 100));
|
|
||||||
|
|
||||||
navLinks.forEach(link => {
|
|
||||||
link.addEventListener('click', () => {
|
|
||||||
console.log('Nav link clicked, closing menu');
|
|
||||||
mobileNav.classList.remove('active');
|
|
||||||
hamburger.classList.remove('active');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('click', (e) => {
|
|
||||||
if (!mobileNav.contains(e.target) && !hamburger.contains(e.target) && mobileNav.classList.contains('active')) {
|
|
||||||
console.log('Clicked outside, closing menu');
|
|
||||||
mobileNav.classList.remove('active');
|
|
||||||
hamburger.classList.remove('active');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user