import React, { useState, useEffect, useRef } from 'react';
const BottleAnimation = () => {
const [currentFrame, setCurrentFrame] = useState(0);
const containerRef = useRef(null);
const [isVisible, setIsVisible] = useState(false);
// La sequenza delle immagini della bottiglia
const frames = [
{ transform: 'rotateY(0deg) scale(1)', opacity: 1 },
{ transform: 'rotateY(72deg) scale(1.02)', opacity: 0.95 },
{ transform: 'rotateY(144deg) scale(1.04)', opacity: 0.9 },
{ transform: 'rotateY(216deg) scale(1.06)', opacity: 0.85 },
{ transform: 'rotateY(288deg) scale(1.08)', opacity: 0.8 },
{ transform: 'rotateY(360deg) scale(1.1)', opacity: 0.75 }
];
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
setIsVisible(entry.isIntersecting);
},
{
threshold: 0.1
}
);
if (containerRef.current) {
observer.observe(containerRef.current);
}
const handleScroll = () => {
if (!containerRef.current || !isVisible) return;
const rect = containerRef.current.getBoundingClientRect();
const scrollProgress = (window.innerHeight - rect.top) / (window.innerHeight + rect.height);
const frameIndex = Math.min(
Math.floor(scrollProgress * frames.length),
frames.length - 1
);
setCurrentFrame(Math.max(0, frameIndex));
};
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
observer.disconnect();
};
}, [isVisible]);
return (
);
};
export default BottleAnimation;
{/* Logo sulla bottiglia */}
{/* Bottiglia */}