こんにちは、うっちーです。 先日、スマホ用サイトを作ってたのですが、パララックス効果を入れるのに四苦八苦したので、備忘録も兼ねてシェアしたいと思います。 Jqueryでパララックス 最初はJqueryを使って普通に作ってたんです。 こんな感じで。 ＜HTML＞
スマホ対応パララックス！簡単便利な skrollr の使い方 | 株式会社メイプルシステムズ
こんにちは、うっちーです。 先日、スマホ用サイトを作ってたのですが、パララックス効果を入れるのに四苦八苦したので、備忘録も兼ねてシェアしたいと思います。 Jqueryでパララックス 最初はJqueryを使って普通に作ってたんです。 こんな感じで。 ＜HTML＞
パララックス効果を作るスクリプトやプラグインのまとめ:phpspot開発日誌
Parallax Scrolling Scripts and Plugins | Impressive Webs パララックス効果を作るスクリプトやプラグインのまとめ。 最近では国内でもちらほら見かけるようになったパララックスなデザイン。 一言にパララックスといっても色々な実装があり、どれも斬新なものになっていて、見ておくだけでも参考になるであろう物が満載 こういう今では真新しいような技術も数年後には新しいテクニックが出てきていて、陳腐化したり応用されて汎用的なものになったりと今後も技術の進歩が楽しみですね 関連エントリ パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル＆サンプルDL
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
[JS]パララックス、スライドなど、スクロール時のエフェクトをよりスムーズにしたスクリプト -SuperScrollorama
パララックスをはじめ、フェードやスライド、トゥイーンなど、多種多様なアニメーションに対応している、「スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ」で紹介した「scrollorama」を強力にパワーアップしたjQueryのプラグインを紹介します。
scrollorama
How To Use Disclaimer: This is an experimental, just-for-fun sort of project and hasn’t been thoroughly tested. Design and build your site, dividing your content into blocks. ★ ★ ★ Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter. $(document).ready(function() { var scrollorama = $.scrollorama({ blocks:'.scrollblock' }); }); ★ ★ ★ Target
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スクロールに応じてパララックス効果を出せるjQueryプラグイン・scrolloramaを使ったプレゼンテーションサンプル
