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

Posted at 2017-12-04

この記事は 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"
  }
}

.babelrc

{
  "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で見るとこんな感じです。

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up