JavaScript のはてなブログへの埋め込みテスト

この前、マウスオーバーしたら色が変わるアニメーションを anime.js で作る方法の記事を書いた。

ack-ludum.hatenablog.com

これをはてなブログ上で実現できないかなと思って色々試したところ、 以下のようなコードを書いたら上手くいった。

鬼門は anime.js のインポートで、さすがに無理かと思ったが、 cdnjs というクラウドを利用すればインポートできた。 integrity 付きでインポートできるのでセキュリティ面でも良さそう。

---

<div id="frame" class="frame"> </div>

<style>
.frame {
    background-color: rgb(48, 48, 128);
    height: 20vmin;
    width: 20vmin;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" 
integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" 
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
var frame = document.getElementById('frame')
var originalColor = "rgb(48, 48, 128)"
var highlightColor = "rgb(128, 48, 48)"

function AnimeChangeColor(color) {
    anime({
        targets: frame,
        backgroundColor: color,
        duration: 200,
        easing: 'linear'
    })
}

frame.addEventListener('mouseover', () => {
    AnimeChangeColor(highlightColor)
});

frame.addEventListener('mouseout', () => {
    AnimeChangeColor(originalColor)
});
</script>

---

↓マウスオーバーしたら色が変わります。

---