かなり前に「jQueryでページ遷移時にアニメーション効果をつけてみる。」と題して、
jQueryでページ遷移時に画面をスライドさせるアニメーション効果をつけるSCRIPTを紹介しましたが、
どうやらブラウザによって、画面遷移後にブラウザの「戻る」ボタンで前画面に戻ると
遷移時にアニメーション用の動作として操作したCSSの指定が残ってしまって
画面が真っ白になることがあったので、その不具合対応版を作ってみました。
jQuery PAGE SLIDE MOVE
まずはサンプルから
【改訂版】サンプルはこちら※「次へ」をクリックしていくとページ全体がスライドして遷移します。
画面内の「次へ」などをクリックして画面遷移した後、
ブラウザの「戻る」ボタンを押しても画面が真っ白にな現象は発生しないと思います。
※以前の記事のサンプルはブラウザによって画面が真っ白になります。
以前の記事の内容から
HTMLやCSSについては特別な指定は追加していません。
SCRIPT側にでページ遷移後に
画面の要素を外に飛ばした後に元に戻す指定を加えます。
◆SCRIPT
$(function(){
$('#container:not(body#index #container)').css({display:'block',marginLeft:$(window).width(),opacity:'0'});
$('#container:not(body#index #container)').animate({marginLeft:'0px',opacity:'1'},500);
$('body#index #container').css({display:'block',opacity:'0'});
$('body#index #container').animate({opacity:'1'},500);
$('a').click(function(){
var pass = $(this).attr("href");
$('#container').animate({marginLeft:'-=' + $(window).width() + 'px',opacity:'0'},500,function(){
location.href = pass;
setTimeout(function(){
$('#container').css({marginLeft:'0',opacity:'1'})
},100);
});
return false;
});
});
コンテンツ要素をブラウザ幅分アニメーションで外へ飛ばした後
「location.href = pass;」でリンク先へ遷移し、
その後は「setTimeout」を使ってアニメーションさせた要素に対して
元の位置に戻す指定を加えておきます。
この指定を入れておくことで
遷移後にブラウザの「戻る」ボタンで前画面に戻った後も
コンテンツ要素が元の位置に戻った状態になります。
画面遷移時のアニメーション動作は
スライドのみならず、フェードなど様々な魅せ方が出来ることに加えて、
スマートフォン向けサイトでは、何かと効果的に使える演出だと思うので
今後もいろいろ組み込んでいきたいです。
ご参考までに。。。
横スライドでページ遷移 | taniblog | 2011.11.24 11:51
[...] http://black-flag.net/jquery/20110921-3462.html カテゴリー: 未分類 作成者: tanikei パーマリンク [...]
こんにちは。はじめまして。
こういった動きのscriptを探していて、こちらの記事にたどりつきました。
かなり理想に近く、すばらしいscriptだと思います。
ただ、WordPressに実装してみたところ、スライドした後に一瞬
遷移前のページが表示されて、すこしぎこちない動きになってしまいます。
どういった原因が考えられるでしょうか？
コメントありがとうございます！
なるほど。
ページ遷移などで負荷が掛かるページの場合は、そういった現象になってしまうのですね。
こちらですぐにその現象を再現できる同じ環境を作れないので、憶測になってしまうのですが
スクリプトの一部を下記のように変えてみて試して頂けますか？
スクリプト内で「setTimeout」という指定をしているところがあります。
そこの３行を以下のように書き換えてみてください。
——————————————————–
setTimeout(function(){
$(‘#container’).css({marginLeft:’0′,opacity:’0′}).stop().animate({opacity:’1′},500)
},100);
——————————————————–
※変更したのは真ん中の行のみです。
ページ遷移後に指定しているアクション実行が一瞬表示されてしまっているのか
原因が特定できないのですが、上記変更でどの様な状態になるか、
一度確認してみていただけますでしょうか。
よろしくお願いします。
さっそくご返信いただきありがとうございます！
書き換えてみたのですが、やはり一瞬チラつくようです。
試しに下記の部分をコメントアウトしたところ、
スムーズに表示ができるようになりました。
（改訂前の状態になるのでしょうか？）
setTimeout(function(){
$(‘#container’).css({marginLeft:’0′,opacity:’1′})
},100);
ダメでしたか。。。
失礼しました。
——————————————————–
setTimeout(function(){
$(‘#container’).css({marginLeft:’0′,opacity:’1′})
},100);
——————————————————–
の部分を削除すると、ブラウザによって、
画面遷移後に戻るボタンを押して前のページに戻ると
画面が真っ白になってしまうことが起こってしまいます。。。
（真っ白になっても更新ボタンを押せば元に戻るのですが。）
他に考えられるやり方は
このスクリプト部分の処理開始時間を遅めに設定する為に
最後の行に「100」と設定してある値を
——————————————————–
setTimeout(function(){
$(‘#container’).css({marginLeft:’0′,opacity:’1′})
},1000);
——————————————————–
など、大きくしてみてはいかがでしょう？
あれこれ手探りな状態になってしまい申し訳ありませんが
お手すきの際に試してみてください。。
よろしくお願いします。
お返事が遅くなり申し訳ございません。
最後の行の値を大きくしてみると
チラつきが解消されました！
本当に助かりました。ありがとうございました。
いつも大変助かっており、勉強させていただいております。
質問なのですが、ページ遷移時のアニメーションは正常に動くのですが、
リンク先のページに遷移される際に一瞬白い画面が出て、ページが流れてくる部分がうまくいきません。
すみません説明下手なので、わかりやすく表現しますと、
（ページ１） ○スライドしながら遷移成功
↓
（ページ２） ×一瞬白い読み込み画面が出て、流れてくるアニメーション失敗
恐らく、Ajaxを入れていないので遷移時に毎回ページを読み込んでいてうまくいっていないのだと思います。
Ajaxは必須でしょうか？
＞kentさん
コメントありがとうございます。
この記事で紹介しているサンプルも同じ現象が起こるということでしょうか？
AjaxというよりｊQueryファイルは必須になります。
遷移後のページでも、ロード時にアニメーションを実行させる指定が必要になりますので
サンプルファイルからスクリプトをご参考にしてみてください。
よろしくお願いします。
初歩的な質問で申し訳ないのですが…
右から左に表示させるのではなく、左から右へ表示させるのはどうしたらいいですか？
＞mama-chanさん
コメントありがとうございます！
このスクリプトをご活用いただき嬉しく思います。
ご質問頂きました、左から右へ遷移させる場合ですが
スクリプト２行目にある
「marginLeft:$(window).width()」の指定を
「marginLeft:-($(window).width())」として
７行目あたりの
「marginLeft:’-=’ + $(window).width() + ‘px’」の指定を
「marginLeft:’+=’ + $(window).width() + ‘px’」とすることで変更できます。
サンプルファイルも用意しましたので
必要であれば下記URLからダウンロードしてみてください。
http://black-flag.net/devel/jQuerySlideMove/03/jQuerySlideMoveLR.zip
よろしくお願いします。
お返事遅くなりました、すみません！ 丁寧なご説明本当にありがとうございました☆
早速できました、ありがとうございます！
ちなみに…なんですが…2カラム左部分にメニューを設置して、右のメインコンテンツ部分をメニューから飛び出るように表示させるのはどうすればいいのでしょうか…？（全く初心者で申し訳ないです。）
＞mama-chanさん
ご連絡ありがとうございます。
理想の動作に近づいているようでよかったです。
２カラムにしたページのメインコンテンツ部分にアニメーションを実行させる件については
実際のHTML構成を見ていないので何とも言えないのですが、
当記事で紹介しているスクリプト内のあちこちに
「#container」とID指定している箇所があると思いますが
それが移動させる対象になるので、
そのID部分を実装されるHTMLの動かしたい部分のIDに書き換えてみてください。
（IDではなくてクラスでも大丈夫ですが、その際は「#」の部分が「.」ピリオドになります。）
お試しください。
よろしくお願いします。
ありがとうございました。なんとか形になりました。
ちなみに、これを設置すると、pagetopへの時も画面遷移されてしまうのですが、解消法はありますか？
実装したHTMLの動かしたい部分のID内にあります…。
＜a href=”#category” rel=”nofollow”＞ページトップへ＜/a＞
＜!– / #アニメーション用 –＞
$(function(){
$(“#pagetop a”).click(function(){
$(‘html,body’).animate({ scrollTop: $($(this).attr(“href”)).offset().top }, ‘slow’,'swing’);
return false;
})
});
＞mama-chanさん
無事に動作しているようで安心しました。
ページTOPへのリンクなどと動作を分けるには
ページ遷移でアニメーションをつけるリンクに対し
クラスをつけて（仮にpagemoveとします）
当記事スクリプト内の
——————————————————–
$(‘a’).click(function(){
——————————————————–
の部分を
——————————————————–
$(‘a.pagemove’).click(function(){
——————————————————–
としてスクリプトを実行させるリンク対象を
クラスのついたリンクタグのみにすることで
実現できると思います。
お試しください。
よろしくお願いします。
ありがとうございます！できました！！
本当にありがとうございました。もっと勉強します！！
＞mama-chanさん
無事に思い通りの動作になったようでよかったです。
jQueryも基本的な仕組みが分かってしまえば
簡単にいろいろ遊べる優しいスクリプトだと思うので、
あれこれ試してみてください。
また何かあればご連絡ください。
よろしくお願いします。
度々失礼致します。http://www.womb.co.jp/#!/schedule/index.html のサイトのように、メニューをクリックすると要素内で左から右へ画面遷移？するにはどうしたらいいのでしょうか？
お手数お掛けします…参考アドバイスでも構いません…宜しくお願い致します！
＞mama-chanさん
コメントありがとうございます。
ご質問いただいた内容についてですが
サイト（ページ）構成など分からないと何とも言えませんが
以前にご紹介した、当記事のスクリプトでスライドする部分をIDで制御する方法か、
もしくはカルーセルパネル（当ブログでも紹介しています）UIを使って実現する方法はいかがでしょうか。
参考に頂いたURL先のサイトでやっているスクリプトとは少々違いますが
同じ様な動作を実現することは可能かと思っています。
よろしくお願いします。
はじめまして。
質問が有るのですが、
JSで指定のIDがついたDIV内にfloatさせた２カラムの要素を配置した所、
スライドの際にカラムが崩れてしまうのですが、これは回避しようがない現象なのでしょうか？
よろしくお願いいたします。
＞tamagoさん
コメントありがとうございます。
ご質問いただきましたfloatした2カラムのスライドについてですが
当方で同じ様なレイアウトのページにこの動作を実装した時には
スライドする際にもレイアウトは崩れずに移動させることができていました。
CSSでのカラム指定方法を調整してみたり
回り込み解除が正常に行われているか、など確認してみてください。
よろしくお願い致します。
こんにちは！ BlackFlagさんのサイトで紹介されているjQueryなど
いつも参考にさせていただいております！！
ちょっとご質問なのですが、このスクリプトはあくまでＰＣ向けで
スマートフォンには応用しないほうがよいのでしょうか？
よろしくおねがいいたします。
＞tomomi さん
コメントありがとうございます。
スクリプトをご活用いただいているようで嬉しく思っております！
この記事で紹介しているスクリプトに関してですが
以前にスマートフォン向けサイトで使用して、
動作的には問題なく実装できていたので大丈夫だと思っています。
実装してみておかしな動きになった場合はご連絡くださいませ。
よろしくお願い致します。
お返事ありがとうございます！＾＾
実装してみましたら、別ページを読み込んでいる時間は多少はかかってしまうので、
やはりＰＣでみるようなスムーズな動きにするためにはAjaxなど使うしかないのかな？！と思いました。
それでも十分素敵な動きだと思います！＾＾
ありがとうございます！
＞tomomiさん
ご返信ありがとうございました。
遷移後のページのコンテンツボリュームが多かったりする際には
読み込みに時間が掛かってしまうかもですね。。
アプリの動作のようなスムーズな切り替えは難しいかと思いますが
おおまかにアニメーション動作をつけることは出来るかと思います。
もっと使いやすいスクリプトが出来たら
またここで紹介させていただきます。
よろしくお願いします。
こんにちは。
当記事のスクリプトを参考にさせていただきました。
jquery mobileを使ったiphone向けのサイトに当記事スクリプトを試してみたところ、PCのブラウザ（firefox、safari）ではページ遷移の効果について不具合なく確認できるですが、iphone実機(ios4.3、ios5共に)ではページ遷移がされず遷移前の画面（元画面）を表示してしまいます。
ajax遷移が一応ウリなjquery mobileを利用しているのにこのスクリプトを使うのもなんとも・・・なのですが。
PCで見れるのにiphoneで見れない理由がわからなくて・・・
考えられる原因等がわかりましたらお返事頂けますでしょうか。
よろしくお願いします。
＞nikaさん
コメントありがとうございます！
当記事のスクリプトをご活用いただいているようで
とても嬉しく思っております。
jQueryMobileを使っての動作に関してですが
このスクリプトをjQueryMobileを使って試したことがなく、
申し訳ないのですが何とも見当がついていない現状です。。。
推測になってしまいますが、
このスクリプトではクリックされたリンクのhrefのパスを一度変数に入れて処理しているので、
その辺りの構成が、現在nikaさんの方でjQueryMobileを使って作られているページ構成と
うまくかみ合っているかどうか、など確認してみてください。。。
よろしくお願いします。
ページ遷移をスライド形式にしてみた ⇒ logw-ログゥ 個人的な記録用- | 2012.09.23 0:54
[...] gwのページ遷移をスライド形式にちょっとしてみました。jQueryでページ遷移時にスライドアニメーションをつけてみる【改訂版】 さんのページのスクリプトを使わせていただいています [...]
突然の質問申し訳ございません。
初めまして。
以前よりこちらを参考にさせていただき、slidemoveを使わせていただいております。
ページ内のリンクにlightboxの効果を持たせたいと思っているのですが、なかなかうまくいきません。
恐らく、prototype.js との競合だとは思いますが、競合を防ぐ為調べていますが、やはりうまくいきません。
なにか方法等ありますでしょうか？？
＞shogoさん
コメントありがとうございます。
このスライドスクリプトをご活用いただいているようで
とても嬉しく思っております。
ご質問いただきました、
prototype.jsとの共存の際には
———————————————————
・jQueryと他のライブラリの共存方法
http://black-flag.net/jquery/20091202-837.html
———————————————————
こちらの記事で紹介しているもののように
———————————————————
jQuery.noConflict();
var j$ = jQuery;
———————————————————
といった記述を追加して、
jQueryでの動作記述を「$()」ではなく「j$()」で扱うようにすることで
共存させることが可能になるかと思います。
ご確認ください。
よろしくお願いします。