プロジェクトNo.34：layerBoard.js - DEMOたまにサイトに訪問すると、最前面に表示されるアレ。 実はモーダルウィンドウっていう名前のものなんですね。（私も今回初めて知りました） layerBoard.jsは簡単にモーダルを表示させるためのJQueryプラグインです。

プロジェクトNo.33：textillate.js - DEMOtextillate.jsはテキストにアニメーションをかける事ができます。 実際のエフェクトの種類はanimate.cssの機能です。

プロジェクトNo.32：jQuery.Deferred - DEMOjQuery.Deferredはバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。 jQuery.Deferredなしで要素を順にアニメーション表示するにはコールバック関数とdelay()を使えばできるようで…

プロジェクトNo.31：上部に固定ナビゲーション - DEMO画面上部のヘッダーを固定してスクロールしても常時、上部にリンクがある様にする方法。 色んなサイトでよく見られる表現ですが、ページ内リンクでずれるなど、色々気を付けねばいけない事がある様です。…

プロジェクトNo.30：fullPage -> DEMO1画面毎にスクロールできるプラグインです。 縦スクロールはもちろん、横にもスクロールさせてスライドの様にも使えます。

プロジェクトNo.29：画面サイズいっぱいの背景画像 - DEMO ビジュアル重視のサイトでよく使われるテクニックです。

プロジェクトNo.28：jquery.inview - DEMOパララックス（要素出現）も以前自作しましたが、プラグインがあったので使ってみたいと思います。 また、せっかくなのでCSSでPinterest風に表示させてみました。

プロジェクトNo.27：Nikebetterworld Parallax Effect背景画像のパララックスは以前自作しましたが、プラグインがあったので使ってみたいと思います。 また、同梱していたライブラリでサイト内遷移がヌルッと動くスムーズスクロールも実装してみました。

プロジェクトNo.26：gallerifficサムネイル付きでオプション豊富なフォトギャラリーのgallerifficを使ってみたいと思います。 このプラグインはサムネイルにページング機能があるので、画像が多い場合に便利です。 また、プリロードする画像数などを決めれる…

プロジェクトNo.25：flexsliderそろそろ実際に仕事で役立つ（だろう）技術を使えるようにと、様々なプラグインを活用していこうかと思います。 手始めにここで紹介されているプラグインを片っぱしから触っていきます。 【新人向け】簡単にできた！Webサイト…

プロジェクトNo.24：パララックス3前回に続けてパララックス効果を使ったサイト第３弾。 今回はマウスポインタの方向を目玉が追いかける様なパララックスサイトを作って見ました。

プロジェクトNo.23：パララックス2前回に続けてパララックス効果を使ったサイト第２弾。 今回はスクロールすることで背景位置が変わるのと、要素が出現するパララックスサイトを作って見ました。

プロジェクトNo.22：パララックス1パララックスとはparallax=(観察者の位置の移動による)変位、 つまり視差の事で、視点の差を使って立体的な効果を出すことをパララックス効果と言います。 一時期流行った手法ですね。 今回はスクロールすることで要素が変…

プロジェクトNo.21：神経衰弱ドットインストールのレッスンを参考にJavaScriptで神経衰弱を作ってみた。 改良点はカード画像と３段階のレベルを用意した。 今回の記事では、前から気になっていた「全体をfunctionで括る理由」や「onclickをHTML内で書いては…

プロジェクトNo.20：パズルHTML5から利用可能になったドラッグ＆ドロップ専用の新しいイベントや新しいメソッド・属性などを使ってみた。 mousedownやmouseupで無理やりできるものもあるが、Googleドライブの様にローカル環境のデータをドラッグでアップロー…

プロジェクトNo.19：チャットアプリJQueryで結構簡単にAjaxが使えるということで、 せっかくなら非同期通信のメリットを活かせるリアルタイムな簡易チャットを作ってみた。

プロジェクトNo.18：スクラッチくじCanvasを２枚重ねて、前面のcanvasをマウスダウンとマウスムーブで消すといったものを作りました。

プロジェクトNo.17：イライラバーJQueryのお勉強。 前回、JQueryのマウスイベントを利用して描画アプリを作成したが、 今回はその応用としてマウスがオブジェクト上から離れたらゲームオーバーになる、 いわゆるイライラ◯◯を作ってみました。

プロジェクトNo.16：Doodle(Canvas)jQueryとHTML5のCanvasを使って描画ツールを作成しました。 線と四角の描画、色の変更、太さの変更、消去、ギャラリーに追加、ギャラリーのデータを保存する事が可能です。

プロジェクトNo.15：1-1 Architects知り合いの建築家に頼まれて、オリジナルWordpressテーマを作りました。 勉強しながらの初めての仕事だったので、特別価格の晩飯代だけで手を打ちました。 オーダーメイドで作るのって大変。これはたしかに仕事にできるか…

プロジェクトNo.14：Number Tap JavaScriptで簡単なゲームを作りました。 一応スマホでも見れるようにスタイルを設定しましたが、なんか処理が重いのは私だけ？ 参考サイト 【旧版】JavaScriptで作る数字タッチゲーム (全10回) - プログラミングならドットイ…

プロジェクトNo.13：アクションゲーム 前回に引き続き、enchant.jsというHTML5とJavaScriptベースのゲームエンジンで簡単なゲームを作ってみました。ゲームの仕様は、 画面に表示されている敵を全部倒せばクリアです。 スマホからは画面の十字キーをタップで…

プロジェクトNo.12：くまげーenchant.jsというHTML5とJavaScriptベースのゲームエンジンで簡単なゲームを作ってみました。 実は私自身、ゲームプログラミングはこれが初めて。 それでも便利な素材やメソッドがたくさん用意されていて、１日で作ることができ…

プロジェクトNo.11：Ramdom Words(Canvas) HTML5のCanvasを使って文字を描画してみた。 更新する度に位置やスタイルが変わります。 なんかに似てると思ったらビッ○カメラの袋か・・・

プロジェクトNo.10：Stop watch 「スタート/ストップ・リセット」ボタンを用意したシンプルなストップウォッチを作成しました。 シンプルですが、よく使いそうな「時間の計測する」という汎用的な機能をjavascriptで処理しています。

プロジェクトNo.9：Expansion 読み込まれる度に画像がランダムに配置され、任意の画像へマウスオーバーすると画像を拡大するというものを作ってみた。

プロジェクトNo.8：ProgressBar JavaScriptを使ってプログレスバーを作ってみました。今回のポイントは以下の通り。 画像を読み込む度に関数を呼び出す｜ShowProg() 画像を全て読み終わった時にプログレスバーを消す｜body onload

プロジェクトNo.7：Bomb JavaScriptのランダム関数を使用して、複数用意したボタンの中から、毎回異なる1つのボタンだけ違うアクションをするというものを作成した。

プロジェクトNo.6：One day今回からJavaScriptも使って開発していきます。 JavaScriptを使用して、時刻によって朝昼晩夜の４パターンのテキストとスタイルを変更するというものを作成しました。

プロジェクトNo.5：Horizon水平線から太陽が昇る様子を、positionプロパティを使って表現してみた。