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

hero2 animation updated

Browse Source
This commit is contained in:
philipcheung
2025-10-25 20:19:33 +08:00
parent 4456427e78
commit 8deb92c0ff
2 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -94,7 +94,7 @@ function Hero1() {
maxW={{ base: "70%", sm: "70%", md: "70%", lg: "70%", xl: "70%" }} maxW={{ base: "70%", sm: "70%", md: "70%", lg: "70%", xl: "70%" }}
bottom={'10px'} bottom={'10px'}
display={{ base: "block", sm: "block", md: "none", lg: "none", xl: "none" }} display={{ base: "block", sm: "block", md: "none", lg: "none", xl: "none" }}
cycleDuration={0.3} cycleDuration={0.5}
intensity={0} intensity={0}
/> />
{/* Desktop arrow - shown on md, lg, xl */} {/* Desktop arrow - shown on md, lg, xl */}
@@ -105,7 +105,7 @@ function Hero1() {
maxW={{ base: "70%", sm: "70%", md: "70%", lg: "70%", xl: "70%" }} maxW={{ base: "70%", sm: "70%", md: "70%", lg: "70%", xl: "70%" }}
bottom={'10px'} bottom={'10px'}
display={{ base: "none", sm: "none", md: "block", lg: "block", xl: "block" }} display={{ base: "none", sm: "none", md: "block", lg: "block", xl: "block" }}
cycleDuration={0.3} cycleDuration={0.5}
intensity={0} intensity={0}
/> />
{/* signs */} {/* signs */}

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

@@ -1,4 +1,8 @@
import { Box, Stack, Image } from '@chakra-ui/react' import { Box, Stack, Image } from '@chakra-ui/react'
import { motion } from 'framer-motion'
const MotionImage = motion.create(Image)
function Hero2() { function Hero2() {
return ( return (
<Box <Box
@@ -20,27 +24,39 @@ function Hero2() {
zIndex={-1} zIndex={-1}
> >
<Image src="/images/new/hero2title.webp" <MotionImage
src="/images/new/hero2title.webp"
position={'absolute'} position={'absolute'}
top={{ base: "10px", sm: "50px", md: "50px", lg: "50px", xl: "50px" }} top={{ base: "10px", sm: "50px", md: "50px", lg: "50px", xl: "50px" }}
w={{ base: "70vw", sm: "60vw", md: "50vw", lg: "35vw", xl: "35vw" }} w={{ base: "70vw", sm: "60vw", md: "50vw", lg: "35vw", xl: "35vw" }}
initial={{ opacity: 0, y: -30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.8, delay: 0.2 }}
/> />
<Image src="/images/new/hero2subtitle.webp" <MotionImage
src="/images/new/hero2subtitle.webp"
position={'absolute'} position={'absolute'}
zIndex={1} zIndex={1}
top={{ base: "30vw", sm: "35vw", md: "24vw", lg: "20vw", xl: "18vw" }} top={{ base: "30vw", sm: "35vw", md: "24vw", lg: "20vw", xl: "18vw" }}
right={{ base: "15vw", sm: "15vw", md: "20vw", lg: "28vw", xl: "30vw" }} right={{ base: "15vw", sm: "15vw", md: "20vw", lg: "28vw", xl: "30vw" }}
w={{ base: "30vw", sm: "30vw", md: "25vw", lg: "18vw", xl: "18vw" }} w={{ base: "30vw", sm: "30vw", md: "25vw", lg: "18vw", xl: "18vw" }}
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.8, delay: 0.5 }}
/> />
<Image src="/images/new/oil.webp" <MotionImage
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: -20, 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 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.8, delay: 0.5 }}
/> />
</Box> </Box>