-
-
Save bichotll/1f6feba7d26c82034f1a8a142230b34d to your computer and use it in GitHub Desktop.
Awesome effect for carousel http://jsbin.com/rewukuguye
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/flickity/2.0.3/flickity.pkgd.js" ></script> | |
| <meta charset="utf-8"> | |
| <style rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.0.3/flickity.min.css"></style> | |
| <title>React Hello World w/ JSBin</title> | |
| <style id="jsbin-css"> | |
| .carousel { | |
| width: 100%; | |
| } | |
| .chord { | |
| height: 50px; | |
| width: 250px; | |
| border: 1px solid red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| <script id="jsbin-javascript"> | |
| 'use strict'; | |
| function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } } | |
| var Chord = React.createClass({ | |
| displayName: 'Chord', | |
| render: function render() { | |
| return React.createElement( | |
| 'div', | |
| { className: 'chord chord-' + this.props.i }, | |
| 'tests of ', | |
| this.props.i | |
| ); | |
| } | |
| }); | |
| var StreapTease = React.createClass({ | |
| displayName: 'StreapTease', | |
| componentDidMount: function componentDidMount() { | |
| this.wContainer = this.refs.wContainer; | |
| var flkty = new Flickity(this.wContainer, { | |
| pageDots: false, | |
| prevNextButtons: false | |
| }); | |
| flkty.on('scroll', function (event, progress) { | |
| forEachSlides(progress); | |
| }); | |
| function forEachSlides() { | |
| var progress = arguments.length <= 0 || arguments[0] === undefined ? flkty.x : arguments[0]; | |
| flkty.slides.forEach(function (slide, i) { | |
| var scale = (2 - Math.min(Math.abs((slide.target + flkty.x) / 1000) + 1, 2)).toFixed(2); | |
| slide.cells[0].element.style.transform = 'scale(' + scale + ')'; | |
| }); | |
| }; | |
| forEachSlides(); | |
| }, | |
| render: function render() { | |
| return React.createElement( | |
| 'div', | |
| { 'class': 'carousel' }, | |
| React.createElement( | |
| 'h1', | |
| null, | |
| 'Smoothly rockin', | |
| '\'' | |
| ), | |
| React.createElement( | |
| 'div', | |
| { className: 'chords' }, | |
| React.createElement( | |
| 'div', | |
| { className: 'chords-wrap', ref: 'wContainer' }, | |
| [,].concat(_toConsumableArray(Array(40))).map(function (x, i) { | |
| return React.createElement(Chord, { key: i, i: i }); | |
| }) | |
| ) | |
| ) | |
| ); | |
| } | |
| }); | |
| ReactDOM.render(React.createElement(StreapTease, null), document.getElementById('container')); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"><\/script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"><\/script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/flickity/2.0.3/flickity.pkgd.js" ><\/script> | |
| <meta charset="utf-8"> | |
| <style rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.0.3/flickity.min.css"></style> | |
| <title>React Hello World w/ JSBin</title> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css">.carousel{ | |
| width: 100%; | |
| } | |
| .chord{ | |
| height: 50px; | |
| width: 250px; | |
| border: 1px solid red; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript"> | |
| var Chord = React.createClass({ | |
| render: function() { | |
| return ( | |
| <div className={'chord chord-' + this.props.i} >tests of {this.props.i}</div> | |
| ); | |
| } | |
| }); | |
| var StreapTease = React.createClass({ | |
| componentDidMount() { | |
| this.wContainer = this.refs.wContainer; | |
| var flkty = new Flickity(this.wContainer, { | |
| pageDots: false, | |
| prevNextButtons: false | |
| }); | |
| flkty.on( 'scroll', function( event, progress ) { | |
| forEachSlides(progress); | |
| }); | |
| function forEachSlides(progress = flkty.x){ | |
| flkty.slides.forEach( function( slide, i ) { | |
| let scale = ( | |
| 2 - Math.min( | |
| ( | |
| Math.abs(( slide.target + flkty.x ) / 1000) + 1 | |
| ), 2 | |
| ) | |
| ).toFixed(2); | |
| slide.cells[0].element.style.transform = 'scale(' + scale + ')'; | |
| }); | |
| }; | |
| forEachSlides(); | |
| }, | |
| render: function() { | |
| return ( | |
| <div class="carousel" > | |
| <h1>Smoothly rockin{'\''}</h1> | |
| <div className="chords"> | |
| <div className="chords-wrap" ref="wContainer"> | |
| {[,...Array(40)].map((x, i) => | |
| <Chord key={i} i={i} /> | |
| )} | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| }); | |
| ReactDOM.render( | |
| <StreapTease />, | |
| document.getElementById('container') | |
| ); | |
| </script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .carousel { | |
| width: 100%; | |
| } | |
| .chord { | |
| height: 50px; | |
| width: 250px; | |
| border: 1px solid red; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } } | |
| var Chord = React.createClass({ | |
| displayName: 'Chord', | |
| render: function render() { | |
| return React.createElement( | |
| 'div', | |
| { className: 'chord chord-' + this.props.i }, | |
| 'tests of ', | |
| this.props.i | |
| ); | |
| } | |
| }); | |
| var StreapTease = React.createClass({ | |
| displayName: 'StreapTease', | |
| componentDidMount: function componentDidMount() { | |
| this.wContainer = this.refs.wContainer; | |
| var flkty = new Flickity(this.wContainer, { | |
| pageDots: false, | |
| prevNextButtons: false | |
| }); | |
| flkty.on('scroll', function (event, progress) { | |
| forEachSlides(progress); | |
| }); | |
| function forEachSlides() { | |
| var progress = arguments.length <= 0 || arguments[0] === undefined ? flkty.x : arguments[0]; | |
| flkty.slides.forEach(function (slide, i) { | |
| var scale = (2 - Math.min(Math.abs((slide.target + flkty.x) / 1000) + 1, 2)).toFixed(2); | |
| slide.cells[0].element.style.transform = 'scale(' + scale + ')'; | |
| }); | |
| }; | |
| forEachSlides(); | |
| }, | |
| render: function render() { | |
| return React.createElement( | |
| 'div', | |
| { 'class': 'carousel' }, | |
| React.createElement( | |
| 'h1', | |
| null, | |
| 'Smoothly rockin', | |
| '\'' | |
| ), | |
| React.createElement( | |
| 'div', | |
| { className: 'chords' }, | |
| React.createElement( | |
| 'div', | |
| { className: 'chords-wrap', ref: 'wContainer' }, | |
| [,].concat(_toConsumableArray(Array(40))).map(function (x, i) { | |
| return React.createElement(Chord, { key: i, i: i }); | |
| }) | |
| ) | |
| ) | |
| ); | |
| } | |
| }); | |
| ReactDOM.render(React.createElement(StreapTease, null), document.getElementById('container')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment