parallax.jsをいじってパララックスのデモ作ってみた。
2012年2月17日 カテゴリ： Web制作 parallax.jsをいじってパララックスのデモ作ってみた。 Tweetちょっと前に視差効果のあるパララックスサイトまとめなどがよくホットエントリーに上がってきて、「自分もこんなの作ってみたいなー」と思っていたのでトライしてみました。 チュートリアルは下記サイトを参考にしています。 話題になったNikebetterworldに良く似たサイトを作って解説をしてくれています。 Nikebetterworld Parallax Effect Demo そして出来あがったのはこちらのデモサイトです。 以下、メモがわりの解説です。 まず、チュートリアルのサイトからサンプルファイルをダウンロードしてHTMLをみると次のようなjsファイルが読み込まれているのがわかります。 <script type="text/javascript" src="https:
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
パララックスサイトを簡単に作成できるjQueryプラグイン8選
twitter facebook hatena google pocket いまさらな気もしますが、パララックスなサイトを簡単に実現するためのjQueryプラグインを紹介します。 sponsors #1 Nikebetterworld Parallax Effect Demo | Ian Lunn 老舗な感じのところですね。 jQuery localscrollとか、jQuery scrollToを駆使しています。 URL：http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/ demo：http://ianlunn.co.uk/plugins/jquery-parallax/ #2 JoelBesada/scrollpath GitHub 見えないパスにそってスクロールしていって気持ちいい感じです。 こんな記述が必
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iOS/Android/PCで使えるパララックスページ作成用jQueryプラグイン「skrollr」:phpspot開発日誌
