Удалить 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