Skip to content

Instantly share code, notes, and snippets.

@apisandipas
Forked from amy-langley/filmstrip.css
Created May 7, 2019 01:16
Show Gist options
  • Save apisandipas/d9522ec0a935341b4a04e8f234241253 to your computer and use it in GitHub Desktop.
Save apisandipas/d9522ec0a935341b4a04e8f234241253 to your computer and use it in GitHub Desktop.
Filmstrip React component
.filmstrip{
padding: 0;
margin: 10px;
display: flex;
}
.navButton{
border: 0;
margin: 0;
height: 100%;
}
.viewport{
overflow-x: hidden;
position: relative;
width: 100%;
}
.strip{
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
display: flex;
-webkit-transition-property: left;
transition-property: left;
transition-duration: 0.4s;
transition-timing-function: ease;
}
.viewport::before{
position: absolute;
z-index: 2;
top: 0;
left: 0;
bottom: 0;
margin: 0;
padding: 0;
width: 100%;
background: linear-gradient(to right,
rgba(255,255,255,1) 10%,
rgba(255,255,255,0) 30%
);
background-repeat: no-repeat;
background-attachment: fixed;
content: '';
}
.viewport::after{
position: absolute;
z-index: 2;
top: 0;
left: 0;
bottom: 0;
margin: 0;
padding: 0;
width: 100%;
background: linear-gradient(to right,
rgba(255,255,255,0) 70%,
rgba(255,255,255,1) 90%
);
background-repeat: no-repeat;
background-attachment: fixed;
content: '';
}
/* styles below this point are for the example only, no need to keep */
.navButton{
background-color: white;
width: 40px;
color: #ccc;
font-weight: bold;
font-size: 24pt;
}
.strip-item{
background-color: #bbb;
height: 100px;
margin: 0;
width: 100px;
color: white;
text-align: center;
line-height: 100px;
font-size: 48pt;
font-family: Avenir;
font-weight: bold;
}
.strip-item:nth-child(even){
background-color: #ccc;
}
import React from 'react';
require('filmstrip.css');
export default class Filmstrip extends React.Component{
constructor(props){
super(props)
this.state = { scrollPos: 0 }
this.increment = parseInt(this.props.increment, 10)
}
adjustPos(increment){
this.innerwidth = this.refs.strip.getBoundingClientRect().width
this.viewportwidth = this.refs.viewport.getBoundingClientRect().width
var newPos = this.state.scrollPos + increment;
var offset = this.viewportwidth - this.innerwidth
if(increment > 0)
newPos = Math.min(newPos,0)
if(increment < 0)
newPos = Math.max(newPos, offset)
this.setState({scrollPos: newPos})
}
componentDidMount(){
this.refs.filmstrip.style.height = this.refs.strip.getBoundingClientRect().height + 'px'
}
render(){
return <section className='filmstrip' ref='filmstrip'>
<button className='prevNav navButton' onClick={this.adjustPos.bind(this,this.increment)}>&lt;</button>
<div className='viewport' ref='viewport'>
<div className='strip' ref='strip' style={{left: this.state.scrollPos}}>
<div className='strip-item'>1</div>
<div className='strip-item'>2</div>
<div className='strip-item'>3</div>
<div className='strip-item'>4</div>
<div className='strip-item'>5</div>
<div className='strip-item'>6</div>
<div className='strip-item'>7</div>
<div className='strip-item'>8</div>
<div className='strip-item'>9</div>
<div className='strip-item'>10</div>
<div className='strip-item'>11</div>
<div className='strip-item'>12</div>
</div>
</div>
<button className='nextNav navButton' onClick={this.adjustPos.bind(this,-this.increment)}>&gt;</button>
</section>
}
}
<Filmstrip increment="350"/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment