フリックに対応したカルーセルを
実装するライブラリ・inflickity
です。動きもかなり軽快ですので、
使いどころも多々ありそうです。
よくあるUIキットにも似たような
ものが含まれてますけど、こうして
単体で使えるのも欲しいところです。
永久にフリックできるカルーセル、みたいなのを作れるライブラリです。
inflickity
PCではドラッグで操作できます。
スマフォはフリックで動かせます。と言ってもiPhoneでしかテストしてませんが。
Sample
以下サンプル。スマフォはQRからどうぞ。
斜めのと混同してて操作はしにくくなっていますがその点はご了承下さい。
コード
<script src="inflickity.js"></script><script>var init = function() { var slider1 = document.getElementById('slider1'); var slider2 = document.getElementById('slider2'); var cats = document.getElementById('cats'); var myFlick = new Inflickity( slider1 ); var myDutchFlick = new Inflickity( slider2, { offsetAngle: -Math.PI / 3 }) window.myFlick = myFlick};window.addEventListener( 'DOMContentLoaded', init, false);</script> |
ライブラリを読み込んでエレメントを取得してイベント処理します。斜めになっているやつはCSS3ではなく、Math.PIで処理しています。ただ、これだけだとデモのように滑らかな動きを実現できません。
この動きを実現する為にrequestAnimationFrameというのを併用してあげます。
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
| /** | |
| * requestAnimationFrame polyfill by Erik Möller & Paul Irish et. al. | |
| * https://gist.github.com/1866474 | |
| * | |
| * http://paulirish.com/2011/requestanimationframe-for-smart-animating/ | |
| * http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating | |
| **/ | |
| /*jshint asi: false, browser: true, curly: true, eqeqeq: true, forin: false, newcap: true, noempty: true, strict: true, undef: true */ | |
| (function( window ) { | |
| 'use strict'; | |
| var lastTime = 0; | |
| var prefixes = 'webkit moz ms o'.split(' '); | |
| // get unprefixed rAF and cAF, if present | |
| var requestAnimationFrame = window.requestAnimationFrame; | |
| var cancelAnimationFrame = window.cancelAnimationFrame; | |
| // loop through vendor prefixes and get prefixed rAF and cAF | |
| var prefix; | |
| for( var i = 0; i < prefixes.length; i++ ) { | |
| if ( requestAnimationFrame && cancelAnimationFrame ) { | |
| break; | |
| } | |
| prefix = prefixes[i]; | |
| requestAnimationFrame = requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ]; | |
| cancelAnimationFrame = cancelAnimationFrame || window[ prefix + 'CancelAnimationFrame' ] || | |
| window[ prefix + 'CancelRequestAnimationFrame' ]; | |
| } | |
| // fallback to setTimeout and clearTimeout if either request/cancel is not supported | |
| if ( !requestAnimationFrame || !cancelAnimationFrame ) { | |
| requestAnimationFrame = function( callback, element ) { | |
| var currTime = new Date().getTime(); | |
| var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) ); | |
| var id = window.setTimeout( function() { | |
| callback( currTime + timeToCall ); | |
| }, timeToCall ); | |
| lastTime = currTime + timeToCall; | |
| return id; | |
| }; | |
| cancelAnimationFrame = function( id ) { | |
| window.clearTimeout( id ); | |
| }; | |
| } | |
| // put in global namespace | |
| window.requestAnimationFrame = requestAnimationFrame; | |
| window.cancelAnimationFrame = cancelAnimationFrame; | |
| })( window ); |
これを一緒に読み込んであげればOKです。
ライブラリはGithubで公開されていました。便利そうなのでもう少し検証して使ってみようかと思います。
