Beijing Changyang Park
北京長陽公園の日常を記録するフォトギャラリーサイト
- Keywords:季節,映像 , 風景, 人物,その他
- 季卓芸/sample
- Repository:https://github.com/ki0722
- https://ki0722.github.io/BeijingChangyangPark/
- https://ki0722.github.io/BeijingChangyangPark5/
- https://ki0722.github.io/BeijingChangyangPark6/
- https://ki0722.github.io/BeijingChangyangPark7/
- https://ki0722.github.io/BeijingChangyangPark8/
- https://ki0722.github.io/BeijingChangyangPark9/
- https://ki0722.github.io/BeijingChangyangPark10/
- https://ki0722.github.io/BeijingChangyangPark11home/
概要
研究の背景
北京長陽公園は、自宅の近くにある公園のひとつで、時々散歩に出かけます。
春、夏、秋、冬、四季の景色が美しい場所です。
フィットネスとエンターテイメント、落ち着いたムード、素晴らしい場所です。
長陽公園は、房山区長陽町にあります。北京で建設中の11万エーカーの新しい公園の1つです。最大の陸地、地理的な場所、最も完全な緑化樹種、および最も完全なインフラストラクチャを備えた公園です。庭園では、人工の風景と元の生態学的な風景が組み合わさって、カラフルな園芸植物のコミュニティを形成し、都市の森の風景を作り出し、市民がリラックス、レクリエーション、フィットネスするのに理想的な場所を提供します。この庭園は、2013年に北京庭園を受賞しました緑化局は市の「質の高い公園」として評価されました。共植:53550本の木、19920本の灌木、717952年生の花、105743 105芝生、668914㎡地被。
全体的な自然条件によれば、長陽公園は「2つの川と2つの庭園」の生態学的なウォーターフロントの景観を形成しています。
一部の情報はインターネットで確認できますが、公式のWebサイトは存在していないので、私がデザインしたいと考えました。
目的・主旨
目指すサイトの特徴は以下のとおりです。
- 誰もが容易に使えるインターフェイス
- クールな視覚効果
- “動感”が強いもの
サイトの仕様
1-https://ki0722.github.io/BeijingChangyangPark/
2-https://ki0722.github.io/BeijingChangyangPark2/
3-https://ki0722.github.io/BeijingChangyangPark3/
4-https://ki0722.github.io/BeijingChangyangPark4/
5-https://ki0722.github.io/BeijingChangyangPark5/
6-https://ki0722.github.io/BeijingChangyangPark6/
7-https://ki0722.github.io/BeijingChangyangPark7/
8-https://ki0722.github.io/BeijingChangyangPark8/
9-https://ki0722.github.io/BeijingChangyangPark9/
10-https://ki0722.github.io/BeijingChangyangPark10/
11-https://ki0722.github.io/BeijingChangyangPark11home/
研究方法(制作方法)
- 調査方法
研究開発に使用する言語は以下の_3つ_である。 - 1) HTML:ページの構造
- 2) CSS:ページのビジュアルデザイン
- 3) JavaScript(jQuery): ページの動的変更
インタラクティブな仕組みの実現には、主に JavaScript と、そのライブラリーである jQueryプラグインを使用する。具体的には、以下のような「動き」や「触感」を実現する手法を開発する。
- 1) タッチ・クリックに反応して変化する「動的写真」の導入
- 2) 写真集の「ページめくり」を進化させたWeb特有のトランジション
- 3) ユーザーの動きに反応するパーティクル要素の導入
- 4) インタラクティブに反応する「背景」要素の導入
- 5) 電子媒体における「手触り感」の再現
- 制作方法(技法)
- Photoshop:写真を調整
- Adobe Illustrator:logoのデザインを作成
- HTML:ページの構造
- CSS:ページのビジュアルデザイン
- JavaScript:ページの動的変更
- jQuery:ページの動的変更
- jQuery プラグイン:様々な表現機能
制作環境
- ハードウエア
- iMac、Mac、Windows、デジタルカメラ
- ソフトウエア
- Atom Editor
- Adobe Photoshop
- Adobe Illustrator
- GitHub
Project Management
Schedule
計画的な遂行のために、進行管理表を作成してリンクして下さい。
ToDo
やるべきこと(タスク)を箇条書きにします。
完了後は「取り消し線」あるいは「// コメントアウト」」
CONTENTS
- 2021.06.23~06.29
- 2021.06.16~06.22
- 2021.6.08~6.15
- 2021.6.03~6.07
- 2021.05.29~6.2
- 2021.05.23~5.28
- 2021.05.14~5.22
- 更新
- 2021.04.20|調査
2021.06.23~06.29
2021.06.16~06.22
4-https://ki0722.github.io/BeijingChangyangPark4/
2021.6.08~6.15
更新
ウェブサイトVer.4mouse更新
Home page
- mouse更新
2021.6.03~6.07
メニュー
"質問1"
logo比例で拡大すると縮小できません。
"参考:"
Ver.3
本の感じでページを動かします。
- インターフェイスに「ページめくり」のプラグインを追加しました。
"質問2":メニューの位置は右に移動します。
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
2021.05.29~6.2
新しいウェブサイト Ver.4
Home page
- https://ki0722.github.io/BeijingChangyangPark11home/
page
"参考" - https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/ModalWindow
- https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/Slider
- https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/WebGL_Ripples
- https://www.museum-kawakyu.jp/
2021.05.23~5.28
更新
1. ウェブサイト Ver.3
本の感じでページを動かします。
ホームページとspringページだけでサンプルを作りました。
9-https://ki0722.github.io/BeijingChangyangPark9/
作品説明
- 1.電子時代では、紙の本を読む人が少ないので、本の質感を作りたいです。
- 2.本は重いですが、本を覗き込んでいるような感覚があります。
- 3.ケースの簡単な紹介を持っているような気がします、ウェブページはリアルタイムで更新することができます。
4-.雑誌や本を忘れてほしくない。つまり、ウェブは本のような感覚を与えます。
2. ウェブサイト Ver.2
springチューリップ花、summer雨とハスの花、autumn葉、 winter雪の花全面的に落ちる。
4-https://ki0722.github.io/BeijingChangyangPark4/
- ホームページ:写真の spring、summerなどをクリックしてspringページになります。
- 他のページはメニューが普通メニューです。
作品説明 - 1.季節のテーマに応じて、落ちてくるチューリップ、蓮、雨滴、落ち葉、雪片。
- 2.すべての写真と情報が一目でわかります。
3.ウェブサイト Ver.1
メニューの機能と天気予報を増えています.
下部分で写真もメニューの機能です。
10-https://ki0722.github.io/BeijingChangyangPark10/
作品説明
- 1.通常のウェブページと比較して、写真は一目でより明確なウェブページに配置されます。
- 2.各写真の水の波紋、落ちてくる花、葉、雪。ダイナミックな効果がよりよく反映され、個人的な経験の感覚が反映されます。
2021.05.14~5.22
更新
springチューリップ花、summer雨とハスの花、autumn葉、 winter雪の花全面的に落ちる。
4-https://ki0722.github.io/BeijingChangyangPark4/
ホームページ:写真の spring、summerなどをクリックしてspringページになります。
他のページはメニューが普通メニューです。
2021.04.20|調査
面白サイト・面白アイデアのリンク
- https://y-n10.com
- https://all.cast-er.com
- https://www.seed-recruit.com
- https://www.pola.co.jp/wecaremore/
- https://www.utopiaagriculture.com
- https://www.m-chemical.co.jp/saiyo/
- https://quoitworks.com
- https://www.aircord.co.jp/careers
- https://www.m-trust.co.jp さくら動き感じ
XXXXXXX
- ◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
- ◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯