https://crocos.kz/assets/crocos2024/scripts/script.js

1const cursor = document.getElementById('cursor')
2const field = document.querySelector('body')
3const items = document.querySelectorAll('a, [data-modal]')
4const showreels = document.querySelectorAll('.hero_video, .billboard__video, .app_box')
5
6function setInitialCursor() {
7	cursor.innerHTML = `
8		<svg width="40" height="45" viewBox="0 0 40 45" fill="none" xmlns="http://www.w3.org/2000/svg">
9			<path d="M17.6728 0.00600067L0 10.2093V30.5844L2.68473 29.0306V13.3037L16.2057 21.1099L17.6551 18.847L4.03216 10.9812L17.6728 3.10606V0.00600067ZM2.19442 34.3188L19.7822 44.4732L37.3526 34.329L35.019 32.9958V32.989L34.6936 32.7644L21.1246 40.5985V23.3935H18.4401V40.5985L4.8789 32.7691L2.19442 34.3188ZM39.5646 30.5977V10.2093L21.8814 0V3.10006L35.5325 10.9812L21.9261 18.8371L23.2381 21.1797L36.8801 13.3037V29.0455L39.5646 30.5977Z" fill="white"/>
10		</svg>
11	`
12}
13
14// Устанавливаем курсор в текущую позицию мыши при загрузке
15window.addEventListener('load', () => {
16	if (window.innerWidth > 992) {
17		// // Проверяем наличие текущей позиции мыши
18		// document.addEventListener('pointermove', function initialMove(event) {
19		// 	gsap.set(cursor, {
20		// 		x: event.clientX,
21		// 		y: event.clientY,
22		// 	})
23
24		// 	// Убираем временный обработчик после первого движения мыши
25		// 	document.removeEventListener('pointermove', initialMove)
26		// })
27		setInitialCursor()
28	}
29})
30if (window.innerWidth > 992) {
31	field.addEventListener('mousemove', function (val) {
32		// console.log(val)
33		gsap.to(cursor, {
34			// backgroundColor: '#0066FF',
35			// boxShadow: '0 10px 30px #001aff;',
36			x: val.x,
37			y: val.y,
38			duration: 0.5,
39			ease: 'back.out',
40			display: 'flex',
41		})
42	})
43}
44
45items.forEach(function (item) {
46	item.addEventListener('mouseover', function () {
47		cursor.innerHTML = `<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
48		<path d="M14.43 6.09021L20.5 12.1602L14.43 18.2302M11.01 12.1602H20.33M3.5 12.1602H6.97" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
49		</svg>`
50		gsap.to(cursor, {
51			// x: 10,
52			// y: 10,
53			scale: 1.5,
54			duration: 0.3,
55		})
56	})
57})
58
59items.forEach(function (item) {
60	item.addEventListener('mouseleave', function () {
61		setInitialCursor()
62		gsap.to(cursor, {
63			// x: 0,
64			// y: 0,
65			scale: 1,
66			duration: 0.3,
67		})
68	})
69})
70
71showreels.forEach(function (showreel) {
72	showreel.addEventListener('mouseover', function () {
73		cursor.innerHTML = `Видео наших работ`
74		gsap.to(cursor, {
75			// x: 10,
76			// y: 10,
77			scale: 1.5,
78			duration: 0.3,
79			width: '130px',
80			height: '130px',
81		})
82	})
83})
84showreels.forEach(function (showreel) {
85	showreel.addEventListener('mouseleave', function () {
86		setInitialCursor()
87		gsap.to(cursor, {
88			// x: 10,
89			// y: 10,
90			scale: 1,
91			duration: 0.3,
92			width: '',
93			height: '',
94		})
95	})
96})
97
98console.log('Hello from index.js')
99
100document.querySelectorAll('.digital_txt').forEach(el => {
101	el.addEventListener('mouseenter', function () {
102		this.style.transition = 'all 0.8s ease'
103		this.style.maxHeight = '100%'
104		this.querySelector('.blur-overlay').style.transition = 'all 0.8s ease'
105		this.querySelector('.blur-overlay').style.background = '#0066ff'
106		this.querySelector('.blur-overlay').style.height = '100%'
107		this.querySelector('p').style.transition = 'background 0.8s ease'
108		// this.querySelector('p').style.maxHeight = '100%'
109		this.querySelector('p').style.color = '#fff'
110		this.querySelector('p').style.background = 'none'
111		this.querySelector('p').style.webkitBackgroundClip = 'unset'
112		this.querySelector('p').style.webkitTextFillColor = 'unset'
113	})
114})
115
116document.querySelectorAll('.digital_txt').forEach(el => {
117	el.addEventListener('mouseleave', function () {
118		this.style.transition = 'all 0.8s ease'
119		this.style.maxHeight = '379px'
120		this.querySelector('.blur-overlay').style.transition = 'all 0.8s ease'
121		this.querySelector('.blur-overlay').style.height = '379px'
122		this.querySelector('.blur-overlay').style.background =
123			'linear-gradient(180deg, rgba(0, 102, 255, 0.8) 90%, rgba(0, 102, 255, 0

123) 100%)'
124		this.querySelector('p').style.transition = 'background 0.8s ease'
125		// this.querySelector('p').style.maxHeight = '379px'
126		this.querySelector('p').style.color = 'unset'
127		this.querySelector('p').style.background =
128			'linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 68.57%)'
129		this.querySelector('p').style.webkitBackgroundClip = 'text'
130		this.querySelector('p').style.webkitTextFillColor = 'transparent'
131	})
132})
133
134document.addEventListener('DOMContentLoaded', event => {
135	gsap.registerPlugin(ScrollTrigger)
136
137	gsap.to('.letters .cube2', {
138		scrollTrigger: {
139			trigger: '.letters .cube2',
140			start: 'top 60%',
141			end: 'bottom top',
142		},
143		y: -1000,
144		opacity: 0,
145		duration: 2,
146		ease: 'power1.out',
147	})
148
149	document.querySelectorAll('.history_item, .awards_item').forEach(item => {
150		gsap.from(item, {
151			scrollTrigger: {
152				trigger: item,
153				start: 'top 60%',
154				end: 'bottom top',
155				once: true,
156			},
157			y: 100,
158			opacity: 0,
159			duration: 2,
160			ease: 'power1.out',
161			stagger: 0.5,
162		})
163	})
164})