ワイズリマインダー

jQueryとCSS3でページ推移時にエフェクトをかける

最前面に透明のレイヤーを作成し、
アンカーリンクをクリックした際に、
ゆっくりと透明レイヤーを表示させる。

DEMO

body::after{
	content:'';
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#ccecfa;
	pointer-events:none;
	z-index:9999;
	opacity:0;
	-webkit-transition:opacity 0.8s ease;
	transition:opacity 0.8s ease;
}
body.fadeout::after{
	opacity:1;
	pointer-events:auto;
}

(function($){
  $(window).on('load',function(){
    $('body').removeClass('fadeout');
  });
  $(document).ready(function(){
    $('a:not([href^="#"]):not([target])').on('click', function(e){
      e.preventDefault();
      var url = $(this).attr('href');
      if(url === '') return false;
      $('body').addClass('fadeout');
      setTimeout(function(){
        window.location = url;
      }, 800);
      return false;
    });
  });
})(jQuery);

• ≪新しい記事へ
• 古い記事へ≫

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。