mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 15:09:22 +00:00
106 lines
3.3 KiB
JavaScript
106 lines
3.3 KiB
JavaScript
import { useGlobal } from '@/lib/global'
|
||
import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
|
||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||
import { useCallback, useEffect, useState } from 'react'
|
||
import Typed from 'typed.js'
|
||
|
||
/**
|
||
*
|
||
* @returns 头图
|
||
*/
|
||
export default function Header () {
|
||
const [typed, changeType] = useState()
|
||
useEffect(() => {
|
||
if (!typed && window && document.getElementById('typed')) {
|
||
changeType(new Typed('#typed', {
|
||
strings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'],
|
||
typeSpeed: 200,
|
||
backSpeed: 100,
|
||
backDelay: 400,
|
||
showCursor: true,
|
||
smartBackspace: true
|
||
}))
|
||
}
|
||
})
|
||
const { theme } = useGlobal()
|
||
// 监听滚动
|
||
let windowTop = 0
|
||
let autoScroll = false
|
||
|
||
const autoScrollEnd = () => {
|
||
windowTop = window.scrollY
|
||
autoScroll = false
|
||
console.log('滚动结束回调', windowTop)
|
||
}
|
||
const scrollTrigger = useCallback(() => {
|
||
console.log('触发 top', windowTop, 'y', window.scrollY, autoScroll)
|
||
if (window.scrollY > windowTop & window.scrollY < window.innerHeight & !autoScroll) {
|
||
// console.log('滚中间', windowTop, window.scrollY, window.innerHeight)
|
||
autoScroll = true
|
||
scrollTo(window.innerHeight, autoScrollEnd)
|
||
}
|
||
if (window.scrollY < windowTop & window.scrollY < window.innerHeight & !autoScroll) {
|
||
// console.log('滚上', windowTop, window.scrollY, window.innerHeight)
|
||
autoScroll = true
|
||
scrollTo(0, autoScrollEnd)
|
||
}
|
||
windowTop = window.scrollY
|
||
|
||
updateTopNav()
|
||
})
|
||
|
||
const updateTopNav = () => {
|
||
if (theme !== 'dark') {
|
||
const stickyNavElement = document.getElementById('sticky-nav')
|
||
if (window.scrollY < window.innerHeight) {
|
||
stickyNavElement.classList.add('dark')
|
||
} else {
|
||
stickyNavElement.classList.remove('dark')
|
||
}
|
||
}
|
||
}
|
||
|
||
// 监听滚动
|
||
useEffect(() => {
|
||
updateTopNav()
|
||
window.addEventListener('scroll', scrollTrigger)
|
||
return () => {
|
||
window.removeEventListener('scroll', scrollTrigger)
|
||
}
|
||
})
|
||
|
||
return <header className='h-screen w-full'>
|
||
|
||
<div className='absolute z-10 flex h-screen items-center justify-center w-full text-4xl md:text-7xl text-white'>
|
||
<div id="typed" className=' text-center font-serif'></div>
|
||
<div onClick={() => { scrollTo(window.innerHeight, autoScrollEnd) }} className='cursor-pointer w-full text-center text-2xl animate-bounce absolute bottom-10 text-white'><FontAwesomeIcon icon={faArrowDown} /></div>
|
||
</div>
|
||
|
||
<div className='bg-black bg-cover bg-center h-screen md:-mt-14 animate__fadeInRight animate_fadeIn'
|
||
style={{ backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.4), rgba(0, 0, 0, 0.5) ),url("./bg_image.jpg")' }}>
|
||
</div>
|
||
</header>
|
||
}
|
||
|
||
/**
|
||
* Native scrollTo with callback
|
||
* @param offset - offset to scroll to
|
||
* @param callback - callback function
|
||
*/
|
||
function scrollTo (offset, callback) {
|
||
const fixedOffset = offset.toFixed()
|
||
const onScroll = function () {
|
||
if (window.pageYOffset.toFixed() === fixedOffset) {
|
||
window.removeEventListener('scroll', onScroll)
|
||
callback()
|
||
}
|
||
}
|
||
|
||
window.addEventListener('scroll', onScroll)
|
||
onScroll()
|
||
window.scrollTo({
|
||
top: offset,
|
||
behavior: 'smooth'
|
||
})
|
||
}
|