added animated welcome page
This commit is contained in:
75
script.js
Normal file
75
script.js
Normal file
@ -0,0 +1,75 @@
|
||||
// Add smooth scroll to buttons
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Add hover effect to buttons
|
||||
const buttons = document.querySelectorAll('.btn');
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-3px)';
|
||||
this.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.2)';
|
||||
});
|
||||
|
||||
button.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0)';
|
||||
this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.1)';
|
||||
});
|
||||
});
|
||||
|
||||
// Add click effect to buttons
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener('mousedown', function() {
|
||||
this.style.transform = 'translateY(1px)';
|
||||
});
|
||||
|
||||
button.addEventListener('mouseup', function() {
|
||||
this.style.transform = 'translateY(-3px)';
|
||||
});
|
||||
});
|
||||
|
||||
// Add floating animation to shapes
|
||||
const shapes = document.querySelectorAll('.shape');
|
||||
shapes.forEach((shape, index) => {
|
||||
// Randomize initial position and animation
|
||||
const randomX = Math.random() * 20 - 10;
|
||||
const randomY = Math.random() * 20 - 10;
|
||||
const randomDuration = 15 + Math.random() * 10;
|
||||
const randomDelay = Math.random() * 5;
|
||||
|
||||
shape.style.transform = `translate(${randomX}px, ${randomY}px)`;
|
||||
shape.style.animation = `float ${randomDuration}s infinite ease-in-out ${randomDelay}s`;
|
||||
});
|
||||
|
||||
// Add parallax effect on mouse move
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
const x = (window.innerWidth / 2 - e.pageX) / 20;
|
||||
const y = (window.innerHeight / 2 - e.pageY) / 20;
|
||||
|
||||
document.querySelector('.welcome-box').style.transform = `translate(${x * 0.2}px, ${y * 0.2}px)`;
|
||||
|
||||
shapes.forEach((shape, index) => {
|
||||
const speed = (index + 1) * 0.5;
|
||||
shape.style.transform = `translate(${x * speed}px, ${y * speed}px)`;
|
||||
});
|
||||
});
|
||||
|
||||
// Add scroll reveal animation
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate');
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1
|
||||
});
|
||||
|
||||
document.querySelectorAll('.welcome-box > *').forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
Reference in New Issue
Block a user