Удалить sk1/src/public/script.js
This commit is contained in:
parent
d28c188b8a
commit
5eaaa12a67
@ -1,169 +0,0 @@
|
||||
// Modern JavaScript for Brabus website
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Elements
|
||||
const header = document.querySelector('header');
|
||||
const cars = document.querySelectorAll('.carousel-item');
|
||||
const indicators = document.querySelectorAll('.indicator');
|
||||
const totalCars = cars.length;
|
||||
const prevBtn = document.getElementById('prev-btn');
|
||||
const nextBtn = document.getElementById('next-btn');
|
||||
|
||||
// Initial state
|
||||
let currentIndex = 0;
|
||||
let isAnimating = false;
|
||||
|
||||
// Header scroll effect
|
||||
function handleHeaderScroll() {
|
||||
if (window.scrollY > 50) {
|
||||
header.style.backgroundColor = 'rgba(29, 29, 31, 0.95)';
|
||||
header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
|
||||
} else {
|
||||
header.style.backgroundColor = 'rgba(29, 29, 31, 0.8)';
|
||||
header.style.boxShadow = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleHeaderScroll);
|
||||
|
||||
// Carousel navigation
|
||||
function showCar(index) {
|
||||
if (isAnimating) return;
|
||||
isAnimating = true;
|
||||
|
||||
// Update carousel position
|
||||
cars.forEach((car, i) => {
|
||||
car.style.transform = `translateX(${(i - index) * 100}%)`;
|
||||
});
|
||||
|
||||
// Update indicators
|
||||
indicators.forEach((indicator, i) => {
|
||||
indicator.classList.toggle('active', i === index);
|
||||
});
|
||||
|
||||
// Reset animation lock after transition finishes
|
||||
setTimeout(() => {
|
||||
isAnimating = false;
|
||||
}, 800); // Match CSS transition time
|
||||
|
||||
currentIndex = index;
|
||||
}
|
||||
|
||||
// Event listeners for buttons
|
||||
prevBtn.addEventListener('click', () => {
|
||||
const newIndex = (currentIndex - 1 + totalCars) % totalCars;
|
||||
showCar(newIndex);
|
||||
});
|
||||
|
||||
nextBtn.addEventListener('click', () => {
|
||||
const newIndex = (currentIndex + 1) % totalCars;
|
||||
showCar(newIndex);
|
||||
});
|
||||
|
||||
// Event listeners for indicators
|
||||
indicators.forEach(indicator => {
|
||||
indicator.addEventListener('click', () => {
|
||||
const index = parseInt(indicator.dataset.index);
|
||||
showCar(index);
|
||||
});
|
||||
});
|
||||
|
||||
// Auto-rotate carousel
|
||||
let carouselInterval = setInterval(() => {
|
||||
showCar((currentIndex + 1) % totalCars);
|
||||
}, 5000);
|
||||
|
||||
// Pause auto-rotation when user interacts with carousel
|
||||
const carouselContainer = document.querySelector('.carousel-container');
|
||||
|
||||
carouselContainer.addEventListener('mouseenter', () => {
|
||||
clearInterval(carouselInterval);
|
||||
});
|
||||
|
||||
carouselContainer.addEventListener('mouseleave', () => {
|
||||
carouselInterval = setInterval(() => {
|
||||
showCar((currentIndex + 1) % totalCars);
|
||||
}, 5000);
|
||||
});
|
||||
|
||||
// Button hover effects
|
||||
const buttons = document.querySelectorAll('.btn-main, .btn-buy');
|
||||
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener('mouseenter', () => {
|
||||
button.style.transform = 'translateY(-2px)';
|
||||
button.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
|
||||
});
|
||||
|
||||
button.addEventListener('mouseleave', () => {
|
||||
button.style.transform = '';
|
||||
button.style.boxShadow = '';
|
||||
});
|
||||
});
|
||||
|
||||
// Smooth scroll for navigation links
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
// Add smooth scroll logic here when sections are added
|
||||
});
|
||||
});
|
||||
|
||||
// Touch support for carousel
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
|
||||
const carousel = document.querySelector('.carousel');
|
||||
|
||||
carousel.addEventListener('touchstart', (e) => {
|
||||
touchStartX = e.changedTouches[0].screenX;
|
||||
}, { passive: true });
|
||||
|
||||
carousel.addEventListener('touchend', (e) => {
|
||||
touchEndX = e.changedTouches[0].screenX;
|
||||
handleSwipe();
|
||||
}, { passive: true });
|
||||
|
||||
function handleSwipe() {
|
||||
const threshold = 50; // Minimum swiping distance
|
||||
|
||||
if (touchStartX - touchEndX > threshold) {
|
||||
// Swipe left -> next
|
||||
showCar((currentIndex + 1) % totalCars);
|
||||
} else if (touchEndX - touchStartX > threshold) {
|
||||
// Swipe right -> prev
|
||||
showCar((currentIndex - 1 + totalCars) % totalCars);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize carousel
|
||||
showCar(currentIndex);
|
||||
handleHeaderScroll(); // Set initial header state
|
||||
|
||||
// Reveal animations on scroll
|
||||
const animatedElements = document.querySelectorAll('.advertisement-item');
|
||||
|
||||
function checkScroll() {
|
||||
animatedElements.forEach(element => {
|
||||
const elementTop = element.getBoundingClientRect().top;
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
if (elementTop < windowHeight - 100) {
|
||||
element.style.opacity = 1;
|
||||
element.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Set initial state for animation
|
||||
animatedElements.forEach(element => {
|
||||
element.style.opacity = 0;
|
||||
element.style.transform = 'translateY(30px)';
|
||||
element.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
|
||||
});
|
||||
|
||||
// Check elements' position on load and scroll
|
||||
window.addEventListener('load', checkScroll);
|
||||
window.addEventListener('scroll', checkScroll);
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user