d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

build:

Browse Source
This commit is contained in:
tangly1024
2021-12-23 14:13:59 +08:00
parent 50ee25ec15
commit 3673c8c561
1 changed files with 43 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/Header.js
View File

@@ -2,7 +2,6 @@ import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import throttle from 'lodash.throttle'
import { useCallback, useEffect, useState } from 'react'
import Typed from 'typed.js'
@@ -14,14 +13,16 @@ export default function Header () {
const [typed, changeType] = useState()
useEffect(() => {
if (!typed && window && document.getElementById('typed')) {
changeType(new Typed('#typed', {
strings: BLOG.headerStrings,
typeSpeed: 200,
backSpeed: 100,
backDelay: 400,
showCursor: true,
smartBackspace: true
}))
changeType(
new Typed('#typed', {
strings: BLOG.headerStrings,
typeSpeed: 200,
backSpeed: 100,
backDelay: 400,
showCursor: true,
smartBackspace: true
})
)
}
})
const { theme } = useGlobal()
@@ -34,11 +35,19 @@ export default function Header () {
autoScroll = false
}
const scrollTrigger = useCallback(() => {
if (window.scrollY > windowTop & window.scrollY < window.innerHeight & !autoScroll) {
if (
(window.scrollY > windowTop) &
(window.scrollY < window.innerHeight) &
!autoScroll
) {
autoScroll = true
scrollTo(wrapperTop, autoScrollEnd)
}
if (window.scrollY < windowTop & window.scrollY < window.innerHeight & !autoScroll) {
if (
(window.scrollY < windowTop) &
(window.scrollY < window.innerHeight) &
!autoScroll
) {
autoScroll = true
scrollTo(0, autoScrollEnd)
}
@@ -77,15 +86,29 @@ export default function Header () {
}
})
return <header id='header' className='duration-500 w-full bg-cover bg-center md:-mt-14'
style={{ height: 'calc(100vh + 1px)', 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 className='absolute z-10 flex h-full items-center -mt-14 justify-center w-full text-4xl md:text-7xl text-white'>
<div id="typed" className='flex text-center font-serif'></div>
</div>
<div onClick={() => { scrollTo(wrapperTop, autoScrollEnd) }} className='cursor-pointer w-full text-center text-2xl animate-bounce absolute bottom-10 text-white'>
<FontAwesomeIcon icon={faArrowDown} />
</div>
</header>
return (
<header
id="header"
className="duration-500 w-full bg-cover bg-center md:-mt-14"
style={{
height: 'calc(100vh + 1px)',
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 className="absolute z-10 flex h-full items-center -mt-14 justify-center w-full text-4xl md:text-7xl text-white">
<div id="typed" className="flex text-center font-serif"></div>
</div>
<div
onClick={() => {
scrollTo(wrapperTop, autoScrollEnd)
}}
className="cursor-pointer w-full text-center text-2xl animate-bounce absolute bottom-10 text-white"
>
<FontAwesomeIcon icon={faArrowDown} />
</div>
</header>
)
}
/**