- 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ファイルをウェブブラウザで開く。
http://s-fukushima.sakura.ne.jp/domino_ver1.html
- 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.
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/
├─ 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)
1、all files do fork and this all files do clone in local.
2、this local files open to web browser.