BLOG ブログ

ホームページ制作
BLOG
動きをつけてワンランクアップ！ページ遷移アニメーションまとめ【デモ付き】

動きをつけてワンランクアップ！ページ遷移アニメーションまとめ【デモ付き】

更新日：2022/12/02

ページ遷移アニメーションとは、ホームページを訪れた時やページを移動した時などの、ページが切り替わるタイミングに付けるアニメーション演出のことです。
移動という単調な動きにスライドやフェードなどのアクセントをつけることで、Webサイトならではのリッチな表現を楽しむことができます。

例えば、以下のようなものを作ることが出来ます。
【デモ】上から下へ背景色が移動する

Webサイトを作成していく中で、「もう少し動きが欲しいな…」と感じることがありませんか？
スクロールしたら要素がふわっと表示されたり、背景に図形がふわふわと舞っているような動きがありますが、デザインによっては実装が難しい場合があります。
例えば、「ニューモーフィズム」で作成されているデザインのWebサイトに動きを付けてしまうとその良さが消えてしまうことがありますよね。

しかし、ページ遷移ならばデザインに左右されることなく、実装することが出来ます。またページ遷移にアニメーションを付けることでWebサイトのクオリティを上げることが出来ます。
本記事では初級・中級・上級編と三段階の難易度に分けてデモをご紹介していきますので、ぜひご覧ください。

1 【準備】HTML・CSS・jQueryを用意
2 【初級編】シンプルなページ遷移アニメーション
3 【中級編】ワンポイント加えておしゃれなページ遷移アニメーション
4 【上級編】完全に自由なアニメーションを作れるページ遷移アニメーション
- 4.1 Lottieを使って特殊型ページ遷移アニメーション
5 ページ遷移前にもアニメーションを付けるやり方
6 まとめ
7 参考サイト

【準備】HTML・CSS・jQueryを用意

まず、基本となるHTML・CSS・jQueryを用意します。
今回は、初級・中級・上級と三段階に分けてご紹介するので、違いが分かりやすいように色分けをしています。

HTML

トップページ風に調整します。
.animation-bgはページ遷移に使用する要素です。

ソースの表示


<html>
<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
  <title>ページ遷移アニメーション</title>
  <link href="../css/style.css" rel="stylesheet" media="all">

</head>
<body class="move">
  <div class="animation-bg"></div>

  <div class="content">
    <header>
      <div class="black-bg"></div>
      <div class="c-header">
        <div class="inner-block">
          <div class="logo">
            LOGO
          </div>
          <button type="button" class="c-menu-btn">
            <span class="inn">
              <span class="line"></span>
              <span class="line"></span>
              <span class="line"></span>
            </span>
          </button>
          <nav class="c-menu">
            <ul>
              <li><a href="">TOP</a></li>
              <li><a href="">ABOUT</a></li>
              <li><a href="">PRODUCT</a></li>
              <li><a href="">NEWS</a></li>
              <li><a href="">BLOG</a></li>
              <li><a href="">CONTACT</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    <div class="mv-section">
      <div class="mv-img">
        <img src="../img/mv-img.jpg" alt="">
        <span class="mv-text">
          ページ遷移アニメーション
        </span>
      </div>
    </div>
  </div>

  <script src="../js/jquery-3.6.0.min.js"></script>
  <script src="../js/common.js"></script>

</body>
</html>

<html>

<head>

<title>ページ遷移アニメーション</title>

</head>

LOGO

</div>

</span>

</button>

<ul>

<li><a href="">ABOUT</a></li>

<li><a href="">PRODUCT</a></li>

<li><a href="">CONTACT</a></li>

</ul>

</nav>

</div>

</header>

ページ遷移アニメーション

</span>

</div>

</body>

</html>

CSS

※必要な部分だけ記載しています。

ソースの表示


/* ↓ 共通の記述 */
/* 全体 */
.content {
  opacity: 0;
  pointer-events: none;
}
body.appear .content {
  animation-name: PageAnime-content;
  animation-duration: 0.55s;
  animation-delay: 0.55s;
  animation-fill-mode: forwards;
  opacity: 0;
  pointer-events: auto;
}
.animation .content {
  opacity: 1;
  pointer-events: auto;
}
@keyframes PageAnime-content {
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}


/* ヘッダー */
.c-header {
  height: 100px;
}
.c-header {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.c-header .logo {
  color: #75bec2;
  font-size: 50px;
  font-weight: bold;
}
.c-header .logo.level02 {
  color: #ff97bd;
}
.c-header .logo.level03 {
  color: #77ebda;
}
.c-menu ul {
  display: flex;
}
.c-menu li {
  margin-left: 40px;
}
.c-menu li a {
  font-size: 18px;
  font-weight: 500;
  position: relative;
  transition: 0.2s ease-in-out;
}
.c-menu li a::before {
  background: transparent;
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  position: absolute;
  bottom: -3px;
  left: 0;
  transition: 0.2s ease-in-out;
}
@media screen and (min-width:762px) {
  .c-menu li a:hover {
    color: #75bec2;
  }
  .c-menu li a:hover::before {
    background: #75bec2;
    transition: 0.2s ease-in-out;
  }
  .c-menu.level02 li a:hover {
    color: #ff97bd;
  }
  .c-menu.level02 li a:hover::before {
    background: #ff97bd;
    transition: 0.2s ease-in-out;
  }
  .c-menu.level03 li a:hover {
    color: #77ebda;
  }
  .c-menu.level03 li a:hover::before {
    background: #77ebda;
    transition: 0.2s ease-in-out;
  }
}
@media screen and (min-width:926px) {
  .c-menu-btn {
    display: none;
  }
}
@media screen and (max-width:925px) {
  .c-header {
    height: 70px;
  }
  .c-header .logo {
    font-size: 30px;
  }
  .c-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: .3s ease-in-out;
    transform: translateY(-70px);
    z-index: 999;
  }
  .c-menu ul {
    display: block;
    width: 100%;
  }
  .c-menu li {
    background: #fff;
    margin-left: 0;
  }
  .c-menu li a {
    display: block;
    padding: 15px 30px;
  }
  .c-menu li + li {
    border-top: 1px solid #ddd;
  }
  .c-menu li a {
    font-size: 16px;
  }
  .c-menu.is-open {
    opacity: 1;
    display: block;
    transform: translateY(70px);
  }
  .c-menu li a:hover {
    color: #333;
  }
  .c-menu li a:hover::before {
    content: none;
  }
  .c-menu.level02 li a:hover {
    color: #333;
  }
  .c-menu.level02 li a:hover::before {
    content: none;
  }
}

.c-menu-btn {
  cursor: pointer;
  width: 30px;
  height: 22px;
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  margin: auto;
  z-index: 999;
}
.c-menu-btn .inn {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.c-menu-btn .inn .line {
  position: absolute;
  display: inline-block;
  background-color: #333;
  height: 2px;
  left: 0;
  width: 100%;
  transition: 0.3s;
}
.c-menu-btn .inn .line:nth-of-type(1) {
  top: 0;
}
.c-menu-btn .inn .line:nth-of-type(2) {
  top: 10px;
}
.c-menu-btn .inn .line:nth-of-type(3) {
  top: 20px;
}

.c-menu-btn.is-open .inn .line:nth-of-type(1) {
  top: 45%;
  transform: rotate(45deg);
}
.c-menu-btn.is-open .inn .line:nth-of-type(2) {
  opacity: 0;
}
.c-menu-btn.is-open .inn .line:nth-of-type(3) {
  top: 45%;
  transform: rotate(-45deg);
  bottom: auto;
}

.black-bg {
  position: fixed;
  left: 0;
  top: 70px;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  transition: all .6s;
  cursor: pointer;
}
.black-bg.is-open {
  display: block;
}

/* メインビジュアル */
.mv-section {
  text-align: center;
}
.mv-img {
  position: relative;
}
.mv-text {
  color: #fff;
  font-size: 42px;
  font-weight: bold;
  position: absolute;
  top: 40px;
  left: 110px;
  text-align: left;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width:925px) {
  .mv-text {
    font-size: 5.625vw;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

/* ↓ 共通の記述 */

/* 全体 */

.content {

opacity: 0;

pointer-events: none;

}

body.appear .content {

animation-name: PageAnime-content;

animation-duration: 0.55s;

animation-delay: 0.55s;

animation-fill-mode: forwards;

opacity: 0;

pointer-events: auto;

}

.animation .content {

opacity: 1;

pointer-events: auto;

}

@keyframes PageAnime-content {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

/* ヘッダー */

.c-header {

height: 100px;

}

.c-header {

height: 100%;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

align-items: center;

position: relative;

}

.c-header .logo {

color: #75bec2;

font-size: 50px;

font-weight: bold;

}

.c-header .logo.level02 {

color: #ff97bd;

}

.c-header .logo.level03 {

color: #77ebda;

}

.c-menu ul {

display: flex;

}

.c-menu li {

margin-left: 40px;

}

.c-menu li a {

font-size: 18px;

font-weight: 500;

position: relative;

transition: 0.2s ease-in-out;

}

.c-menu li a::before {

background: transparent;

content: "";

display: block;

height: 2px;

width: 100%;

position: absolute;

bottom: -3px;

left: 0;

transition: 0.2s ease-in-out;

}

@media screen and (min-width:762px) {

.c-menu li a:hover {

color: #75bec2;

}

.c-menu li a:hover::before {

background: #75bec2;

transition: 0.2s ease-in-out;

}

.c-menu.level02 li a:hover {

color: #ff97bd;

}

.c-menu.level02 li a:hover::before {

background: #ff97bd;

transition: 0.2s ease-in-out;

}

.c-menu.level03 li a:hover {

color: #77ebda;

}

.c-menu.level03 li a:hover::before {

background: #77ebda;

transition: 0.2s ease-in-out;

}

@media screen and (min-width:926px) {

.c-menu-btn {

display: none;

}

@media screen and (max-width:925px) {

.c-header {

height: 70px;

}

.c-header .logo {

font-size: 30px;

}

.c-menu {

display: none;

position: absolute;

top: 0;

left: 0;

width: 100%;

opacity: 0;

transition: .3s ease-in-out;

transform: translateY(-70px);

z-index: 999;

}

.c-menu ul {

display: block;

width: 100%;

}

.c-menu li {

background: #fff;

margin-left: 0;

}

.c-menu li a {

display: block;

padding: 15px 30px;

}

.c-menu li + li {

border-top: 1px solid #ddd;

}

.c-menu li a {

font-size: 16px;

}

.c-menu.is-open {

opacity: 1;

display: block;

transform: translateY(70px);

}

.c-menu li a:hover {

color: #333;

}

.c-menu li a:hover::before {

content: none;

}

.c-menu.level02 li a:hover {

color: #333;

}

.c-menu.level02 li a:hover::before {

content: none;

}

.c-menu-btn {

cursor: pointer;

width: 30px;

height: 22px;

position: absolute;

top: 0;

right: 20px;

bottom: 0;

margin: auto;

z-index: 999;

}

.c-menu-btn .inn {

margin: auto;

position: absolute;

top: 0;

bottom: 0;

right: 0;

left: 0;

}

.c-menu-btn .inn .line {

position: absolute;

display: inline-block;

background-color: #333;

height: 2px;

left: 0;

width: 100%;

transition: 0.3s;

}

.c-menu-btn .inn .line:nth-of-type(1) {

top: 0;

}

.c-menu-btn .inn .line:nth-of-type(2) {

top: 10px;

}

.c-menu-btn .inn .line:nth-of-type(3) {

top: 20px;

}

.c-menu-btn.is-open .inn .line:nth-of-type(1) {

top: 45%;

transform: rotate(45deg);

}

.c-menu-btn.is-open .inn .line:nth-of-type(2) {

opacity: 0;

}

.c-menu-btn.is-open .inn .line:nth-of-type(3) {

top: 45%;

transform: rotate(-45deg);

bottom: auto;

}

.black-bg {

position: fixed;

left: 0;

top: 70px;

width: 100vw;

height: 100vh;

z-index: 100;

background-color: rgba(0, 0, 0, 0.4);

display: none;

transition: all .6s;

cursor: pointer;

}

.black-bg.is-open {

display: block;

}

/* メインビジュアル */

.mv-section {

text-align: center;

}

.mv-img {

position: relative;

}

.mv-text {

color: #fff;

font-size: 42px;

font-weight: bold;

position: absolute;

top: 40px;

left: 110px;

text-align: left;

text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);

}

@media screen and (max-width:925px) {

.mv-text {

font-size: 5.625vw;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

display: flex;

align-items: center;

justify-content: center;

}

@keyframes PageAnime-content の部分でフェードインのアニメーションを作成しています。
初期状態では .content を opacity: 0 にしておき、ページ読み込みが完了して body に .appear というクラス名がついたら、 PageAnime-content を適用させて opacity: 1 にする、という形です。

jQuery

ソースの表示


(function ($) {
  'use strict';
  $(window).on('load',function(){
    $('body').addClass('appear');
   });
   // バーガーメニューの開閉
     $('.c-menu-btn').click(function(){
    $(this).toggleClass('is-open');
    $(this).siblings('.c-menu').toggleClass('is-open');
    $('.black-bg').toggleClass('is-open');
  });
})(jQuery);

(function ($) {

'use strict';

$(window).on('load',function(){

$('body').addClass('appear');

});

// バーガーメニューの開閉

$('.c-menu-btn').click(function(){

$(this).toggleClass('is-open');

$(this).siblings('.c-menu').toggleClass('is-open');

$('.black-bg').toggleClass('is-open');

});

})(jQuery);

ページが読み込まれたら（$(window).on(‘load’）、body に .appear というクラス名を追加します。
それをトリガーとしてアニメーションが走る形になります。

これで準備完了です。
ここまでで以下のようになります。
「PageAnime-content」のフェードインアニメーションだけが適用されている状態です。
【デモ】ページ遷移アニメーション下準備
次からページ遷移アニメーションを紹介していきます。

【初級編】シンプルなページ遷移アニメーション

まず初めに、シンプルなページ遷移アニメーションからご紹介いたします。

フェードイン・フェードアウト

ふわっと消えたり、出てきたりするページ遷移アニメーションです。

「.fade」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。
【デモ】フェードアウト・イン

キーフレームはこちらです。

　
.fade .animation-bg {
  background: #75bec2;
  content: "";
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  animation-name: PageAnime-fade;
  animation-duration: 0.3s;
  animation-delay: 0.8s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  pointer-events: none;
}

@keyframes PageAnime-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

.fade .animation-bg {

background: #75bec2;

content: "";

position: fixed;

z-index: 999;

top: 0;

left: 0;

width: 100%;

height: 100vh;

animation-name: PageAnime-fade;

animation-duration: 0.3s;

animation-delay: 0.8s;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

pointer-events: none;

}

@keyframes PageAnime-fade {

0% {

opacity: 1;

}

100% {

opacity: 0;

display: none;

}

100%になるにつれて透明度が0になるように、opacityを指定します。
透明度を下げて非表示にしているだけなのでdisplay: noneを追加しないとクリックなどが効かなくなってしまうので、追加します。

背景色が動く

背景色が動くページ遷移アニメーションはスタンダードな形と言えますね。
本記事では動く方向別に全8種類のデモをご用意しました。

上から下へ・下から上へ
左から右へ・右から左へ
左上から右下へ・右下から左上へ
右上から左下へ・左下から右上へ

HTML

基本的な記述は同じです。
今回は、分かりやすいようにそれぞれにクラスをつけていますが、実際に使うときは、環境にあった書き方で大丈夫です。

ソースの表示


<html>
<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
  <title>背景色が動く | ページ遷移アニメーション</title>
  <link href="../css/style.css" rel="stylesheet" media="all">

</head>
<body class="move"> // .move以外にもそれぞれに対応したクラスを追加する
  <div class="animation-bg"></div>

  <div class="content">
    <header>
      <div class="black-bg"></div>
      <div class="c-header">
        <div class="inner-block">
          <div class="logo">
            LOGO
          </div>
          <button type="button" class="c-menu-btn">
            <span class="inn">
              <span class="line"></span>
              <span class="line"></span>
              <span class="line"></span>
            </span>
          </button>
          <nav class="c-menu">
            <ul>
              <li>
                <a href="">
                  TOP
                </a>
              </li>
              <li>
                <a href="">
                  ABOUT
                </a>
              </li>
              <li>
                <a href="">
                  PRODUCT
                </a>
              </li>
              <li>
                <a href="">
                  NEWS
                </a>
              </li>
              <li>
                <a href="">
                  BLOG
                </a>
              </li>
              <li>
                <a href="">
                  CONTACT
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    <div class="mv-section">
      <div class="mv-img">
        <img src="../img/mv-img.jpg" alt="">
        <span class="mv-text">
          上から下へ背景色が動く<br>ページ遷移アニメーション
        </span>
      </div>
    </div>
  </div>

  <script src="../js/jquery-3.6.0.min.js"></script>
  <script src="../js/common.js"></script>

</body>
</html>