Update script.js

script.js

@@ -36,32 +36,40 @@ function animateCosmo() {
 animateCosmo();
 
 // Управление продуктом (ПК: мышь, мобильные: сенсор)
-const product = document.getElementById('cosmo-product');
+const cream = document.getElementById('main-cream');
 if ('ontouchstart' in window) {
     let touchStartX = 0, touchStartY = 0;
-    product.addEventListener('touchstart', (e) => {
+    cream.addEventListener('touchstart', (e) => {
         touchStartX = e.touches[0].clientX;
         touchStartY = e.touches[0].clientY;
     });
-    product.addEventListener('touchmove', (e) => {
+    cream.addEventListener('touchmove', (e) => {
         const deltaX = (e.touches[0].clientX - touchStartX) / 8;
         const deltaY = (e.touches[0].clientY - touchStartY) / 8;
-        product.style.transform = `perspective(3000px) rotateY(${deltaX}deg) rotateX(${-deltaY}deg)`;
+        cream.style.transform = `perspective(3000px) rotateY(${deltaX}deg) rotateX(${-deltaY}deg)`;
     });
-    product.addEventListener('touchend', () => {
-        product.style.transform = 'perspective(3000px) rotateY(0deg) rotateX(0deg)';
+    cream.addEventListener('touchend', () => {
+        cream.style.transform = 'perspective(3000px) rotateY(0deg) rotateX(0deg)';
+    });
+    cream.addEventListener('touchstart', () => {
+        cream.classList.add('active');
+    });
+    cream.addEventListener('touchend', () => {
+        cream.classList.remove('active');
     });
 } else {
-    document.addEventListener('mousemove', (e) => {
+    cream.addEventListener('mousemove', (e) => {
         const xAxis = (window.innerWidth / 2 - e.pageX) / 8;
         const yAxis = (window.innerHeight / 2 - e.pageY) / 8;
-        product.style.transform = `perspective(3000px) rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
+        cream.style.transform = `perspective(3000px) rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
     });
-    product.addEventListener('mouseenter', () => {
-        product.style.filter = 'brightness(1.5)';
+    cream.addEventListener('mouseenter', () => {
+        cream.style.filter = 'brightness(1.5)';
+        cream.style.transform = 'translateY(-30px) rotateZ(5deg) translateZ(50px)';
     });
-    product.addEventListener('mouseleave', () => {
-        product.style.filter = 'brightness(1)';
+    cream.addEventListener('mouseleave', () => {
+        cream.style.filter = 'brightness(1)';
+        cream.style.transform = 'translateY(0) rotateZ(0deg) translateZ(0)';
     });
 }