feat: update
This commit is contained in:
landaiqing
@@ -6,233 +6,236 @@ import SvgIcon from '@/components/SvgIcon/SvgIcon.tsx'
|
||||
const HomeIndex: React.FC = () => {
|
||||
useEffect(() => {
|
||||
document.body.classList.add('body')
|
||||
if (!CSS.supports('animation-timeline: scroll()')) {
|
||||
// const SPAN = 'max(45vw, 260px)';
|
||||
const CONFIG = [
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45) * -1
|
||||
setTimeout(() => {
|
||||
if (!CSS.supports('animation-timeline: scroll()')) {
|
||||
// const SPAN = 'max(45vw, 260px)';
|
||||
const CONFIG = [
|
||||
{
|
||||
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
|
||||
}
|
||||
return Math.max(320, width * 0.55)
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45)
|
||||
},
|
||||
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: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45)
|
||||
{
|
||||
x: () => {
|
||||
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
|
||||
}
|
||||
return Math.max(220, width * 0.3)
|
||||
{
|
||||
x: () => {
|
||||
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) {
|
||||
width = el.parentNode.scrollWidth
|
||||
}
|
||||
return Math.max(305, width * 0.45)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45) * -1
|
||||
{
|
||||
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) {
|
||||
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
|
||||
}
|
||||
return Math.max(330, width * 0.55)
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45)
|
||||
},
|
||||
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)
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45)
|
||||
},
|
||||
y: -30,
|
||||
r: -5,
|
||||
h: 400,
|
||||
w: (el: any) => {
|
||||
let width = el.parentNode.clientWidth
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
console.info('gsap: ScrollTrigger registered')
|
||||
|
||||
if (width < el.parentNode.scrollWidth) {
|
||||
width = el.parentNode.scrollWidth
|
||||
}
|
||||
return Math.max(305, width * 0.45)
|
||||
},
|
||||
},
|
||||
gsap.set('.hero', { position: 'absolute' })
|
||||
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45) * -1
|
||||
},
|
||||
y: -45,
|
||||
r: -20,
|
||||
h: 525,
|
||||
w: (el: any) => {
|
||||
let width = el.parentNode.clientWidth
|
||||
const cards = document.querySelectorAll('.card')
|
||||
|
||||
if (width < el.parentNode.scrollWidth) {
|
||||
width = el.parentNode.scrollWidth
|
||||
}
|
||||
return Math.max(160, width * 0.3)
|
||||
},
|
||||
},
|
||||
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: {
|
||||
trigger: '.scroller',
|
||||
start: 'top bottom',
|
||||
end: 'top 50%',
|
||||
scrub: true,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45)
|
||||
},
|
||||
y: 10,
|
||||
r: 10,
|
||||
h: 160,
|
||||
w: (el: any) => {
|
||||
let width = el.parentNode.clientWidth
|
||||
gsap.from(
|
||||
[
|
||||
'.card__content',
|
||||
'.card--two .card__column:last-of-type',
|
||||
'.card--three .card__column:last-of-type',
|
||||
'.card--five .card__column:last-of-type',
|
||||
],
|
||||
|
||||
if (width < el.parentNode.scrollWidth) {
|
||||
width = el.parentNode.scrollWidth
|
||||
}
|
||||
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,
|
||||
{
|
||||
y: '-100cqh',
|
||||
scrollTrigger: {
|
||||
trigger: '.scroller',
|
||||
start: 'top bottom',
|
||||
end: 'top 50%',
|
||||
start: 'top 80%',
|
||||
end: 'top top',
|
||||
scrub: true,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
gsap.from(
|
||||
[
|
||||
'.card__content',
|
||||
'.card--two .card__column:last-of-type',
|
||||
'.card--three .card__column:last-of-type',
|
||||
'.card--five .card__column:last-of-type',
|
||||
],
|
||||
gsap.from(['.card__avatar img', '.password svg'], {
|
||||
opacity: 0,
|
||||
scrollTrigger: {
|
||||
trigger: '.scroller',
|
||||
start: 'top 50%',
|
||||
end: 'top top',
|
||||
scrub: true,
|
||||
},
|
||||
})
|
||||
|
||||
{
|
||||
y: '-100cqh',
|
||||
gsap.from(['.card--five .card__dummy', '.card--six .card__dummy'], {
|
||||
width: (el: any) => {
|
||||
let width = el.parentNode.clientWidth
|
||||
|
||||
if (width < el.parentNode.scrollWidth) {
|
||||
width = el.parentNode.scrollWidth
|
||||
}
|
||||
return width * 0.26
|
||||
},
|
||||
scrollTrigger: {
|
||||
trigger: '.scroller',
|
||||
start: 'top 80%',
|
||||
end: 'top top',
|
||||
scrub: true,
|
||||
},
|
||||
},
|
||||
)
|
||||
})
|
||||
|
||||
gsap.from(['.card__avatar img', '.password svg'], {
|
||||
opacity: 0,
|
||||
scrollTrigger: {
|
||||
trigger: '.scroller',
|
||||
start: 'top 50%',
|
||||
end: 'top top',
|
||||
scrub: true,
|
||||
},
|
||||
})
|
||||
gsap.from(['.card--one .card__avatar', '.card--four .card__avatar'], {
|
||||
scale: 2,
|
||||
scrollTrigger: {
|
||||
trigger: '.scroller',
|
||||
start: 'top bottom',
|
||||
end: 'top top',
|
||||
scrub: true,
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from(['.card--five .card__dummy', '.card--six .card__dummy'], {
|
||||
width: (el: any) => {
|
||||
let width = el.parentNode.clientWidth
|
||||
gsap.from('.card--two .card__avatar', {
|
||||
width: (el: any) => {
|
||||
let width = el.parentNode.clientWidth
|
||||
|
||||
if (width < el.parentNode.scrollWidth) {
|
||||
width = el.parentNode.scrollWidth
|
||||
}
|
||||
return width * 0.26
|
||||
},
|
||||
scrollTrigger: {
|
||||
trigger: '.scroller',
|
||||
start: 'top 80%',
|
||||
end: 'top top',
|
||||
scrub: true,
|
||||
},
|
||||
})
|
||||
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--one .card__avatar', '.card--four .card__avatar'], {
|
||||
scale: 2,
|
||||
scrollTrigger: {
|
||||
trigger: '.scroller',
|
||||
start: 'top bottom',
|
||||
end: 'top top',
|
||||
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('.card--two .card__avatar', {
|
||||
width: (el: any) => {
|
||||
let width = el.parentNode.clientWidth
|
||||
gsap.from('.cta', {
|
||||
scale: 1,
|
||||
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 () => {
|
||||
document.body.classList.remove('body')
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user