Schisandra-Cloud-Storage/schisandra-cloud-storage-front-react
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update

Browse Source
This commit is contained in:
landaiqing
2024-05-05 16:33:55 +08:00
parent 91f8a0b9d5
commit 78a6b7fe99
1 changed files with 195 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

387
src/components/HomeIndex/index.tsx
View File

@@ -6,233 +6,236 @@ import SvgIcon from '@/components/SvgIcon/SvgIcon.tsx'
const HomeIndex: React.FC = () => { const HomeIndex: React.FC = () => {
useEffect(() => { useEffect(() => {
document.body.classList.add('body') document.body.classList.add('body')
if (!CSS.supports('animation-timeline: scroll()')) { setTimeout(() => {
// const SPAN = 'max(45vw, 260px)'; if (!CSS.supports('animation-timeline: scroll()')) {
const CONFIG = [ // const SPAN = 'max(45vw, 260px)';
{ const CONFIG = [
x: () => { {
return Math.max(260, window.innerWidth * 0.45) * -1 x: () => {
return Math.max(260, window.innerWidth * 0.45) * -1
},
y: -10,
r: -8,
h: 160,
w: (el: any) => {
let width = el.parentNode.clientWidth
if (width < el.parentNode.scrollWidth) {
width = el.parentNode.scrollWidth
}
return Math.max(320, width * 0.55)
},
}, },
y: -10,
r: -8,
h: 160,
w: (el: any) => {
let width = el.parentNode.clientWidth
if (width < el.parentNode.scrollWidth) { {
width = el.parentNode.scrollWidth x: () => {
} return Math.max(260, window.innerWidth * 0.45)
return Math.max(320, width * 0.55) },
y: -50,
r: 15,
h: 360,
w: (el: any) => {
let width = el.parentNode.clientWidth
if (width < el.parentNode.scrollWidth) {
width = el.parentNode.scrollWidth
}
return Math.max(220, width * 0.3)
},
}, },
},
{ {
x: () => { x: () => {
return Math.max(260, window.innerWidth * 0.45) return Math.max(260, window.innerWidth * 0.45) * -1
},
y: -30,
r: 6,
h: 300,
w: (el: any) => {
let width = el.parentNode.clientWidth
if (width < el.parentNode.scrollWidth) {
width = el.parentNode.scrollWidth
}
return Math.max(330, width * 0.55)
},
}, },
y: -50,
r: 15,
h: 360,
w: (el: any) => {
let width = el.parentNode.clientWidth
if (width < el.parentNode.scrollWidth) { {
width = el.parentNode.scrollWidth x: () => {
} return Math.max(260, window.innerWidth * 0.45)
return Math.max(220, width * 0.3) },
y: -30,
r: -5,
h: 400,
w: (el: any) => {
let width = el.parentNode.clientWidth
if (width < el.parentNode.scrollWidth) {
width = el.parentNode.scrollWidth
}
return Math.max(305, width * 0.45)
},
}, },
},
{ {
x: () => { x: () => {
return Math.max(260, window.innerWidth * 0.45) * -1 return Math.max(260, window.innerWidth * 0.45) * -1
},
y: -45,
r: -20,
h: 525,
w: (el: any) => {
let width = el.parentNode.clientWidth
if (width < el.parentNode.scrollWidth) {
width = el.parentNode.scrollWidth
}
return Math.max(160, width * 0.3)
},
}, },
y: -30,
r: 6,
h: 300,
w: (el: any) => {
let width = el.parentNode.clientWidth
if (width < el.parentNode.scrollWidth) { {
width = el.parentNode.scrollWidth x: () => {
} return Math.max(260, window.innerWidth * 0.45)
return Math.max(330, width * 0.55) },
y: 10,
r: 10,
h: 160,
w: (el: any) => {
let width = el.parentNode.clientWidth
if (width < el.parentNode.scrollWidth) {
width = el.parentNode.scrollWidth
}
return Math.max(320, width * 0.55)
},
}, },
}, ]
{ gsap.registerPlugin(ScrollTrigger)
x: () => { console.info('gsap: ScrollTrigger registered')
return Math.max(260, window.innerWidth * 0.45)
},
y: -30,
r: -5,
h: 400,
w: (el: any) => {
let width = el.parentNode.clientWidth
if (width < el.parentNode.scrollWidth) { gsap.set('.hero', { position: 'absolute' })
width = el.parentNode.scrollWidth
}
return Math.max(305, width * 0.45)
},
},
{ const cards = document.querySelectorAll('.card')
x: () => {
return Math.max(260, window.innerWidth * 0.45) * -1
},
y: -45,
r: -20,
h: 525,
w: (el: any) => {
let width = el.parentNode.clientWidth
if (width < el.parentNode.scrollWidth) { for (const [index, card] of [...cards].entries()) {
width = el.parentNode.scrollWidth if (CONFIG[index]) {
} gsap.from(card, {
return Math.max(160, width * 0.3) x: CONFIG[index].x,
}, yPercent: CONFIG[index].y,
}, height: `${CONFIG[index].h}%`,
rotate: CONFIG[index].r,
width: CONFIG[index].w,
scrollTrigger: {
trigger: '.scroller',
start: 'top bottom',
end: 'top 50%',
scrub: true,
},
})
}
}
{ gsap.from(
x: () => { [
return Math.max(260, window.innerWidth * 0.45) '.card__content',
}, '.card--two .card__column:last-of-type',
y: 10, '.card--three .card__column:last-of-type',
r: 10, '.card--five .card__column:last-of-type',
h: 160, ],
w: (el: any) => {
let width = el.parentNode.clientWidth
if (width < el.parentNode.scrollWidth) { {
width = el.parentNode.scrollWidth y: '-100cqh',
}
return Math.max(320, width * 0.55)
},
},
]
gsap.registerPlugin(ScrollTrigger)
console.info('gsap: ScrollTrigger registered')
gsap.set('.hero', { position: 'absolute' })
const cards = document.querySelectorAll('.card')
for (const [index, card] of [...cards].entries()) {
if (CONFIG[index]) {
gsap.from(card, {
x: CONFIG[index].x,
yPercent: CONFIG[index].y,
height: `${CONFIG[index].h}%`,
rotate: CONFIG[index].r,
width: CONFIG[index].w,
scrollTrigger: { scrollTrigger: {
trigger: '.scroller', trigger: '.scroller',
start: 'top bottom', start: 'top 80%',
end: 'top 50%', end: 'top top',
scrub: true, scrub: true,
}, },
}) },
} )
}
gsap.from( gsap.from(['.card__avatar img', '.password svg'], {
[ opacity: 0,
'.card__content', scrollTrigger: {
'.card--two .card__column:last-of-type', trigger: '.scroller',
'.card--three .card__column:last-of-type', start: 'top 50%',
'.card--five .card__column:last-of-type', end: 'top top',
], scrub: true,
},
})
{ gsap.from(['.card--five .card__dummy', '.card--six .card__dummy'], {
y: '-100cqh', width: (el: any) => {
let width = el.parentNode.clientWidth
if (width < el.parentNode.scrollWidth) {
width = el.parentNode.scrollWidth
}
return width * 0.26
},
scrollTrigger: { scrollTrigger: {
trigger: '.scroller', trigger: '.scroller',
start: 'top 80%', start: 'top 80%',
end: 'top top', end: 'top top',
scrub: true, scrub: true,
}, },
}, })
)
gsap.from(['.card__avatar img', '.password svg'], { gsap.from(['.card--one .card__avatar', '.card--four .card__avatar'], {
opacity: 0, scale: 2,
scrollTrigger: { scrollTrigger: {
trigger: '.scroller', trigger: '.scroller',
start: 'top 50%', start: 'top bottom',
end: 'top top', end: 'top top',
scrub: true, scrub: true,
}, },
}) })
gsap.from(['.card--five .card__dummy', '.card--six .card__dummy'], { gsap.from('.card--two .card__avatar', {
width: (el: any) => { width: (el: any) => {
let width = el.parentNode.clientWidth let width = el.parentNode.clientWidth
if (width < el.parentNode.scrollWidth) { if (width < el.parentNode.scrollWidth) {
width = el.parentNode.scrollWidth width = el.parentNode.scrollWidth
} }
return width * 0.26 return Math.max(330, width * 0.55) - 32
}, },
scrollTrigger: { borderRadius: '12px',
trigger: '.scroller', height: 'calc(300cqh - 2rem)',
start: 'top 80%', scrollTrigger: {
end: 'top top', trigger: '.scroller',
scrub: true, start: 'top bottom',
}, end: 'top 20%',
}) scrub: true,
},
})
gsap.from(['.card--one .card__avatar', '.card--four .card__avatar'], { gsap.from('.card--six .card__column:last-of-type .card__company', {
scale: 2, width: 120,
scrollTrigger: { x: '-1rem',
trigger: '.scroller', scrollTrigger: {
start: 'top bottom', trigger: '.scroller',
end: 'top top', start: 'top bottom',
scrub: true, end: 'top 20%',
}, scrub: true,
}) },
})
gsap.from('.card--two .card__avatar', { gsap.from('.cta', {
width: (el: any) => { scale: 1,
let width = el.parentNode.clientWidth scrollTrigger: {
trigger: '.scroller',
start: 'top bottom',
end: 'top 20%',
scrub: true,
},
})
}
}, 1000)
if (width < el.parentNode.scrollWidth) {
width = el.parentNode.scrollWidth
}
return Math.max(330, width * 0.55) - 32
},
borderRadius: '12px',
height: 'calc(300cqh - 2rem)',
scrollTrigger: {
trigger: '.scroller',
start: 'top bottom',
end: 'top 20%',
scrub: true,
},
})
gsap.from('.card--six .card__column:last-of-type .card__company', {
width: 120,
x: '-1rem',
scrollTrigger: {
trigger: '.scroller',
start: 'top bottom',
end: 'top 20%',
scrub: true,
},
})
gsap.from('.cta', {
scale: 1,
scrollTrigger: {
trigger: '.scroller',
start: 'top bottom',
end: 'top 20%',
scrub: true,
},
})
}
return () => { return () => {
document.body.classList.remove('body') document.body.classList.remove('body')
} }