LogoMarkWhite.png

季卓芸/WorkLog のバックアップ(No.37)


16.png

季卓芸

研究経過報告

CONTENTS




2021.06.11~06.18

ウェブサイト調査



TYPE4Ver.4

Home page
"mouse更新"

参考

curtain.js

curtain.jsは小さいvanilla WebGL JavaScriptのライブラリです。3Dのインタラクションやアニメーションを作ることができます。

HTMLの画像を含んだ要素を3DのWebGLテクスチャーplaneに変換し、shadersを使い、アニメーションを加えることができるようにしています。それぞれのplaneの大きさやpositionはCSSで変更することができるので、楽に配置変更サイズ変更をすることができます。




2021.06.04~06.11


1.LOGO

21.png


2.アンケート

19.png
20.png


3.卒研プレゼン

季卓芸/予備審査プレゼン?




更新ウェブサイトlogoと「BeijingChangyangPark」比例で拡大すると縮小自動的に変更します。

天気予報が調整します。

4.更新ウェブサイトlogoと背景色と天気予報場所とlogo、メニュー位置


Ver.3

本の感じでページを動かします。

Ver.2


4-https://ki0722.github.io/BeijingChangyangPark4/
"参考:
ButtonAnimation

ハンバーガーアイコンをCSSでアニメーションさせています。"
DEMO:-https://koichi-inoue.github.io/Navi-ButtonAnimation/
CODE:-https://github.com/koichi-inoue/Navi-ButtonAnimation

Ver.1

-メニューの機能強化と天気予報のプラグインを追加しました。。

10-https://ki0722.github.io/BeijingChangyangPark10/

参考天気予報

参考色CSS

2021.05.29~6.4


1. アンケート


17.png
18.png

このアンケートを公園来場者100人を目標に6月末までに実施。

2.ウェブサイト

新しいウェブサイト Ver.4

Home page

更新ウェブサイト Ver.3

本の感じでページを動かします。

作品説明

ウェブサイト Ver.2



作品説明

ウェブサイト Ver.1

-メニューの機能強化と天気予報のプラグインを追加しました。。

10-https://ki0722.github.io/BeijingChangyangPark10/


作品説明

2021.05.22~5.28

1.公園ホームページ作る理由(公園季節)

11.png


2. 公園をウェブページにする必要がある理由/調査:

12.png


3. アンケート

10.png


4. logoの制作(継続)


7.png
8.png
LOGOlogo
14.png
15.png
LOGOlogo

logoの説明

9.png




5. ウェブサイト Ver.3

本の感じでページを動かします。
ホームページとspringページだけでサンプルを作りました。

9-https://ki0722.github.io/BeijingChangyangPark9/

作品説明

6. 更新ウェブサイト Ver.2

springチューリップ花、summer雨とハスの花、autumn葉、 winter雪の花全面的に落ちる。

4-https://ki0722.github.io/BeijingChangyangPark4/

7.ウェブサイト Ver.1

メニューの機能と天気予報を増えています.
下部分で写真もメニューの機能です。

10-https://ki0722.github.io/BeijingChangyangPark10/

8-https://ki0722.github.io/BeijingChangyangPark8/


作品説明

8. 作品説明

13.png






2021.05.14~5.21

1. logoの制作(継続)


3.png
4.png
LOGO段組、説明



参考:https://participation.tokyo2020.jp/jp/data/subbrand-usage-guidelines.pdf



2. 研究報告作っています。

5.png




3. 新しいホームページを作ります。

メニューとページ動きを組み合わせる表現します。

下部分で写真もメニューの機能です。

8-https://ki0722.github.io/BeijingChangyangPark8/


問題

      <div class="BOX">
           <a href="spring_07.html">
             <img src="images/spring/spring_07.jpg">
           </a>
         </div>

この部分は消したいですが、消したら、aside部分白くなります。

6.png
bug





更新。
ホームページ、spring、autumn葉全面的落ちる、 winter雪の花全面的に落ちる。
ホームページ:写真の spring、summerなどをクリックしてspringページになります。

他のページはメニューが普通メニューです。

4-https://ki0722.github.io/BeijingChangyangPark4/



2021.05.07~5.13

logoを作って、ページめくりホームページ。

NavigationDesign

レスポンシブデザイン

MaterialDesign

https://design.kyusan-u.ac.jp/OpenSquareJP/?MaterialDesign

薄い本の感じです。

2) 写真集の「ページめくり」を進化させたWeb特有のトランジション







2021.04.23

情報デザイン研究II

tianqi

薄い本の感じです。

2) 写真集の「ページめくり」を進化させたWeb特有のトランジション

2021.04.16

いくつかの作品の構想を多く設計します。

全部

1

2

3

4

5