鹿展Vol.3特設サイト公開

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

神宮前ギャラリーサイト更新

神宮前ギャラリーサイトに10月のイベント情報を掲載しました。

この秋、鹿好き&鹿マニア必見のイベント、神宮前ギャラリーの企画展「鹿展Vol.3」が開催されます。

鹿展Vol.3
開催期間:10月4日(木)〜9日(火)
開廊時間:12:00〜19:00(最終日は17:00まで)

鹿をモチーフとしたイラストや立体作品、彫刻、鹿革製品など様々なジャンルの「鹿作品」が並ぶグループ展です。
鹿イラストのポストカードや、鹿柄のマステ、鹿革の靴など、ここにしかない鹿小物に出会えます。

出品作家さんについてはCreators List Vol.3をご覧ください。

関連サイト

鹿展

Creators List Vol.3

神宮前ギャラリーサイト更新

神宮前ギャラリーに9月のイベント情報を追加。

CHOI JEEHYUN-TAKAHASHI AYAKO 二人展
開催期間:9月14日(金)〜19日(水)

女子美術大学大学院ファッションテキスタイルの2名による作品展。
学んできた環境や好みが異なる二人が、それぞれの考える新しい服のカタチを表現します。


おのおの、展
開催期間:9月20日(木)〜25日(火)

絵描き、イラストレーター、オートマタ作家の三人による作品展。モチーフも材料も、ジャンルも作風もばらばらな3人が、おのおのの個性溢れる作品を自由に展示します。

神宮前ギャラリーサイト更新

神宮前ギャラリーに8月のイベント情報を追加。
8月最後のイベントは東京工科大学美術同好会のグループ展「白いそら、青いくも」。

白いそら、青いくも
開催期間:8月25日(土)〜30日(木)

「当たり前に囚われすぎない自由な発想を大切にしたい」という思いのこもった作品展。
それぞれの感性と発想をお楽しみください。

神宮前ギャラリーサイト更新

神宮前ギャラリーに8月のイベント情報を追加。
お盆明けからはガラス造形作家吉田謙也さんの個展がスタート。

共鳴
開催期間:2018年8月16日(木) 〜 8月21日(火)

青森ねぶた祭の空気を抽出したような、力強く幻想的なアートワークをご鑑賞ください。

神宮前ギャラリーサイト更新

神宮前ギャラリーに8月のイベント情報を追加。

Color Jam
開催期間:2018年8月2日(木) 〜 8月7日(火)

武蔵野美術学園のメンバーで構成されるチーム”Still Kids”による作品展。カラーの異なるクリエイターさん達が奏でるジャムセッションをお楽しみください。

8月は毎週異なる展示が開催される予定。随時情報を追加していくのでお楽しみに。

神宮前ギャラリー更新

神宮前ギャラリーに5月のイベント情報を追加。

あひるの学校〜着物・帯リメイク〜
開催期間:5月16日(水) 〜 5月18日(金)

着物・帯をリメイクした、コート、ジャケット、ワンピースなどが展示販売される。
所有する着物・帯のリメイクのオーダーも受け付けてもらえるとのこと。

蕙草会作品展
開催期間:5月25日(金) 〜 5月29日(火)

日本美術院同人、梅原幸雄先生ご指導のもとで日本画・水彩画のお稽古をしている蕙草会の9名による第4回作品展。

鹿展vol.2特設サイト公開

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

神宮前ギャラリー更新

神宮前ギャラリーに4月のイベント情報を追加。

「形と色が織りなす光のハーモニー、あらゆる美と自然」をコンセプトに制作活動をしているガラス作家前田恵里さんの個展「Directions of Light」が開催されます。

前田恵里 個展 Directions of Light
開催期間:4月27日(水)〜30日(月)

魅惑的で美しいガラスのオブジェ・アクセサリーをご鑑賞ください。

神宮前ギャラリーサイト更新

神宮前ギャラリーに3月のイベント情報を追加。

今年最初の展示は、「embroidery~」。女子美術大学刺繍コースの卒業生・在学生さんの作品展だ。

embroidery~
開催期間:3月21日(水)〜26日(月)

刺繍展だと聞いていたので、届いた画像を見てびっくり。これも刺繍なの?と思うようなものもあり、刺繍の世界も広いのだなあと思った。

日本刺繍や、マシン刺繍などを取り入れた着物、パネル、タペストリー、スカーフなどが展示される予定。