Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

window.historyでアニメーションをつくってみた

この記事は J2complexed Advent Calendar 2017 の3日目です。

window.historyのこと、知ってますか?

ブラウザの履歴を制御するhistoryオブジェクトです。
簡単に説明をします。

window.history.back()

履歴情報の前のページに戻ります。
window.history.go(-1) でも同じように戻ります。

window.history.forward()

履歴情報の次のページへ進みます。
window.history.go(1) でも同じように進みます。

window.history.pushState()

履歴情報を追加します。

windwos.history.replaceState()

履歴情報を書き換えます。

これを使ってアドレスバーにアニメーションを作ってみようと思います!

準備

ここらへんは普通なので、用意したファイルだけご紹介します。

package.json
{
  "name": "browser_history_animate",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "babel src -d dest",
    "dev": "lite-server"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  },
  "dependencies": {
    "lite-server": "^2.3.0"
  }
}
{
  "presets": ["es2015"]
}
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Browser Histry Animation</title>
</head>
<body>
<script src="./dest/index.js"></script>
</body>
</html>
src/index.js
const christmasTree = '🎄'
const smile = '😀'
const sleep = '😴'
const zzz = '💤'
const santa = '🎅'
const present = '🎁'
const space = ' '
let _history = ['']

_history.push (christmasTree + space + space + space + space + space + space + space + space + space + space + sleep + zzz)
_history.push (christmasTree + santa + space + space + space + space + space + space + space + space + space + sleep + zzz)
_history.push (christmasTree + space + santa + space + space + space + space + space + space + space + space + sleep + zzz)
_history.push (christmasTree + space + space + santa + space + space + space + space + space + space + space + sleep + zzz)
_history.push (christmasTree + space + space + space + santa + space + space + space + space + space + space + sleep + zzz)
_history.push (christmasTree + space + space + space + space + santa + space + space + space + space + space + sleep + zzz)
_history.push (christmasTree + space + space + space + space + space + santa + space + space + space + space + sleep + zzz)
_history.push (christmasTree + space + space + space + space + space + space + santa + space + space + space + sleep + zzz)
_history.push (christmasTree + space + space + space + space + space + space + space + santa + space + space + sleep + zzz)
_history.push (christmasTree + space + space + space + space + space + space + space + space + santa + space + sleep + zzz)
_history.push (christmasTree + space + space + space + space + space + space + space + space + santa + present + sleep + zzz)
_history.push (christmasTree + space + space + space + space + space + space + space + space + space + present + sleep + zzz)
_history.push (christmasTree + space + space + space + space + space + space + space + space + space + present + smile)

let count = 0;
window.history.replaceState (null, null, _history [count])

const intervalID = window.setInterval (animateBrowserHistory, 1000)
function animateBrowserHistory ()
{
  count++
  if (count > 13) {
    count = 0
  }
  window.history.replaceState (null, null, _history [count])
 }

chromeで見るとこんな感じです。

history_animate.gif

クリスマス気分が少しは出たでしょうか。
味気ないアドレスバーにちょっと遊び心を足したいときにどうぞ。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?