真夏にぴったりな恐怖演出ボタンを作る | イロイロデザインラボラトリ

真夏なので、いつものウェブサイトを恐怖の谷底に落としてみましょう。

恐怖演出する
恐怖演出中

ユーザビリティの観点から、怖い演出は強制的に行うのではなく、演出を適用するか否かの判断をユーザーが行えるようにしておくのがおすすめです。

CONTENTS

サンプル
HTML
CSS
JavaScript

WordPressの表示速度No1！
初心者からからプロフェッショナルまで使えるロリポップサーバーは月額550円から！

サンプル

サンプルを見てみましょう。

See the Pen
恐怖演出ボタンを作ろう by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

HTML

HTMLはこんな感じです。

<div class="fear-button-wrapper">
  <ul class="fear-button">
    <li>恐怖演出する</li>
    <li>恐怖演出中</li>
  </ul>
</div>

シンプルな構成です。ボタンなので<button>を使うのが適切ですが、CSSのリセットが多くなってしまうので今回は使っていません。<button>を使い場合は下記のように使用してみてください。

<li><button>恐怖演出する</button></li>

CSS

CSSはSCSSを使っています。

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap");

.fear-button-wrapper {
  width: 12rem !important;
  max-width: 12rem !important;
  height: 3rem;
  border-radius: 3rem;
  overflow: hidden;
  margin: 2rem auto;
  transition: all 0.1s linear;
}

.fear-button {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  transition: all 0.5s cubic-bezier(0.87, 0, 0.13, 1);

  li {
    min-width: 12rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    transition: all 0.1s linear;
    background: rgba(25, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
    border-radius: 3rem;

    &:hover {
      cursor: pointer;
      background: rgba(50, 0, 0, 1);
    }

    &:nth-child(1) {
    }

    &:nth-child(2) {
      animation: fear-blink 2s infinite;
    }
  }
}

@keyframes fear-blink {
  0% {
    color: rgba(255, 255, 255, 1);
  }

  50% {
    color: rgba(255, 0, 0, 0.5);
  }

  100% {
    color: rgba(255, 255, 255, 1);
  }
}

.fear-button-active {
  transform: translate(-12rem, 0);
}

body {
  transition: all 0.5s cubic-bezier(0.87, 0, 0.13, 1);
}

.fear-mode-now {
  background: rgba(20, 0, 0, 1);

  * {
    background: transparent !important;
    color: rgba(255, 0, 0, 0.5);
    text-shadow: 0px 0px 4px rgba(255, 0, 0, 1);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  th,
  td,
  textarea,
  input,
  p,
  span,
  a {
    font-family: "Noto Serif JP", serif !important;
  }

  img {
    opacity: 0.5;
    transition: all 0.1s linear;

    &:hover {
      opacity: 1;
    }
  }
}

.fear-button-wrapper

ボタンを覆うコンテナです。ボタンの大きさなどを設定しておきましょう。このclassはボタンを作るだけなら必要ありませんが、場所を固定にしたいときなどはコンテナを設定しておくと柔軟に対応することができます。

.fear-button

ボタンを作っているリストです。<ul>には最初からmarginやlist-styleなどが設定させているためリセットしておきます。また、今回はボタン自体を横並びにしているためdisplay: flex;を使って<li>が横並びになるようにしています。

li

ボタン本体です。ボタンの大きさや余白などのデザインはこの要素に行います。

borderを使うと要素の外側に枠が作られてしまうので、box-shadowをinsetにして内側に向けてドロップシャドウを付けるようにすると擬似的な枠を要素の内側に作ることができます。

また、&:hoverでマウスが要素に乗ったときの動作も設定しておきましょう。

&:nth-child(2)

nth-childは疑似クラスというもので、「n番目の要素」という意味になります。今回は2つの<li>があり、その2番目、つまり「恐怖演出中」となっている要素に対して適用しています。

この擬似クラスは使わずに、普通に下記のようにclassを付けてそれに設定してもだいじょうぶです。

<div class="fear-button-wrapper">
  <ul class="fear-button">
    <li>恐怖演出する</li>
    <li class="active">恐怖演出中</li>
  </ul>
</div>

この疑似クラスのテキストはCSSアニメーションを使って「今は恐怖演出中だよ！」と分かるように点滅させています。

.fear-mode-now

fear-mode-nowは.fear-buttonをクリックしたらbody要素に付与されるclassです。body要素にclassを付与することで全体に効果を付けやすくなります。

*

ユニバーサルセレクタです。ユニバーサルセレクタは全ての要素に適用できるセレクタです。backgroundをtransparentで無効にして、.fear-mode-nowのbackgroundが適用されるようにしておくと良いと思います。

ここからは適用させるウェブサイトのデザインに合わせて調整してみてください。

JavaScript

JavaScriptはjQueryを使っています。

$(".fear-button").on("click", function () {
  $(this).toggleClass("fear-button-active");
  $("body").toggleClass("fear-mode-now");
});

.fear-buttonをクリックするたびに.fear-buttonと<body>にclassが付与/削除されるようにしておきましょう。