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

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

@@ -4,16 +4,10 @@ import { useRef } from 'react'
const MotionImage = motion.create(Image)
const MotionFlex = motion.create(Flex)
const MotionBox = motion.create(Box)
import { colors } from '../../colors';
const MotionStack = motion(Stack);
interface InfoData {
id: number
title: string
image: string
titleImage: string
titleImage2: string
description: string
}
const MotionSimpleGrid = motion.create(SimpleGrid);
const MotionText = motion(Text);
import { colors } from '../../colors';
@@ -124,8 +118,11 @@ function Advantages() {
const oilCubesRef = useRef(null);
const isOilCubesInView = useInView(oilCubesRef, { once: true });
const mainRef = useRef(null);
const isMainInView = useInView(mainRef, { once: true });
return (
<Box
<MotionBox
ref={mainRef}
position="relative"
w="100%"
h="auto"
@@ -133,67 +130,94 @@ function Advantages() {
zIndex={3}
overflow="hidden"
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 }}
p={4}
w={{ base: '100%', sm: '95vw', md: '90vw', lg: '80vw', xl: '70vw' }}
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) => (
<Stack
{info.map((item, index) => (
<MotionStack
w={'100%'}
alignItems="center"
key={item.id}>
<Image
key={item.id}
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' }}
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 ? (
<>
<Text
mt={{ base: '-70px', sm: '-70px', md: '-45px', lg: '-75px', xl: '-75px' }}
<MotionText
mt={{ base: '-70px', sm: '-70px', md: '-40px', lg: '-55px', xl: '-55px' }}
className='font-melle font-xbold'
fontWeight={400}
color='white'
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}
</Text>
<Image
mt={{ base: '-15px', sm: '-15px', md: '-15px', lg: '-25px', xl: '-25px' }}
</MotionText>
<MotionImage
mt={{ base: '-15px', sm: '-15px', md: '-15px', lg: '-20px', xl: '-20px' }}
h={{ base: '18vw', sm: '80px', md: '60px', lg: '80px', xl: '80px' }}
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' }}
h={{ base: '18vw', sm: '80px', md: '60px', lg: '80px', xl: '80px' }}
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' }}
className='font-melle font-xbold'
fontWeight={400}
color='white'
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}
</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' }}
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%' }}
className="font-noto-sans font-demi-light"
fontSize={{ base: 'xl', sm: 'xl', md: 'xl', lg: '2xl', xl: '2xl' }}
@@ -201,9 +225,12 @@ function Advantages() {
lineHeight="1.8"
textAlign="left"
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)}
</Text>
</MotionText>
{item.id === 4 ? (
<Box
@@ -215,7 +242,11 @@ function Advantages() {
mt={-4}
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) => (
<MotionStack
key={index}
@@ -247,20 +278,20 @@ function Advantages() {
</Text>
</MotionStack>
))}
</Flex>
</MotionFlex>
</Box>
) : (
<></>
)}
</Stack>
</MotionStack>
))}
</SimpleGrid>
</MotionSimpleGrid>
</Box >
</MotionBox >
)
}

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

@@ -16,7 +16,7 @@ function Hero2() {
<Box
position="relative"
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')"}
bgSize="cover"
backgroundPosition="center"
@@ -52,7 +52,7 @@ function Hero2() {
src="/images/new/oil.webp"
zIndex={0}
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" }}
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}