mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
c2a8beb4bd
* Stage component(for the icons in the gradient cards) * Make Scroll-hint component shared between hackathons and bank * Add hackathons to nav * layout for landing and rundown on hacakthons page
39 lines
No EOL
911 B
JavaScript
39 lines
No EOL
911 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 = () => (
|
|
<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}
|
|
></Box>
|
|
)
|
|
|
|
export default ScrollHint |