ドミノ倒し風サイト version1.0

概要

• HTML5,CSS3,jQueryを使用し作成したドミノ倒し風のアニメーションが見れるサイトです
• レスポンシブル非対応
• ポートフォリオ用サイト

説明

本サイトはポートフォリオ用の自分の技術を紹介するためのサイトになります。
2か月程、webプログラミングの練習から離れていたため、HTML,CSS,jQueryの久しぶりの練習と、css transformの練習でドミノ倒し風のサイトを製作してみました。
cssのtransitionプロパティで移動させ、jqueryのon()でトリガーをtransitionendにすることで、順々にアニメーションするようにしました。
フリーですので必要な方はご自由に使用願います。  

ファイルの構成

ファイルの構成/
├─ README.md
├─ jQuery_base                                     # jQuery保存フォルダー
├─ fonts                                           # webフォント(Font Awesome)保存フォルダー
├─ domino_ver1.html                                # トップページ（自身でコーディング）
├─ css/
|    └─ domino_ver1                                # CSS保存フォルダー(Font Awesomeのcss保存)
|           ├─ img                                 # 画像保存フォルダー（cssに埋込む用）
|           └─ domino_ver1.css                     # CSSファイル（自身でコーディング）
└─ js/
    └─ domino_ver1                                 # jsファイル保存フォルダー
           └─ domino_ver1.js                       # jsファイル（自身でコーディング）   

インストール方法

1、全てのファイルをフォークし、ローカルにクローンを作成。
2、ローカルに保存したHTMLファイルをウェブブラウザで開く。

デモサイトURL（ポートフォリオURL）

http://s-fukushima.sakura.ne.jp/domino_ver1.html

---

---

Website of animation of domino version1.0

Overview

• this this website concept is animation of domino.
• use HTML5,CSS3,jQuery.
• not correspondence of responsive design.
• my web design skill is this web site.

Description

I didn't practiced web programing for 2 month.
I start practiced.
use transition of css property and transitionend of trigger on jquery.

Component file

Component file/
├─ README.md
├─ jQuery_base                                     # folder of jQuery files.
├─ fonts                                           # folder of web fonts.(saving in this folder at Font Awesome.)
├─ domino_ver1.html                                # Top page.（my coding）
├─ css/
|   └─ domino_ver1                                 # folder of css(saving in this folder at css of Font Awesome.)
|          ├─ img                                  # folder of images.（image of this folder enter to css.）
|          └─ domino_ver1.css                      # file of top page css.（my coding）
└─ js/
    └─ domino_ver1                                 # folder of js.
           └─ domino_ver1js                        # file of top page js.(my coding)

Install

1、all files do fork and this all files do clone in local.
2、this local files open to web browser.

URL of Demo site(URL of my portfolio site)

http://s-fukushima.sakura.ne.jp/domino_ver1.html