運命が邪魔をする退会ボタン

「もう無理。このサイト、退会したい・・・！」

そんな想いを伝えようと、退会ボタンにマウスを乗せるユーザー。

しかし、そこに偶然・・・！

動画

CodePen

See the Pen Untitled by Yametaro (@Yametaro) on CodePen.

ドラマチックに退会を阻止するクソアプリ

今回のテーマは「元ドラマ脚本家のWebデザイナーが退会ページを作ったら」です。

偶然に阻まれて、想いを伝えられない・・・そんな歯痒さを表現してみました。

以下に実装方法を記します。

作り方〜HTML〜

退会ボタンを置いて、あとはひたすら電車の画像を何十個も並べるだけです。

<button>退会する</button>

<div class="train-box">
  <ul>
    <li><img src="https://drive.google.com/uc?export=view&id=1_w_X1ZgNDbSyugImlyE5ZQS6jXkZ15LM" alt=""></li>
    <li><img src="https://drive.google.com/uc?export=view&id=1_w_X1ZgNDbSyugImlyE5ZQS6jXkZ15LM" alt=""></li>
    <li><img src="https://drive.google.com/uc?export=view&id=1_w_X1ZgNDbSyugImlyE5ZQS6jXkZ15LM" alt=""></li>
    <li><img src="https://drive.google.com/uc?export=view&id=1_w_X1ZgNDbSyugImlyE5ZQS6jXkZ15LM" alt=""></li>
    <!-- 省略 -->
    <li><img src="https://drive.google.com/uc?export=view&id=1_w_X1ZgNDbSyugImlyE5ZQS6jXkZ15LM" alt=""></li>
  </ul>
</div>

作り方〜CSS〜

退会ボタンのあたりにマウスをホバーさせると、運命的に電車が到着する・・・。

アニメーションの名前はdestinyとしました。

アニメーションの内容

@keyframes destiny {
  from { left: calc(100% + 70px); }
  to { left: -20000px; }
}

背景とか

html,
body {
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
body {
  background-image: url(https://drive.google.com/uc?export=view&id=1ivjlQx0-EVxOZZ6hVY8PjQsVMWvrRUHH), linear-gradient(rgb(40, 51, 91), #000);
  background-position: calc(100% - 30px) 30px, left top;
  background-repeat: no-repeat;
  background-size: 100px auto, auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

電車たちを囲んでいる部分

.train-box {
  position: absolute;
  left: 0%;
  top: calc(50% - 200px);
  width: 100%;
  overflow: hidden;
}

電車たち

ul {
  display: flex;
  position: relative;
  left: calc(100% + 70px);
}

.train-box:hover ul {
  animation: destiny 10s ease 0s normal;
  animation-fill-mode: forwards;
}

li {
  list-style-type: none;
  margin-left: -70px;
}

ボタン部分

button {
  border: none;
  border-radius: 100px;
  font-size: 32px;
  padding: 0.1em 1em;
  background-image: linear-gradient(#fff, #666);
}

作り方〜JavaScript〜

今回はJavaScriptなしです。

みなさんも、ぜひ使ってみてください

運命が「退会しないで欲しい」と言っているよ・・・！

そんなことをユーザーに伝えたいとき、このアニメーションを使ってみてください。

もう1つクソボタン記事あります

• 押したら変な汁が出そうな退会ボタン

他にもいくつかあります

このようなクソアプリ動画を投稿するTwitterアカウントを運営しているので、よかったら見てみてください。