スマホの傾きを検出してParallax効果を作れる「parallax.js」:phpspot開発日誌
parallax.js スマホの傾きを検出してParallax効果を作れる「parallax.js」 キャンペーンサイトなどでやると印象がグッとアップしそうなエフェクトが作れるっぽいですが、このデモは必見ですね。 画像は以下のようにulでリスト形式にしてレイヤーをずらす形で実現されるようです。 やってることの割りにはJSで比較的簡単に実装ができそうです 関連エントリ レスポンシブなパララックス効果付きサイトを作るフレームワーク「CoolKitten」 パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 パララックス効果を作るスクリプトやプラグインのまとめ レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
