philip-cat/healthy_oil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

advantages added animation

Browse Source
This commit is contained in:
philipcheung
2025-11-02 15:00:14 +08:00
parent 3cdcb28829
commit c4181b48b1
3 changed files with 65 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/new/recipe_button.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

95
src/components/new_ui/advantages.tsx
View File

@@ -4,16 +4,10 @@ import { useRef } from 'react'
const MotionImage = motion.create(Image) const MotionImage = motion.create(Image)
const MotionFlex = motion.create(Flex) const MotionFlex = motion.create(Flex)
const MotionBox = motion.create(Box) const MotionBox = motion.create(Box)
import { colors } from '../../colors';
const MotionStack = motion(Stack); const MotionStack = motion(Stack);
interface InfoData { const MotionSimpleGrid = motion.create(SimpleGrid);
id: number const MotionText = motion(Text);
title: string import { colors } from '../../colors';
image: string
titleImage: string
titleImage2: string
description: string
}
@@ -124,8 +118,11 @@ function Advantages() {
const oilCubesRef = useRef(null); const oilCubesRef = useRef(null);
const isOilCubesInView = useInView(oilCubesRef, { once: true }); const isOilCubesInView = useInView(oilCubesRef, { once: true });
const mainRef = useRef(null);
const isMainInView = useInView(mainRef, { once: true });
return ( return (
<Box <MotionBox
ref={mainRef}
position="relative" position="relative"
w="100%" w="100%"
h="auto" h="auto"
@@ -133,67 +130,94 @@ function Advantages() {
zIndex={3} zIndex={3}
overflow="hidden" overflow="hidden"
justifyItems={'center'} justifyItems={'center'}
initial={{ opacity: 0 }}
animate={isMainInView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
> >
<SimpleGrid <MotionSimpleGrid
columns={{ base: 1, sm: 1, md: 2 }} columns={{ base: 1, sm: 1, md: 2 }}
p={4} p={4}
w={{ base: '100%', sm: '95vw', md: '90vw', lg: '80vw', xl: '70vw' }} w={{ base: '100%', sm: '95vw', md: '90vw', lg: '80vw', xl: '70vw' }}
h={'auto'} h={'auto'}
initial={{ opacity: 0, y: 50 }}
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
> >
{info.map((item) => ( {info.map((item, index) => (
<Stack <MotionStack
w={'100%'} w={'100%'}
alignItems="center" alignItems="center"
key={item.id}> key={item.id}
<Image initial={{ opacity: 0, y: 30 }}
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
transition={{ duration: 0.6, delay: index * 0.15, ease: "easeOut" }}
>
<MotionImage
w={{ base: '45vw', sm: '180px', md: '80px', lg: '110px', xl: '110px' }} w={{ base: '45vw', sm: '180px', md: '80px', lg: '110px', xl: '110px' }}
src={item.image} src={item.image}
initial={{ opacity: 0, scale: 0.8 }}
animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
transition={{ duration: 0.5, delay: index * 0.15 + 0.1, ease: "easeOut" }}
/> />
{item.id === 3 ? ( {item.id === 3 ? (
<> <>
<Text <MotionText
mt={{ base: '-70px', sm: '-70px', md: '-45px', lg: '-75px', xl: '-75px' }} mt={{ base: '-70px', sm: '-70px', md: '-40px', lg: '-55px', xl: '-55px' }}
className='font-melle font-xbold' className='font-melle font-xbold'
fontWeight={400} fontWeight={400}
color='white' color='white'
fontSize={{ base: '9vw', sm: '4xl', md: '3xl', lg: '5xl', xl: '5xl' }} fontSize={{ base: '9vw', sm: '4xl', md: '3xl', lg: '5xl', xl: '5xl' }}
initial={{ opacity: 0, x: -20 }}
animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -20 }}
transition={{ duration: 0.5, delay: index * 0.15 + 0.2, ease: "easeOut" }}
> >
{item.title} {item.title}
</Text> </MotionText>
<Image <MotionImage
mt={{ base: '-15px', sm: '-15px', md: '-15px', lg: '-25px', xl: '-25px' }} mt={{ base: '-15px', sm: '-15px', md: '-15px', lg: '-20px', xl: '-20px' }}
h={{ base: '18vw', sm: '80px', md: '60px', lg: '80px', xl: '80px' }} h={{ base: '18vw', sm: '80px', md: '60px', lg: '80px', xl: '80px' }}
src={item.titleImage2} src={item.titleImage2}
initial={{ opacity: 0, scale: 0.9 }}
animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
transition={{ duration: 0.5, delay: index * 0.15 + 0.3, ease: "easeOut" }}
/> />
</> </>
) : ( ) : (
<> <>
<Image <MotionImage
mt={{ base: '-70px', sm: '-70px', md: '-30px', lg: '-50px', xl: '-50px' }} mt={{ base: '-70px', sm: '-70px', md: '-30px', lg: '-50px', xl: '-50px' }}
h={{ base: '18vw', sm: '80px', md: '60px', lg: '80px', xl: '80px' }} h={{ base: '18vw', sm: '80px', md: '60px', lg: '80px', xl: '80px' }}
src={item.titleImage2} src={item.titleImage2}
initial={{ opacity: 0, scale: 0.9 }}
animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
transition={{ duration: 0.5, delay: index * 0.15 + 0.2, ease: "easeOut" }}
/> />
<Text <MotionText
mt={{ base: '-25px', sm: '-25px', md: '-15px', lg: '-25px', xl: '-25px' }} mt={{ base: '-25px', sm: '-25px', md: '-15px', lg: '-25px', xl: '-25px' }}
className='font-melle font-xbold' className='font-melle font-xbold'
fontWeight={400} fontWeight={400}
color='white' color='white'
fontSize={{ base: '9vw', sm: '4xl', md: '3xl', lg: '5xl', xl: '5xl' }} fontSize={{ base: '9vw', sm: '4xl', md: '3xl', lg: '5xl', xl: '5xl' }}
initial={{ opacity: 0, x: -20 }}
animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -20 }}
transition={{ duration: 0.5, delay: index * 0.15 + 0.3, ease: "easeOut" }}
> >
{item.title} {item.title}
</Text> </MotionText>
</> </>
)} )}
<Image <MotionImage
h={{ base: item.id != 4 ? '50vw' : '70vw', sm: item.id != 4 ? '200px' : '300px', md: item.id != 4 ? '180px' : '280px', lg: item.id != 4 ? '200px' : '300px', xl: item.id != 4 ? '200px' : '300px' }} h={{ base: item.id != 4 ? '50vw' : '70vw', sm: item.id != 4 ? '200px' : '300px', md: item.id != 4 ? '180px' : '280px', lg: item.id != 4 ? '200px' : '300px', xl: item.id != 4 ? '200px' : '300px' }}
src={item.titleImage} src={item.titleImage}
initial={{ opacity: 0, y: 20 }}
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.5, delay: index * 0.15 + 0.4, ease: "easeOut" }}
/> />
<Text <MotionText
w={{ base: '90%', sm: '80%', md: '80%', lg: '80%', xl: '80%' }} w={{ base: '90%', sm: '80%', md: '80%', lg: '80%', xl: '80%' }}
className="font-noto-sans font-demi-light" className="font-noto-sans font-demi-light"
fontSize={{ base: 'xl', sm: 'xl', md: 'xl', lg: '2xl', xl: '2xl' }} fontSize={{ base: 'xl', sm: 'xl', md: 'xl', lg: '2xl', xl: '2xl' }}
@@ -201,9 +225,12 @@ function Advantages() {
lineHeight="1.8" lineHeight="1.8"
textAlign="left" textAlign="left"
whiteSpace="pre-wrap" whiteSpace="pre-wrap"
initial={{ opacity: 0, y: 20 }}
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.5, delay: index * 0.15 + 0.5, ease: "easeOut" }}
> >
{renderDescription(item.description)} {renderDescription(item.description)}
</Text> </MotionText>
{item.id === 4 ? ( {item.id === 4 ? (
<Box <Box
@@ -215,7 +242,11 @@ function Advantages() {
mt={-4} mt={-4}
ml={3} ml={3}
> >
<Flex flexDirection={'column'} justifyContent="center" gap="10px" maxWidth="945px"> <MotionFlex flexDirection={'column'} justifyContent="center" gap="10px" maxWidth="945px"
initial={{ opacity: 0, y: 30 }}
animate={isOilCubesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
>
{oilCube.map((item, index) => ( {oilCube.map((item, index) => (
<MotionStack <MotionStack
key={index} key={index}
@@ -247,20 +278,20 @@ function Advantages() {
</Text> </Text>
</MotionStack> </MotionStack>
))} ))}
</Flex> </MotionFlex>
</Box> </Box>
) : ( ) : (
<></> <></>
)} )}
</Stack> </MotionStack>
))} ))}
</SimpleGrid> </MotionSimpleGrid>
</Box > </MotionBox >
) )
} }

4
src/components/new_ui/hero2.tsx
View File

@@ -16,7 +16,7 @@ function Hero2() {
<Box <Box
position="relative" position="relative"
w="100%" w="100%"
minH={{ base: "115vw", sm: "105vw", md: "90vw", lg: "73vw", xl: "65vw" }} minH={{ base: "115vw", sm: "115vw", md: "90vw", lg: "73vw", xl: "65vw" }}
bgImage={"url('/images/new/hero2bg.webp')"} bgImage={"url('/images/new/hero2bg.webp')"}
bgSize="cover" bgSize="cover"
backgroundPosition="center" backgroundPosition="center"
@@ -52,7 +52,7 @@ function Hero2() {
src="/images/new/oil.webp" src="/images/new/oil.webp"
zIndex={0} zIndex={0}
position={'absolute'} position={'absolute'}
bottom={{ base: -10, sm: -20, md: -20, lg: -20, xl: -20 }} bottom={{ base: -10, sm: -10, md: -20, lg: -20, xl: -20 }}
w={{ base: "80vw", sm: "70vw", md: "60vw", lg: "50vw", xl: "40vw" }} w={{ base: "80vw", sm: "70vw", md: "60vw", lg: "50vw", xl: "40vw" }}
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}