来月3日からスタートする、神宮前ギャラリー「鹿展 vol.2」の出展作家さんを紹介する特設サイト鹿展 Creators List 2018を公開！作品提供ができない分、サイトの方で応援しようと、前から気になっていたjQueryプラグイン［Fullscreen Slit Slider］を使用し、鹿成分多めで作ってみた。

［Fullscreen Slit Slider］は、コンテンツをナビゲーションで切り替えていくスライドショーだが、画面中央にスリットが入りそこからパクッと割れて次のコンテンツに切り替わるというアニメーションがダイナミックで印象的だ。

公式ドキュメントのダウンロードはこちら。フォルダの中にはHTMLファイル2点（index.html、index2.html）、スタイルシート4点、そしてJSファイル3点が入っている。index.html（demo1）はフルスクリーンのスライダー、index2.html（demo2）はヘッダーなどに適したタイプのスライダーだ。

スリットは、縦方向と横方向の二種類あり、divタグのカスタムデータ属性（HTML5から実装）で、スリットの方向・角度・サイズなどをカスタマイズすることができる。さらに細かくスピードなどを設定したい場合はjquery.slitslider.jpのコードを編集する必要がある。

同梱されているcusttom.cssでは、アイコンやタイトルのアニメーション、切り替え時のフェードイン＆フェードアウトなどを設定することができる。今回は鹿のアイコンの向きに合わせて右からのロールイン、左からのロールイン、そして中央からのズームインのアニメーションを作成してみた。（タブレットやスマホの時は幅が狭くなる分、転がり方が忙しくなってしまうので、全てズームインに設定した。）

今年の鹿展は作家さん同士のコラボ作品などもあるとのこと。お近くにお越しの際はぜひ。

鹿展 Creators List 2018