2015-07-01から1ヶ月間の記事一覧
プロジェクトNo.28:jquery.inview - DEMOパララックス(要素出現)も以前自作しましたが、プラグインがあったので使ってみたいと思います。 また、せっかくなのでCSSでPinterest風に表示させてみました。
プロジェクトNo.27:Nikebetterworld Parallax Effect背景画像のパララックスは以前自作しましたが、プラグインがあったので使ってみたいと思います。 また、同梱していたライブラリでサイト内遷移がヌルッと動くスムーズスクロールも実装してみました。
プロジェクトNo.26:gallerifficサムネイル付きでオプション豊富なフォトギャラリーのgallerifficを使ってみたいと思います。 このプラグインはサムネイルにページング機能があるので、画像が多い場合に便利です。 また、プリロードする画像数などを決めれる…
プロジェクトNo.25:flexsliderそろそろ実際に仕事で役立つ(だろう)技術を使えるようにと、様々なプラグインを活用していこうかと思います。 手始めにここで紹介されているプラグインを片っぱしから触っていきます。 【新人向け】簡単にできた!Webサイト…
プロジェクトNo.24:パララックス3前回に続けてパララックス効果を使ったサイト第3弾。 今回はマウスポインタの方向を目玉が追いかける様なパララックスサイトを作って見ました。
プロジェクトNo.23:パララックス2前回に続けてパララックス効果を使ったサイト第2弾。 今回はスクロールすることで背景位置が変わるのと、要素が出現するパララックスサイトを作って見ました。
プロジェクトNo.22:パララックス1パララックスとはparallax=(観察者の位置の移動による)変位、 つまり視差の事で、視点の差を使って立体的な効果を出すことをパララックス効果と言います。 一時期流行った手法ですね。 今回はスクロールすることで要素が変…
プロジェクトNo.21:神経衰弱ドットインストールのレッスンを参考にJavaScriptで神経衰弱を作ってみた。 改良点はカード画像と3段階のレベルを用意した。 今回の記事では、前から気になっていた「全体をfunctionで括る理由」や「onclickをHTML内で書いては…
プロジェクトNo.20:パズルHTML5から利用可能になったドラッグ&ドロップ専用の新しいイベントや新しいメソッド・属性などを使ってみた。 mousedownやmouseupで無理やりできるものもあるが、Googleドライブの様にローカル環境のデータをドラッグでアップロー…
プロジェクトNo.19:チャットアプリJQueryで結構簡単にAjaxが使えるということで、 せっかくなら非同期通信のメリットを活かせるリアルタイムな簡易チャットを作ってみた。
プロジェクトNo.18:スクラッチくじCanvasを2枚重ねて、前面のcanvasをマウスダウンとマウスムーブで消すといったものを作りました。