LoginSignup
0

More than 1 year has passed since last update.

ボタンを押したら背景色がグラデーションでランダムに変わるアプリを作りました(+ CSS Animationをちょっと)

Last updated at Posted at 2021-11-10

作ったアプリ

https://awesome-engelbart-e06e16.netlify.app/
画面中央の文章がずっと点滅します。
ボタンを押すと、背景色が左から右にグラデーションでランダムに変わります。
ライブラリやフレームワークは使わずに、HTML、CSS、Vanilla JavaScriptで作成(リセットCSSだけ使ってます)。

特記事項

文章を点滅させる

@keyframesで点滅のパターンを指定して、animationプロパティに指定しました。

.description {
    animation: blink 2s ease 0s infinite alternate none running;
}

.hex-gradient {
    animation: blink 2s ease 0s infinite alternate none running;
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

背景色をグラデーションにする

こちらはbackgroundプロパティにlinear-gradient関数を使用しました。カラーコードをランダムに取得するため、6桁の16進数を取得する必要があり、Math.random().toString(16).slice(-6)で対応しました(でも、これでできる理由はよくわかっていない・・・)。

clickMe.addEventListener('click', () => {
  const left = Math.random().toString(16).slice(-6)
  const right = Math.random().toString(16).slice(-6)
  const colorCode = document.getElementById('color-code')
  document.body.style.background = `linear-gradient(to right, #${left}, #${right})`
  colorCode.textContent = `#${left}, #${right}`
})

ボタン押すとレイアウト崩れる問題

地味にはまったのが、ボタンを押したときに中央の文章がひょこっと上に動くことです。これはbutton:activeに太めのborderを設定しているのが原因っぽいので、outlineというプロパティに変えたところうまくいきました。

輪郭線は領域を占有せず、要素のコンテンツの外側に描かれます。- 仕様によれば、輪郭線は矩形である必要はありませんが、ふつうは矩形です。

.click-me:active {
    outline: 3px solid #ABB2B9;
}

参考にさせていただいたところ

要素を点滅させる
JavaScriptで超簡単にランダムで数桁の16進数を作成する方法

JavaScriptの練習ネタ
25 Beginner JavaScript Project Ideas

そして、もちろんMDN

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0