カテゴリー: 新着情報

来月4日からスタートする、神宮前ギャラリー「鹿展 vol.3」の作家さんを紹介する特設サイト鹿展 Creators List Vol.3を公開！

今回も作品提供ができない分、サイトの方で応援させてもらう。CodyHouseの2-blocks-templateをベースに、上下にスライドする、2カラムの日めくりカレンダー的なサイト（SP版は1カラムのブロックメニューとなる。）を作ってみた。

2-blocks-templateは、左ブロック下部にあるナビゲーションボタンを押すとコンテンツが左右にスライドしていく設定になっている。これをボタンクリックで左ブロック下方向に、右のブロックは上方向にスライドしていくように変更した。

まず左ブロックに配置されているナビゲーションボタンを中央に縦並びで表示する（形状も丸にした）ようにスタイル設定を変更。

次に右ブロックの背景も、左ブロックと同じようにコンテンツごとに切り替わるように、list要素にスタイルシートを追加。

.cd-content-list > li{
  background: rgba(28,28,28,0.5);
}
.cd-content-list > li:nth-of-type(2) {
  background:url(../img/img-2.svg) no-repeat center center;
  background-size:70%;
}
　　　〜　以下省略　〜

そして、左右のブロックにtranslateYを使って上下方向への動きを設定する。

左ブロックの設定

   /* image block(left block) */
  .cd-image-block > ul > li {
　　　〜　途中省略　〜
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    transition: transform 0.5s;
  }  

  .cd-image-block > ul > li.is-selected{
    /* this is the visible item */
    position: absolute;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  .cd-image-block > ul > li.move-turn{
    /* this is the item hidden on the avobe */
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }

右ブロックの設定

    /* content block(right block) */
  .cd-content-block > ul > li {
　　　〜　途中省略　〜
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    transition: transform 0.5s;
  }

  .cd-content-block > ul > li.is-selected {
    /* this is the visible item */
    position: absolute;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  .cd-content-block > ul > li.move-turn {
    /* this is the item hidden on the bottom */
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }

スライドの方向を変えるだけで、サイトの印象は大きく変わる。それがスタイル設定だけでできるのだから、CSS3は便利だし面白いなと思う。
ちなみにトップページのもみじの落ちるアニメーションもスクリプトは使わず、CSS3のみ。

鹿展 Creators List Vol.3

来月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