Spaces:
Running
Running
Update scripts.js
Browse files- scripts.js +24 -42
scripts.js
CHANGED
|
@@ -3,15 +3,17 @@ function scrollToContact() {
|
|
| 3 |
document.querySelector('#contact').scrollIntoView({ behavior: 'smooth' });
|
| 4 |
}
|
| 5 |
|
| 6 |
-
// Кастомный курсор
|
| 7 |
const cursor = document.querySelector('.cursor');
|
| 8 |
const follower = document.querySelector('.cursor-follower');
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
}
|
|
|
|
|
|
|
| 15 |
|
| 16 |
// WebGL фон
|
| 17 |
const scene = new THREE.Scene();
|
|
@@ -20,20 +22,21 @@ const renderer = new THREE.WebGLRenderer({ alpha: true });
|
|
| 20 |
renderer.setSize(window.innerWidth, window.innerHeight);
|
| 21 |
document.getElementById('webgl-bg').appendChild(renderer.domElement);
|
| 22 |
|
| 23 |
-
const geometry = new THREE.
|
| 24 |
const material = new THREE.MeshBasicMaterial({
|
| 25 |
-
color:
|
| 26 |
wireframe: true
|
| 27 |
});
|
| 28 |
-
const
|
| 29 |
-
scene.add(
|
| 30 |
|
| 31 |
camera.position.z = 15;
|
| 32 |
|
| 33 |
function animateWebGL() {
|
| 34 |
requestAnimationFrame(animateWebGL);
|
| 35 |
-
|
| 36 |
-
|
|
|
|
| 37 |
renderer.render(scene, camera);
|
| 38 |
}
|
| 39 |
animateWebGL();
|
|
@@ -42,45 +45,24 @@ animateWebGL();
|
|
| 42 |
document.addEventListener('mousemove', (e) => {
|
| 43 |
const parallaxElements = document.querySelectorAll('[data-parallax]');
|
| 44 |
parallaxElements.forEach(el => {
|
| 45 |
-
const speed = 0.
|
| 46 |
const x = (window.innerWidth - e.pageX * speed) / 100;
|
| 47 |
const y = (window.innerHeight - e.pageY * speed) / 100;
|
| 48 |
el.style.transform = `translate(${x}px, ${y}px)`;
|
| 49 |
});
|
| 50 |
});
|
| 51 |
|
| 52 |
-
// Голосовое управление
|
| 53 |
-
const voiceBtn = document.getElementById('voice-btn');
|
| 54 |
-
if ('webkitSpeechRecognition' in window) {
|
| 55 |
-
const recognition = new webkitSpeechRecognition();
|
| 56 |
-
recognition.lang = 'ru-RU';
|
| 57 |
-
recognition.onresult = (event) => {
|
| 58 |
-
const transcript = event.results[0][0].transcript;
|
| 59 |
-
if (transcript.toLowerCase().includes('заказать')) {
|
| 60 |
-
scrollToContact();
|
| 61 |
-
alert('Голосовой заказ активирован! Заполните форму ниже.');
|
| 62 |
-
}
|
| 63 |
-
};
|
| 64 |
-
voiceBtn.addEventListener('click', () => {
|
| 65 |
-
recognition.start();
|
| 66 |
-
voiceBtn.textContent = 'Слушаю...';
|
| 67 |
-
setTimeout(() => voiceBtn.textContent = '🎙️ Голосовой заказ', 3000);
|
| 68 |
-
});
|
| 69 |
-
} else {
|
| 70 |
-
voiceBtn.style.display = 'none';
|
| 71 |
-
}
|
| 72 |
-
|
| 73 |
// Анимация загрузки
|
| 74 |
document.addEventListener('DOMContentLoaded', () => {
|
| 75 |
const elements = [document.querySelector('.cta-button'), ...document.querySelectorAll('.service-card')];
|
| 76 |
-
elements.forEach(el => {
|
| 77 |
el.style.opacity = '0';
|
| 78 |
-
el.style.transform = 'translateY(
|
| 79 |
setTimeout(() => {
|
| 80 |
-
el.style.transition = 'all
|
| 81 |
el.style.opacity = '1';
|
| 82 |
el.style.transform = 'translateY(0)';
|
| 83 |
-
},
|
| 84 |
});
|
| 85 |
});
|
| 86 |
|
|
@@ -102,8 +84,8 @@ document.getElementById('contact-form').addEventListener('submit', (e) => {
|
|
| 102 |
|
| 103 |
// Vanilla Tilt для карточек
|
| 104 |
VanillaTilt.init(document.querySelectorAll('.service-card'), {
|
| 105 |
-
max:
|
| 106 |
-
speed:
|
| 107 |
glare: true,
|
| 108 |
-
'max-glare': 0.
|
| 109 |
});
|
|
|
|
| 3 |
document.querySelector('#contact').scrollIntoView({ behavior: 'smooth' });
|
| 4 |
}
|
| 5 |
|
| 6 |
+
// Кастомный курсор (только для десктопов)
|
| 7 |
const cursor = document.querySelector('.cursor');
|
| 8 |
const follower = document.querySelector('.cursor-follower');
|
| 9 |
+
if (window.innerWidth > 768) {
|
| 10 |
+
document.addEventListener('mousemove', (e) => {
|
| 11 |
+
cursor.style.left = `${e.clientX}px`;
|
| 12 |
+
cursor.style.top = `${e.clientY}px`;
|
| 13 |
+
follower.style.left = `${e.clientX - 20}px`;
|
| 14 |
+
follower.style.top = `${e.clientY - 20}px`;
|
| 15 |
+
});
|
| 16 |
+
}
|
| 17 |
|
| 18 |
// WebGL фон
|
| 19 |
const scene = new THREE.Scene();
|
|
|
|
| 22 |
renderer.setSize(window.innerWidth, window.innerHeight);
|
| 23 |
document.getElementById('webgl-bg').appendChild(renderer.domElement);
|
| 24 |
|
| 25 |
+
const geometry = new THREE.TorusKnotGeometry(5, 1.5, 100, 16);
|
| 26 |
const material = new THREE.MeshBasicMaterial({
|
| 27 |
+
color: 0xff6b6b,
|
| 28 |
wireframe: true
|
| 29 |
});
|
| 30 |
+
const torusKnot = new THREE.Mesh(geometry, material);
|
| 31 |
+
scene.add(torusKnot);
|
| 32 |
|
| 33 |
camera.position.z = 15;
|
| 34 |
|
| 35 |
function animateWebGL() {
|
| 36 |
requestAnimationFrame(animateWebGL);
|
| 37 |
+
torusKnot.rotation.x += 0.015;
|
| 38 |
+
torusKnot.rotation.y += 0.015;
|
| 39 |
+
torusKnot.scale.setScalar(1 + Math.sin(Date.now() * 0.001) * 0.1);
|
| 40 |
renderer.render(scene, camera);
|
| 41 |
}
|
| 42 |
animateWebGL();
|
|
|
|
| 45 |
document.addEventListener('mousemove', (e) => {
|
| 46 |
const parallaxElements = document.querySelectorAll('[data-parallax]');
|
| 47 |
parallaxElements.forEach(el => {
|
| 48 |
+
const speed = 0.07;
|
| 49 |
const x = (window.innerWidth - e.pageX * speed) / 100;
|
| 50 |
const y = (window.innerHeight - e.pageY * speed) / 100;
|
| 51 |
el.style.transform = `translate(${x}px, ${y}px)`;
|
| 52 |
});
|
| 53 |
});
|
| 54 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 55 |
// Анимация загрузки
|
| 56 |
document.addEventListener('DOMContentLoaded', () => {
|
| 57 |
const elements = [document.querySelector('.cta-button'), ...document.querySelectorAll('.service-card')];
|
| 58 |
+
elements.forEach((el, index) => {
|
| 59 |
el.style.opacity = '0';
|
| 60 |
+
el.style.transform = 'translateY(30px)';
|
| 61 |
setTimeout(() => {
|
| 62 |
+
el.style.transition = 'all 1s ease';
|
| 63 |
el.style.opacity = '1';
|
| 64 |
el.style.transform = 'translateY(0)';
|
| 65 |
+
}, 200 + index * 150);
|
| 66 |
});
|
| 67 |
});
|
| 68 |
|
|
|
|
| 84 |
|
| 85 |
// Vanilla Tilt для карточек
|
| 86 |
VanillaTilt.init(document.querySelectorAll('.service-card'), {
|
| 87 |
+
max: 25,
|
| 88 |
+
speed: 400,
|
| 89 |
glare: true,
|
| 90 |
+
'max-glare': 0.4
|
| 91 |
});
|