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

wraning section added animation

Browse Source
This commit is contained in:
philipcheung
2025-11-01 20:38:22 +08:00
parent 78e89d9233
commit 72b456516c
3 changed files with 69 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
public/images/new/wraning_bg_mobile.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 51 KiB

92
src/components/new_ui/wraning.tsx
View File

@@ -1,5 +1,11 @@
import { Box, Stack, Text, Image } from '@chakra-ui/react' import { Box, Stack, Text, Image } from '@chakra-ui/react'
import { motion } from 'framer-motion'
import CyclingImage from './CyclingImage' import CyclingImage from './CyclingImage'
const MotionStack = motion.create(Stack)
const MotionText = motion.create(Text)
const MotionImage = motion.create(Image)
function Wraning() { function Wraning() {
const bigWarningSize = { base: "15vw", sm: "15vw", md: "9vw", lg: "7vw", xl: "6vw" }; const bigWarningSize = { base: "15vw", sm: "15vw", md: "9vw", lg: "7vw", xl: "6vw" };
const midWarningSize = { base: "10vw", sm: "10vw", md: "6vw", lg: "4vw", xl: "4vw" }; const midWarningSize = { base: "10vw", sm: "10vw", md: "6vw", lg: "4vw", xl: "4vw" };
@@ -99,8 +105,8 @@ function Wraning() {
<Box <Box
position={'absolute'} position={'absolute'}
w={smallWarningSize} w={smallWarningSize}
left={{ base: '37vw', sm: '37vw', md: '30vw', lg: '37vw', xl: '37vw' }} left={{ base: '7vw', sm: '7vw', md: '30vw', lg: '37vw', xl: '37vw' }}
bottom={{ base: '34vw', sm: '34vw', md: '22vw', lg: '13vw', xl: '13vw' }} bottom={{ base: '65vw', sm: '65vw', md: '22vw', lg: '13vw', xl: '13vw' }}
css={{ css={{
animation: 'floatSlow 3s ease-in-out infinite', animation: 'floatSlow 3s ease-in-out infinite',
animationDelay: '0s' animationDelay: '0s'
@@ -119,8 +125,8 @@ function Wraning() {
<Box <Box
position={'absolute'} position={'absolute'}
w={midWarningSize} w={midWarningSize}
right={{ base: '37vw', sm: '37vw', md: '35vw', lg: '37vw', xl: '37vw' }} right={{ base: '10vw', sm: '10vw', md: '35vw', lg: '37vw', xl: '37vw' }}
bottom={{ base: '34vw', sm: '34vw', md: '17vw', lg: '10vw', xl: '10vw' }} bottom={{ base: '50vw', sm: '50vw', md: '17vw', lg: '10vw', xl: '10vw' }}
css={{ css={{
animation: 'floatSlow 3s ease-in-out infinite', animation: 'floatSlow 3s ease-in-out infinite',
animationDelay: '0s' animationDelay: '0s'
@@ -138,90 +144,130 @@ function Wraning() {
{/* title */} {/* title */}
<Stack <MotionStack
position="absolute" position="absolute"
top={{ base: '55vw', sm: '60vw', md: '35vw', lg: '23vw', xl: '20vw' }} top={{ base: '55vw', sm: '60vw', md: '35vw', lg: '23vw', xl: '20vw' }}
alignItems={'center'} alignItems={'center'}
gap={'1px'} gap={'1px'}
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.8, ease: "easeOut" }}
> >
<Text <MotionText
className="font-melle font-xbold" className="font-melle font-xbold"
fontSize={{ base: '15vw', sm: '15vw', md: '6vw', lg: '5vw', xl: '3.5vw' }} fontSize={{ base: '15vw', sm: '15vw', md: '6vw', lg: '5vw', xl: '3.5vw' }}
color={"#FED407"} color={"#FED407"}
initial={{ opacity: 0, scale: 0.8 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
> >
{'你要注意！'} {'你要注意！'}
</Text> </MotionText>
<Text <MotionText
className="font-melle font-xbold" className="font-melle font-xbold"
fontSize={{ base: '9vw', sm: '9vw', md: '3.5vw', lg: '2vw', xl: '2vw' }} fontSize={{ base: '9vw', sm: '9vw', md: '3.5vw', lg: '2vw', xl: '2vw' }}
color={"#FED407"} color={"#FED407"}
mt={{ base: -5, sm: -7, md: -5, lg: -5, xl: -5 }} mt={{ base: -5, sm: -7, md: -5, lg: -5, xl: -5 }}
mr={{ base: 3, sm: 3, md: 0, lg: 0, xl: 0 }} mr={{ base: 3, sm: 3, md: 0, lg: 0, xl: 0 }}
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
> >
{'身體健康響起警號！'} {'身體健康響起警號！'}
</Text> </MotionText>
<Text <MotionText
className="font-melle font-medium" className="font-melle font-medium"
fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }} fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
color={"white"} color={"white"}
mt={{ base: -2, sm: -5, md: -3, lg: -3, xl: -3 }} mt={{ base: -2, sm: -5, md: -3, lg: -3, xl: -3 }}
mr={4} mr={4}
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, delay: 0.4, ease: "easeOut" }}
> >
{'好多時係同'} {'好多時係同'}
</Text> </MotionText>
<Box display="inline" mt={{ base: -2, sm: -5, md: -3, lg: -3, xl: -3 }} mr={4}> <Box display="inline" mt={{ base: -2, sm: -5, md: -3, lg: -3, xl: -3 }} mr={4}>
<Text <MotionText
className="font-melle font-xbold" className="font-melle font-xbold"
fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }} fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
color={"white"} color={"white"}
display="inline" display="inline"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, delay: 0.5 }}
> >
{'日常飲食習慣'} {'日常飲食習慣'}
</Text> </MotionText>
<Text <MotionText
className="font-melle font-medium" className="font-melle font-medium"
fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }} fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
color={"white"} color={"white"}
display="inline" display="inline"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, delay: 0.6 }}
> >
{'有關！'} {'有關！'}
</Text> </MotionText>
</Box> </Box>
<Text <MotionText
className="font-melle font-medium" className="font-melle font-medium"
fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }} fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
color={"#FED407"} color={"#FED407"}
mt={{ base: 8, sm: 7, md: 5, lg: 5, xl: 5 }} mt={{ base: 8, sm: 7, md: 5, lg: 5, xl: 5 }}
mr={4} mr={4}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, delay: 0.7, ease: "easeOut" }}
> >
{'簡單到喺你屋企'} {'簡單到喺你屋企'}
</Text> </MotionText>
<Image <MotionImage
src="/images/new/wraning_subtitle.webp" src="/images/new/wraning_subtitle.webp"
w={{ base: '90vw', sm: '90vw', md: '34vw', lg: '22vw', xl: '22vw' }} w={{ base: '90vw', sm: '90vw', md: '34vw', lg: '22vw', xl: '22vw' }}
mt={-1} mt={-1}
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, delay: 0.8, ease: "easeOut" }}
/> />
<Text <MotionText
className="font-melle font-medium" className="font-melle font-medium"
fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }} fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
color={"white"} color={"white"}
mt={-3} mt={-3}
mr={4} mr={4}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, delay: 0.9, ease: "easeOut" }}
> >
{'其實已經日積月累'} {'其實已經日積月累'}
</Text> </MotionText>
<Text <MotionText
className="font-melle font-medium" className="font-melle font-medium"
fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }} fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
color={"white"} color={"white"}
mt={-3} mt={-3}
mr={4} mr={4}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, delay: 1.0, ease: "easeOut" }}
> >
{'咁影響緊你！'} {'咁影響緊你！'}
</Text> </MotionText>
</Stack> </MotionStack>
</Box> </Box>
</Stack > </Stack >
</Box > </Box >