Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Having some fun on webpackbin
// From https://www.webpackbin.com/bins/-Ku7fYF911w0Y-YUxqVa
import React from 'react'
import { compose, lifecycle, withHandlers, withState, withProps } from 'recompose'
import styled, { css } from 'styled-components'
import { range, sample } from 'lodash'
const Screen = styled.main`
height: 200vh;
`
const Content = styled.div`
margin-top: 75px;
`
const Header = styled.header`
height: 65px;
width: 100%;
position: fixed;
background-color: #000000;
z-index: 50000;
top: 0;
left: 0;
`
const Grid = styled.div`
display: flex;
flex-wrap: wrap;
width: 100vw;
align-items: center;
justify-content: center;
`
const GridItem = styled.div`
flex-basis: 25%;
font-size: 56px;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
margin: 10px;
height: 150px;
background: #f1f1f1;
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
transition: box-shadow 0.8s;
&:hover {
box-shadow: 8px 8px 20px 0px rgba(0,0,0,0.75);
cursor: pointer;
}
`
const InnerHeader = styled.div`
width: 100%;
height: 60px;
display: flex;
color: white;
font-size: 32px;
margin-left: 15px;
align-items: center;
justify-content: center;
`
const ProgressBar = styled.div`
width: 100%;
background: #000000;
height: 5px;
`
const ProgressIndicator = styled.div`
width: ${props => props.progressWidth || 0}px;
background: -webkit-gradient(linear, right top, left top, from(#05f), color-stop(50%, #7201b2), to(#f83371));
background: linear-gradient(to left, #05f, #7201b2 50%, #f83371);
height: 100%;
max-width: 100%;
`
const arrowCss = ({ direction }) => {
return css`
border-${direction}: 30px solid green;
${direction}: 0;
`;
}
const Arrow = styled.div`
position: fixed;
top: calc(100vh / 2);
width: 0px;
height: 0px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
${props => arrowCss(props)}
`;
function App ({ progressWidth, emoji }) {
return (
<Screen>
<Header>
<InnerHeader>
😀 Emoji Slots 🎰
</InnerHeader>
<ProgressBar>
<ProgressIndicator progressWidth={progressWidth} />
</ProgressBar>
</Header>
<Content>
<Arrow direction="lefte" />
<Arrow direction="right" />
<Grid>
{range(0, 300).map(a => <GridItem key={a}>{sample(emoji)}</GridItem>)}
</Grid>
</Content>
</Screen>
)
}
export default compose(
withState('scrollPosition', 'setScrollPosition', 0),
withHandlers({
handleScroll: props => event => {
props.setScrollPosition(document.body.scrollTop)
}
}),
lifecycle({
componentDidMount() {
window.addEventListener('scroll', this.props.handleScroll)
},
componentWillUnmount() {
window.removeEventListener('scroll', this.props.handleScroll)
}
}),
withProps(({ scrollPosition }) => {
const height = document.body.scrollHeight - 860
const width = document.body.clientWidth
const progressWidth = width / (height / scrollPosition)
return {
progressWidth
}
}),
withProps(() => ({
emoji: ['🚽', '🖕', '🤡', '💩', '👅', '🦋', '⛄️', '🤖', '👹']
}))
)(App)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment