one's way blog

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

2015-07-01から1ヶ月間の記事一覧

【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=(観察者の位置の移動による)変位、 つまり視差の事で、視点の差を使って立体的な効果を出すことをパララックス効果と言います。 一時期流行った手法ですね。 今回はスクロールすることで要素が変…

【21:神経衰弱】JavaScriptで神経衰弱

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

【20:パズル】HTML5のドラッグ&ドロップAPIを使ったパズル

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

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

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

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

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