ホーム

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

 

実行

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: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://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: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://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

Pocket
LinkedIn にシェア

エンジニアにおすすめできる本

Card image cap
リーダブルコード

より良いコードを書くためのシンプルで実践的なテクニック

Card image cap
Webを支える技術

HTTP,URI,HTML,そしてREST

Card image cap
誰でもPythonで作れる

儲かるAIとソフトウェアの作り方

Card image cap
プログラマが知るべき97のこと

現場で使える実践哲学のマスターピース

Card image cap
情熱プログラマー

時代を超えて。ソフトウェア開発者の幸せな生き方

Card image cap
アジャイルサムライ

プログラミング達人開発者への道

Card image cap
Rubyを作った男 まつもとゆきひろ

コードの世界 スーパー・プログラマになる14の思考法

ご提供 sponsor
 

Meee!(ミー)は、ビジネスからプライベート利用まで、個人のスキルを気軽に売り買いできるスキルマーケットです。カテゴリや居住地から、検索することが可能です。

 

ランゲージエクスチェンジは、ネイティブスピーカーと気軽にマッチングできる言語交換プラットフォームです。あなたの地元に住む外国人を探したり、留学や海外移住の前に、現地のネイティブスピーカーと繋がることもできます!

宣伝
 

りょすけトークchは、仕事や私生活をより豊にするYouTubeチャンネルです。文献(本、映画、論文)から役に立つ情報をまとめ、生涯にわたり役に立つ哲学をお届けしています。是非、チャンネル登録してみてね

-ホーム

Copyright© offブログ! , 2021 All Rights Reserved Powered by AFFINGER5.