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

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

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

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

# 動画
https://twitter.com/ng_web_design/status/1603748890175766529?s=20&t=9S4rDlpZINj5Uc4kWgKaPg



# CodePen
<p class="codepen" data-height="550" data-default-tab="result" data-slug-hash="vYaBNbJ" data-user="Yametaro" style="height: 550px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Yametaro/pen/vYaBNbJ">
  Untitled</a> by Yametaro (<a href="https://codepen.io/Yametaro">@Yametaro</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

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

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

# 作り方〜HTML〜

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

```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`としました。

### アニメーションの内容

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

### 背景とか

```css
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;
}

```

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

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

### 電車たち

```css
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;
}
```

### ボタン部分

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


# 作り方〜JavaScript〜

今回はJavaScriptなしです。

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

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

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

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

- [押したら変な汁が出そうな退会ボタン](https://qiita.com/Yametaro/items/06ef5763d284e39d41f1)

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

https://twitter.com/ng_web_design/status/1602832835701886977?s=20&t=9S4rDlpZINj5Uc4kWgKaPg

https://twitter.com/ng_web_design/status/1602823967701893120?s=20&t=9S4rDlpZINj5Uc4kWgKaPg

https://twitter.com/ng_web_design/status/1601554388757188609?s=20&t=9S4rDlpZINj5Uc4kWgKaPg

https://twitter.com/ng_web_design/status/1600645936329490432?s=20&t=9S4rDlpZINj5Uc4kWgKaPg