mirror of
https://github.com/System-End/site.git
synced 2026-04-20 00:25:19 +00:00
40 lines
939 B
JavaScript
40 lines
939 B
JavaScript
import { Box } from 'theme-ui'
|
|
import anime from 'animejs/lib/anime.es.js'
|
|
|
|
const handleClick = () => {
|
|
const scroll = { x: document.scrollingElement.scrollTop }
|
|
|
|
anime({
|
|
targets: scroll,
|
|
x: window.innerHeight,
|
|
easing: 'easeOutExpo',
|
|
duration: 800,
|
|
update: () => {
|
|
document.scrollingElement.scrollTop = scroll.x
|
|
}
|
|
})
|
|
}
|
|
const ScrollHint = ({ ...props }) => (
|
|
<Box
|
|
sx={{
|
|
display: 'block',
|
|
position: 'relative',
|
|
height: '32px',
|
|
width: '32px',
|
|
margin: '0 auto',
|
|
borderBottom: '2px solid #fff',
|
|
borderRight: '2px solid #fff',
|
|
transform: 'rotate(45deg)',
|
|
opacity: '.6',
|
|
cursor: 'pointer',
|
|
transition: 'transform .3s',
|
|
|
|
'&:hover': { transform: 'translateY(4px) rotate(45deg)' },
|
|
'&:active': { transform: ' translateY(6px) rotate(45deg)' }
|
|
}}
|
|
onClick={handleClick}
|
|
{...props}
|
|
></Box>
|
|
)
|
|
|
|
export default ScrollHint
|