Xtimms/ridebus-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Zakhar Timoshenko
2024-03-20 03:31:17 +03:00
parent c990ea1621
commit c236eee911
5 changed files with 728 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
modules/home/citiesCard/citiesCard.tsx
View File

@@ -36,30 +36,32 @@ function SmallCitiesLine() {
const breakpoint800 = useMediaQuery('(max-width: 800px)');
const cityWidth = breakpoint800 ? 170 : 220;
const swapWidth = cityWidth * 1;
const swapWidth = cityWidth * 2;
useScroll((scrollY, delta, time) => {
const offset = -(scrollY / 6) - (time / 30);
if (rootRef.current) {
rootRef.current.style.transform = `rotate(3deg) translate3D(${offset % swapWidth + cityWidth}px, 0px, 0px)`;
rootRef.current.style.transform = `rotate(3deg) translate3D(${offset % swapWidth + cityWidth * 2}px, 0px, 0px)`;
}
}, {}, [cityWidth]);
const CityPolotsk = router.locale === 'ru' ? CityPolotskSmallRu : CityPolotskSmallEn;
const CityNovopolotsk = router.locale === 'ru' ? CityNovopolotskSmallRu : CityNovopolotskSmallEn;
return (
<div ref={rootRef} className={styles.smallCitiesLine}>
<CityPolotsk />
<CityNovopolotsk />
<CityPolotsk />
<CityNovopolotsk />
<CityPolotsk />
<CityNovopolotsk />
<CityPolotsk />
<CityNovopolotsk />
<CityPolotsk />
<CityPolotsk />
<CityPolotsk />
<CityPolotsk />
<CityPolotsk />
<CityNovopolotsk />
</div>
);
}
@@ -77,22 +79,24 @@ function BigCitiesLine() {
const offset = (scrollY / 6) + (time / 30);
if (rootRef.current) {
rootRef.current.style.transform = `rotate(356deg) translate3D(${offset % swapWidth}px, 0px, 0px)`;
rootRef.current.style.transform = `rotate(356deg) translate3D(${offset % swapWidth * 2}px, 0px, 0px)`;
}
}, {}, [cityWidth]);
const CityPolotsk = router.locale === 'ru' ? CityPolotskSmallRu : CityPolotskSmallEn;
const CityNovopolotsk = router.locale === 'ru' ? CityNovopolotskSmallRu : CityNovopolotskSmallEn;
return (
<div ref={rootRef} className={styles.bigCitiesLine}>
<CityPolotsk />
<CityNovopolotsk />
<CityPolotsk />
<CityNovopolotsk />
<CityPolotsk />
<CityNovopolotsk />
<CityPolotsk />
<CityNovopolotsk />
<CityNovopolotsk />
<CityNovopolotsk />
<CityNovopolotsk />
<CityNovopolotsk />
<CityPolotsk />
<CityNovopolotsk />
</div>
);