mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-06-03 15:10:19 +00:00
fix/animation lagging
This commit is contained in:
@@ -1,12 +1,13 @@
|
|||||||
import BLOG from '@/blog.config'
|
import BLOG from '@/blog.config'
|
||||||
import { isBrowser, loadExternalResource } from '@/lib/utils'
|
import { loadExternalResource } from '@/lib/utils'
|
||||||
|
import { useEffect } from 'react'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 自定义引入外部JS 和 CSS
|
* 自定义引入外部JS 和 CSS
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
const ExternalScript = () => {
|
const ExternalScript = () => {
|
||||||
if (isBrowser()) {
|
useEffect(() => {
|
||||||
// 静态导入本地自定义样式
|
// 静态导入本地自定义样式
|
||||||
loadExternalResource(BLOG.FONT_AWESOME, 'css')
|
loadExternalResource(BLOG.FONT_AWESOME, 'css')
|
||||||
loadExternalResource('/css/custom.css', 'css')
|
loadExternalResource('/css/custom.css', 'css')
|
||||||
@@ -25,7 +26,7 @@ const ExternalScript = () => {
|
|||||||
BLOG.FONT_URL?.forEach(e => {
|
BLOG.FONT_URL?.forEach(e => {
|
||||||
loadExternalResource(e, 'css')
|
loadExternalResource(e, 'css')
|
||||||
})
|
})
|
||||||
}
|
}, [])
|
||||||
|
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -58,7 +58,7 @@ const MyApp = ({ Component, pageProps }) => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
AOS.init()
|
AOS.init()
|
||||||
smoothscroll.polyfill()
|
smoothscroll.polyfill()
|
||||||
})
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<GlobalContextProvider>
|
<GlobalContextProvider>
|
||||||
|
|||||||
@@ -100,7 +100,7 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
|
|||||||
alt={post.title}
|
alt={post.title}
|
||||||
className="h-full w-full hover:scale-125 transform object-cover duration-500"
|
className="h-full w-full hover:scale-125 transform object-cover duration-500"
|
||||||
/>
|
/>
|
||||||
{/* <Image className='hover:scale-125 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
|
{/* <Image className='hover:scale-125 transform duration-500' src={post?.page_cover} style={{ objectFit: 'cover' }} alt={post.title} fill loading='lazy' /> */}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -23,18 +23,11 @@ const LayoutBase = props => {
|
|||||||
|
|
||||||
const scrollListener = () => {
|
const scrollListener = () => {
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
// const targetRef = document.getElementById('wrapper')
|
|
||||||
// const clientHeight = targetRef?.clientHeight
|
|
||||||
const scrollY = window.pageYOffset
|
const scrollY = window.pageYOffset
|
||||||
// const fullHeight = clientHeight - window.outerHeight
|
|
||||||
// let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
|
|
||||||
// if (per > 100) per = 100
|
|
||||||
const shouldShow = scrollY > 300
|
const shouldShow = scrollY > 300
|
||||||
console.log(scrollY)
|
|
||||||
if (shouldShow !== show) {
|
if (shouldShow !== show) {
|
||||||
switchShow(shouldShow)
|
switchShow(shouldShow)
|
||||||
}
|
}
|
||||||
// changePercent(per)
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user