読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【62:PageTopへ戻る】使えるいい感じページトップへ戻るリンク

プロジェクトNo.62:PageTopへ戻る - DEMOページトップへ戻るリンクを簡単に実装しようと思うと、 <a href="#header">PAGE UP</a> みたいなのをfooterに配置するなど考えられるが、 今回実装するのは以下のようなもの。 リンクは画面下部に常に表示 ただし、ある程度スクロールした…

【61:videoタグで背景動画】HTML5のvideoタグで動画を背景に使う

プロジェクトNo.61:videoタグで背景動画 - DEMO前回はjQueryプラグインを使用しましたが、 HTML5のvideoタグでも実現できました。 またWebサイトで動画を使う際に付けておきたい、サウンドのon/offも実装してみました。

【60:tubular】Youtubeの動画を背景に使う

プロジェクトNo.60:tubular - DEMOYoutubeの動画を背景全面に表示・再生できるJQueryプラグインがあったので試してみた。

【オートコンプリート】JQueryUIのautocompleteで入力補完機能を実装

プロジェクトNo.59:オートコンプリート - DEMO先日、面接に行った企業から出された課題の一つに「オートコンプリート」があったので実装してみました。

【52:Hammer.js】タッチジェスチャーを実装

プロジェクトNo.52:Hammer.js - DEMOスマホサイトを作る際に実装できればUI的に良いのが、タップやスワイプなどのタッチジェスチャー。 Hammer.jsはそれを簡単に実装できるプラグインです。

【48:スライダーまとめ】いろんなスライダープラグインを使ってみた

プロジェクトNo.48:スライダーまとめ - DEMO何かとよく使うスライダーのJQueryプラグインを汎用性が高いものから個性的なものまで色々使ってみました。

【44:particles.js】幾何学的なアニメーションを表現する

プロジェクトNo.44:particles.js - DEMO日々、色んなライブラリが出てきて、作ってる人ってすげーなーと思いながら、 私はいつもありがたく利用させてもらっています。 たまには作る側に回ってもいいけど、やっぱり色んなライブラリを触れておく事でいざと…

【41:jquery-ui 】jquery-uiを使って簡単に様々な表現を行う

プロジェクトNo.41:jquery-ui - DEMO久しぶりの投稿です。 ここ最近は学生向けのWebデザインコンペティションの企画などしていました。 とはいうものの、自分自身まだまだ勉強すべきということは十分承知なので、ブログも再開して頑張っていきたいと思って…

【38:matter.js 】重力やバウンドを表現できる物理演算エンジンを使ってみる

プロジェクトNo.38:matter.js - DEMO重力、バウンド、慣性。これらを表現するには数学的知識とそれを実装する根気が必要です。 そんなものは持ち合わせていない私は、先人が作った素晴らしい物理演算エンジンのmatter.jsを使うことにしました。 なんとスマ…

【37:自作JQueryプラグイン 】クリックするとメッセージ表示するJQueryをプラグイン化

プロジェクトNo.37:自作JQueryプラグイン - DEMOこれまで既存のJQueryプラグインをいくつか使ってみたが、 自分でも簡単に作れるようなのでやってみた。 仕様は、クリックするとメッセージが表示されるものになります。

【34:layerBoard.js】ページアクセス時に最初に表示されるアレ(モーダル) | JQueryプラグイン

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

【33:textillate.js】テキストのアニメーション | JQueryプラグイン

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

【32:jQuery.Deferred】要素を順にアニメーション表示

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

【31:ナビゲーションヘッダーの固定】上部に固定ナビゲーション

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

【30:fullPage】1画面毎にスクロール | JQueryプラグイン

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

【28:jquery.inview】:パララックス(要素出現) | JQueryプラグイン & CSSでPinterest風スタイル

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

【27:Nikebetterworld Parallax Effect】パララックス+リンク押下でスムーズなスクロール | JQueryプラグイン

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

【26:galleriffic】サムネイル付きでオプション豊富なフォトギャラリー | JQueryプラグイン

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

【25:flexslider】レスポンシブな画像スライダー | JQueryプラグイン

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

【24:パララックス3】マウスポインタの方向に目玉を動かす

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

【23:パララックス2】スクロールで背景位置の変更&要素が出現

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

【22:パララックス1】スクロールで要素が変形

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

【19:チャットアプリ】JQueryのAjaxとPHPでリアルタイムに外部データを読み書きする

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

【18:スクラッチくじ】Canvasをレイヤーの様に使う

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

【17:イライラバー】マウスを図形上から離さずにゴールを目指すゲーム

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

【16:Doodle】Canvasでお絵描きアプリを作る

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