Skip to content

Instantly share code, notes, and snippets.

@bichotll

bichotll/index.html

Forked from anonymous/index.html
Created September 5, 2016 09:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bichotll/6c01b2bfd0cef9bf8e4bea1e31edae82 to your computer and use it in GitHub Desktop.
Save bichotll/6c01b2bfd0cef9bf8e4bea1e31edae82 to your computer and use it in GitHub Desktop.
Download ZIP
flickity smooth zoom effect w/ JSBin// source http://jsbin.com/rewukuguye
Raw
index.html
<!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>
Raw
jsbin.rewukuguye.css
.carousel {
width: 100%;
}
.chord {
height: 50px;
width: 250px;
border: 1px solid red;
}
Raw
jsbin.rewukuguye.js
'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