truth component added animation
This commit is contained in:
@@ -1,7 +1,13 @@
|
||||
import { Box, HStack, Image, Stack, Text, Link, Flex } from '@chakra-ui/react'
|
||||
import { motion, useInView } from 'framer-motion'
|
||||
import { colors } from '../../colors';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
const MotionBox = motion.create(Box)
|
||||
const MotionStack = motion.create(Stack)
|
||||
const MotionHStack = motion.create(HStack)
|
||||
const MotionText = motion.create(Text)
|
||||
const MotionImage = motion.create(Image)
|
||||
const MotionFlex = motion.create(Flex)
|
||||
const truthItems = [
|
||||
|
||||
{
|
||||
@@ -59,7 +65,9 @@ function Truth() {
|
||||
]
|
||||
|
||||
const fbContainerRef = useRef<HTMLDivElement>(null);
|
||||
const mainRef = useRef<HTMLDivElement>(null);
|
||||
const titleRef = useRef<HTMLDivElement>(null);
|
||||
const isMainInView = useInView(mainRef, { once: true });
|
||||
const isTitleInView = useInView(titleRef, { once: true });
|
||||
|
||||
|
||||
@@ -99,25 +107,33 @@ function Truth() {
|
||||
|
||||
|
||||
return (
|
||||
<Box
|
||||
<MotionBox
|
||||
ref={mainRef}
|
||||
position="relative"
|
||||
w="100%"
|
||||
bgColor="white"
|
||||
zIndex={3}
|
||||
overflow="hidden"
|
||||
justifyItems={'center'}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={isMainInView ? { opacity: 1 } : { opacity: 0 }}
|
||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
>
|
||||
|
||||
<Text
|
||||
<MotionText
|
||||
className='font-melle font-xbold'
|
||||
color='#458B02'
|
||||
mt={{ base: 10, sm: 10, md: 10, lg: 10, xl: 10 }}
|
||||
fontSize={{ base: '2xl', sm: '3xl', md: '5xl', lg: '5xl', xl: '5xl' }}
|
||||
textAlign={'center'}>
|
||||
textAlign={'center'}
|
||||
initial={{ opacity: 0, y: -30 }}
|
||||
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: -30 }}
|
||||
transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
|
||||
>
|
||||
想知道更多食用油健康真相？
|
||||
</Text>
|
||||
</MotionText>
|
||||
|
||||
<Stack
|
||||
<MotionStack
|
||||
mt={{ base: 3, sm: -5, md: -5, lg: -5, xl: -5 }}
|
||||
columns={{ base: 1, sm: 1, md: 2 }}
|
||||
p={{ base: 5, sm: 12, md: 20 }}
|
||||
@@ -126,98 +142,132 @@ function Truth() {
|
||||
gap={{ base: 7, md: 7 }}
|
||||
justifyItems={'center'}
|
||||
alignItems={'flex-start'}
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
|
||||
transition={{ duration: 0.8, delay: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
{truthItems.map((item) => (
|
||||
<HStack
|
||||
{truthItems.map((item, index) => (
|
||||
<MotionHStack
|
||||
key={item.id}
|
||||
gap={{ base: 4, md: 5 }}
|
||||
justifyItems={'flex-start'}
|
||||
alignItems={'flex-start'}>
|
||||
<Image
|
||||
alignItems={'flex-start'}
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
|
||||
transition={{ duration: 0.5, delay: 0.6 + index * 0.1, ease: "easeOut" }}
|
||||
>
|
||||
<MotionImage
|
||||
src={item.image}
|
||||
alt={`truth item ${item.id}`}
|
||||
w={{ base: '70px', sm: '70px', md: '70px', lg: '70px', xl: '70px' }}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
||||
transition={{ duration: 0.4, delay: 0.8 + index * 0.1, ease: "easeOut" }}
|
||||
/>
|
||||
<Text
|
||||
<MotionText
|
||||
className="font-noto-sans font-regular"
|
||||
color='#458B02'
|
||||
fontSize={{ base: 'lg', sm: 'lg', md: 'lg', lg: 'lg', xl: 'lg' }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||
transition={{ duration: 0.5, delay: 1.0 + index * 0.1, ease: "easeOut" }}
|
||||
>
|
||||
{renderDescription(item.desc)}
|
||||
</Text>
|
||||
</MotionText>
|
||||
|
||||
</HStack>
|
||||
</MotionHStack>
|
||||
|
||||
))}
|
||||
</Stack>
|
||||
</MotionStack>
|
||||
<motion.div
|
||||
ref={titleRef}
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
|
||||
transition={{ duration: 0.7 }}
|
||||
>
|
||||
<Stack
|
||||
<MotionStack
|
||||
w='100%'
|
||||
justify={'center'}
|
||||
align={'center'}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
|
||||
transition={{ duration: 0.5, delay: 0.3, ease: "easeOut" }}
|
||||
>
|
||||
<Text
|
||||
<MotionText
|
||||
className='font-melle font-xbold'
|
||||
color={"#458B02"}
|
||||
fontSize={{ base: '2xl', sm: '3xl', md: '5xl', lg: '5xl', xl: '5xl' }}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={isTitleInView ? { opacity: 1 } : { opacity: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.6, ease: "easeOut" }}
|
||||
>
|
||||
點擊以下銷售點連結
|
||||
</Text>
|
||||
</Stack>
|
||||
</MotionText>
|
||||
</MotionStack>
|
||||
</motion.div>
|
||||
|
||||
<Flex
|
||||
<MotionFlex
|
||||
gap={12}
|
||||
direction={{ base: 'column', sm: 'column', md: 'row' }}
|
||||
justify="center"
|
||||
mt={5}
|
||||
align={'flex-end'}
|
||||
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
||||
transition={{ duration: 0.8, delay: 0.4, ease: "easeOut" }}
|
||||
>
|
||||
{shopImages.map((image, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.2 }}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
|
||||
transition={{ duration: 0.5, delay: 0.8 + index * 0.2, ease: "easeOut" }}
|
||||
>
|
||||
<Stack
|
||||
<MotionStack
|
||||
w='250px'
|
||||
justify={'flex-end'}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||
transition={{ duration: 0.4, delay: 1.0 + index * 0.2, ease: "easeOut" }}
|
||||
>
|
||||
<Link href={image.link}>
|
||||
<Image src={image.image} cursor="pointer" fit={'contain'}
|
||||
loading="lazy" />
|
||||
<MotionImage src={image.image} cursor="pointer" fit={'contain'}
|
||||
loading="lazy"
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
|
||||
transition={{ duration: 0.3, delay: 1.2 + index * 0.2, ease: "easeOut" }}
|
||||
/>
|
||||
</Link>
|
||||
</Stack>
|
||||
</MotionStack>
|
||||
</motion.div>
|
||||
))}
|
||||
</Flex>
|
||||
</MotionFlex>
|
||||
|
||||
|
||||
<Stack
|
||||
<MotionStack
|
||||
my={15}
|
||||
ml={2}
|
||||
mt={10}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={isTitleInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
|
||||
transition={{ duration: 0.6, delay: 1.6, ease: "easeOut" }}
|
||||
>
|
||||
<Link href={"https://www.facebook.com/profile.php?id=100064320806613"}
|
||||
_focus={{ outline: 'none', boxShadow: 'none' }}
|
||||
_active={{ outline: 'none', boxShadow: 'none' }}>
|
||||
<Image
|
||||
<MotionImage
|
||||
src={'/images/facebook.webp'}
|
||||
alt="salespoint"
|
||||
w={"400px"}
|
||||
loading='lazy'
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||
transition={{ duration: 0.5, delay: 1.8, ease: "easeOut" }}
|
||||
/>
|
||||
</Link>
|
||||
</Stack>
|
||||
</MotionStack>
|
||||
|
||||
</Box>
|
||||
</MotionBox>
|
||||
|
||||
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user