107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
import { motion, useScroll, useTransform } from 'framer-motion';
|
||
import Slider from './Slider';
|
||
import { useRef } from 'react';
|
||
function SliderMobile() {
|
||
const sliderMobileRef = useRef(null);
|
||
const { scrollYProgress } = useScroll({
|
||
target: sliderMobileRef,
|
||
offset: ['start start', 'end end'],
|
||
});
|
||
|
||
const opacityFirstSlide = useTransform(
|
||
scrollYProgress,
|
||
[0, 1 / 4, 1 / 2],
|
||
[1, 0, 0]
|
||
);
|
||
const opacitySecondSlide = useTransform(
|
||
scrollYProgress,
|
||
[1 / 4, 1 / 2, 3 / 4],
|
||
[1, 1, 0]
|
||
);
|
||
const opacityThirdSlide = useTransform(
|
||
scrollYProgress,
|
||
[1 / 2, 3 / 4, 1],
|
||
[1, 1, 0]
|
||
);
|
||
const opacityFourthSlide = useTransform(scrollYProgress, [3 / 4, 1], [1, 1]);
|
||
|
||
return (
|
||
<div
|
||
className='min-md:hidden flex flex-col gap-[6.667vw]'
|
||
ref={sliderMobileRef}
|
||
>
|
||
<motion.div
|
||
className='sticky top-[18vw] h-full flex flex-col gap-[6.667vw]'
|
||
style={{ opacity: opacityFirstSlide }}
|
||
>
|
||
<div className='h-[2px] bg-gray-300 w-full'></div>
|
||
<h5
|
||
className={
|
||
'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center р-10'
|
||
}
|
||
>
|
||
Wellness
|
||
</h5>
|
||
<p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw]'>
|
||
Unlock your inner zen in our wellness playground
|
||
</p>
|
||
<Slider categoryName='Wellness' />
|
||
</motion.div>
|
||
<motion.div
|
||
className='sticky h-full top-[18vw] flex flex-col gap-[6.667vw] bg-white'
|
||
style={{ opacity: opacitySecondSlide }}
|
||
>
|
||
<div className='h-[2px] bg-gray-300 w-full'></div>
|
||
<h5
|
||
className={
|
||
'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center'
|
||
}
|
||
>
|
||
Fitness
|
||
</h5>
|
||
<p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw]'>
|
||
Cancel all your membership. Your new home has it all
|
||
</p>
|
||
<Slider categoryName='Fitness' />
|
||
</motion.div>
|
||
<motion.div
|
||
className='sticky h-full top-[18vw] flex flex-col gap-[6.667vw] bg-white'
|
||
style={{ opacity: opacityThirdSlide }}
|
||
>
|
||
<div className='h-[2px] bg-gray-300 w-full'></div>
|
||
<h5
|
||
className={
|
||
'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center'
|
||
}
|
||
>
|
||
Community
|
||
</h5>
|
||
<p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw] h-10'>
|
||
Connect. Engage. Thrive.
|
||
</p>
|
||
<Slider categoryName='Community' />
|
||
</motion.div>
|
||
<motion.div
|
||
className='sticky h-full top-[18vw] flex flex-col gap-[6.667vw] z-1 bg-white'
|
||
style={{ opacity: opacityFourthSlide }}
|
||
>
|
||
<div className='h-[2px] bg-gray-300 w-full'></div>
|
||
<h5
|
||
className={
|
||
'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center'
|
||
}
|
||
>
|
||
Convenience
|
||
</h5>
|
||
<p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw] h-10'>
|
||
Your smart living hub
|
||
</p>
|
||
<Slider categoryName='Convenience' />
|
||
</motion.div>
|
||
<div className='h-[40vw]'></div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default SliderMobile;
|