OFF.TOKYO：プログラミング課題を抱えてる人を助けるWebブログ

jsで画面遷移のアニメーション

藤沢瞭介(Ryosuke Hujisawa)
2017年9月12日

 

実行

on.gif

html

トップページ

one.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link href='https://fonts.googleapis.com/css?family=Roboto:700,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="styles_screen_transition.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="pjax.min.js"></script>
    <script src="pjax_test.js"></script>
</head>
<body class="fadeout">
  <section class="page one">
    <article>


<div class="example">
  <img class="bg" src="top.png" alt="" />
  <a href="next.html" class="navigate-anchor">はじめる</a>
</div>
    </article>
  </section>
 </body>
</html>

遷移先

next.html
<!DOCTYPE html>
<html lang="ja" class="no-js">
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- <title>ページ2 | ページ遷移エフェクトデモ</title> -->
<link href="https://fonts.googleapis.com/css?family=Work+Sans:200" rel="stylesheet">




<link rel='stylesheet' href="styles_screen_transition.css" type='text/css' media='all' />
<body class="fadeout">


<section class="page two">
  <article>
    <h1>Page Two</h1>
    <a href="three.html" class="navigate-anchor">Move to Next Page</a>
  </article>
</section>

<h1>Page Two</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>
<script src="script_screen_transition.js"></script>
</body>
</html>

2個目の遷移先

three.html

<!DOCTYPE html>
<html lang="ja" class="no-js">
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>ページ3 | ページ遷移エフェクトデモ</title>
<link href="https://fonts.googleapis.com/css?family=Work+Sans:200" rel="stylesheet">
<link rel='stylesheet' href="styles_screen_transition.css" type='text/css' media='all' />
<body class="fadeout">
<section class="page three">
  <article>
    <h1>Page Three</h1>
    <a href="one.html" class="navigate-anchor">Move to First Page</a>
  </article>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>
<script src="script_screen_transition.js"></script>
</body>
</html>

javascript

pjax_test.js
$(window).on('load', function(){
  $('body').removeClass('fadeout');
});

$(function() {
  // ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
  $('a:not([href^="#"]):not([target])').on('click', function(e){
    e.preventDefault(); // ナビゲートをキャンセル
    url = $(this).attr('href'); // 遷移先のURLを取得
    if (url !== '') {
      $('body').addClass('fadeout');  // bodyに class="fadeout"を挿入
      setTimeout(function(){
        window.location = url;  // 0.8秒後に取得したURLに遷移
      }, 800);
    }
    return false;
  });
});
pjax.mini.js
長いので割愛。DLしてください
script_screen_transition.js
var fadeTime = 800,
    fadeSelector = 'fadeout';
$(function() {
  $('a:not([href^="#"]):not([target])').on('click', function(e){
    e.preventDefault();
    url = $(this).attr('href');
    if (url !== '') {
      $('body').addClass(fadeSelector);
      setTimeout(function(){
        window.location = url;
      }, fadeTime);
    }
    return false;
  });
});
$(window).on('load', function(){
  $('body').removeClass(fadeSelector);
});

css

styles_screen_transition.css
img.bg {
  width: 100%;
  height: 100%;
}


.example {/*親div*/
  position: relative;
  }

.example a {
  position: absolute;
  color: white;/*文字は白に*/
  font-weight: bold; /*太字に*/
  font-size: 2em;/*サイズ2倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  top: 0px;
  left: 0px;
  }

.example img {
  width: 100%;
  }








* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*:before, *:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  font-family: 'Work Sans', Arial, "Hiragino Kaku Gothic Pro W3", Meiryo, sans-serif;
  text-align: center;
  margin: 0 auto;
}
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  -webkit-transition: opacity .8s ease;
  transition: opacity .8s ease;
}
body.fadeout::after {
  opacity: 1;
}
body.fadeout article{
  -webkit-transform:scale(1.2);
  transform:scale(1.2);
}
section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;
  color: #464646;
  background-color: #fff;
  overflow:hidden;
}
section.page.two {
  color: #fff;
  background-color: #1CBABC;

}
section.page.three {
  color: #fff;
  background-color: #CE5973;
}
article {
  display: table-cell;
  vertical-align: middle;
  -webkit-transition: transform .8s ease-out;
  transition: transform .8s ease-out;
}
article h1 {
  font-size: 60px;
  font-weight: normal;
  margin-bottom: 3vw;
}
article .navigate-anchor {
  display:inline-block;
  font-size: 22px;
  line-height: 44px;
  padding: 0 14px;
  text-decoration:none;
  color: #fff;
  background-color: #444;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.26);
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
article .navigate-anchor:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.36);
}
article .navigate-anchor:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

github

gitHub

藤沢瞭介(Ryosuke Hujisawa)
  • 藤沢瞭介(Ryosuke Hujisawa)

  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！

未整理記事