fix: 解决首页报错offsetWidth undefined
This commit is contained in:
landaiqing
@@ -4,193 +4,197 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
|||||||
import './index.less'
|
import './index.less'
|
||||||
import SvgIcon from '@/components/SvgIcon/SvgIcon.tsx'
|
import SvgIcon from '@/components/SvgIcon/SvgIcon.tsx'
|
||||||
const HomeIndex: React.FC = () => {
|
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(() => {
|
useEffect(() => {
|
||||||
document.body.classList.add('body')
|
document.body.classList.add('body')
|
||||||
if (!CSS.supports('animation-timeline: scroll()')) {
|
window.addEventListener('resize', animationFunction);
|
||||||
// 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,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return () => {
|
return () => {
|
||||||
document.body.classList.remove('body')
|
document.body.classList.remove('body')
|
||||||
|
window.removeEventListener('resize', animationFunction);
|
||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
return (
|
return (
|
||||||
|
|||||||
Reference in New Issue
Block a user