fix: 解决首页报错offsetWidth undefined
This commit is contained in:
landaiqing
@@ -4,193 +4,197 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import './index.less'
|
||||
import SvgIcon from '@/components/SvgIcon/SvgIcon.tsx'
|
||||
const HomeIndex: React.FC = () => {
|
||||
const animationFunction=()=>{
|
||||
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) => {
|
||||
return Math.max(320, el.parentNode.offsetWidth * 0.55)
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45)
|
||||
},
|
||||
y: -50,
|
||||
r: 15,
|
||||
h: 360,
|
||||
w: (el: any) => {
|
||||
return Math.max(220, el.parentNode.offsetWidth * 0.3)
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45) * -1
|
||||
},
|
||||
y: -30,
|
||||
r: 6,
|
||||
h: 300,
|
||||
w: (el: any) => {
|
||||
return Math.max(330, el.parentNode.offsetWidth * 0.55)
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45)
|
||||
},
|
||||
y: -30,
|
||||
r: -5,
|
||||
h: 400,
|
||||
w: (el: any) => {
|
||||
return Math.max(305, el.parentNode.offsetWidth * 0.45)
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45) * -1
|
||||
},
|
||||
y: -45,
|
||||
r: -20,
|
||||
h: 525,
|
||||
w: (el: any) => {
|
||||
return Math.max(160, el.parentNode.offsetWidth * 0.3)
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45)
|
||||
},
|
||||
y: 10,
|
||||
r: 10,
|
||||
h: 160,
|
||||
w: (el: any) => {
|
||||
return Math.max(320, el.parentNode.offsetWidth * 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: {
|
||||
trigger: '.scroller',
|
||||
start: 'top bottom',
|
||||
end: 'top 50%',
|
||||
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',
|
||||
],
|
||||
|
||||
{
|
||||
y: '-100cqh',
|
||||
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--five .card__dummy', '.card--six .card__dummy'], {
|
||||
width: (el: any) => el.parentNode.offsetWidth * 0.26,
|
||||
scrollTrigger: {
|
||||
trigger: '.scroller',
|
||||
start: 'top 80%',
|
||||
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--two .card__avatar', {
|
||||
width: (el: any) => Math.max(330, el.parentNode.offsetWidth * 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,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
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
|
||||
},
|
||||
y: -10,
|
||||
r: -8,
|
||||
h: 160,
|
||||
w: (el: any) => {
|
||||
return Math.max(320, el.parentNode.offsetWidth * 0.55)
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45)
|
||||
},
|
||||
y: -50,
|
||||
r: 15,
|
||||
h: 360,
|
||||
w: (el: any) => {
|
||||
return Math.max(220, el.parentNode.offsetWidth * 0.3)
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45) * -1
|
||||
},
|
||||
y: -30,
|
||||
r: 6,
|
||||
h: 300,
|
||||
w: (el: any) => {
|
||||
return Math.max(330, el.parentNode.offsetWidth * 0.55)
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45)
|
||||
},
|
||||
y: -30,
|
||||
r: -5,
|
||||
h: 400,
|
||||
w: (el: any) => {
|
||||
return Math.max(305, el.parentNode.offsetWidth * 0.45)
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45) * -1
|
||||
},
|
||||
y: -45,
|
||||
r: -20,
|
||||
h: 525,
|
||||
w: (el: any) => {
|
||||
return Math.max(160, el.parentNode.offsetWidth * 0.3)
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
x: () => {
|
||||
return Math.max(260, window.innerWidth * 0.45)
|
||||
},
|
||||
y: 10,
|
||||
r: 10,
|
||||
h: 160,
|
||||
w: (el: any) => {
|
||||
return Math.max(320, el.parentNode.offsetWidth * 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: {
|
||||
trigger: '.scroller',
|
||||
start: 'top bottom',
|
||||
end: 'top 50%',
|
||||
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',
|
||||
],
|
||||
|
||||
{
|
||||
y: '-100cqh',
|
||||
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--five .card__dummy', '.card--six .card__dummy'], {
|
||||
width: (el: any) => el.parentNode.offsetWidth * 0.26,
|
||||
scrollTrigger: {
|
||||
trigger: '.scroller',
|
||||
start: 'top 80%',
|
||||
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--two .card__avatar', {
|
||||
width: (el: any) => Math.max(330, el.parentNode.offsetWidth * 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,
|
||||
},
|
||||
})
|
||||
}
|
||||
window.addEventListener('resize', animationFunction);
|
||||
return () => {
|
||||
document.body.classList.remove('body')
|
||||
window.removeEventListener('resize', animationFunction);
|
||||
}
|
||||
}, [])
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user