モテたいけど、逃げられたい? そんな君には「モテ逃げボタン」

https://github.com/YuugouOhno/escape-button

GitHub

CSS

JavaScript

HTML

VSCode

Webサイト上のボタンから煽られたりモテたりするChrome拡張

ばんぶー

推しアイデア

Webサイトを見ていてイライラする時に、ボタンに煽られることでさらにイライラするというアイディア。一見ムカつきますが、煽ってくるボタンを押せた時の達成感はヤバいです。ちなみに、作者自身も何度もイライラさせられてます😅 イライラしてばかりもしんどいので、モテるモードも作成しました

作った背景

Webサイトで「学」んでいる時に、イライラすることはありませんか?そんなあなたをもっと煽りたい!という気持ちから、この作品は生まれました🤗

推し技術

ボタンの動きを、1から自分たちで実装🔥いい感じに押せそうで押せない具合で煽ってきてくれます。 ボタンにモテるモードでは、ボタン同士が重ならないように工夫しています。 ボタンを押せた後の画面にも注目です🧐

プロジェクト詳細

作品概要

Web上のボタンに煽られたり、モテたりするChrome拡張です。 この作品には、「ボタンに煽られるモード」と「ボタンにモテるモード」があります。 それぞれのモードは、Chrome右上のメニューから切り替え可能です。

image

ボタンに煽られるモード

このモードでは、みなさんがボタンに煽られます。 ボタンを押そうとしたらボタンが逃げていってしまうので、頑張って追いかけてください。 運良くボタンに追いつけたら、なにかいいことが起こるかもしれません。

ボタンにモテるモード

このモードでは、ボタンにめっちゃモテることができます。 ページを開くと、たくさんのボタンたちがあなたのマウスに寄ってきます。 モテモテ気分を味わってみてください。

ボタンを押せたときは、一定の確率で成功ページ・失敗ページに飛ばされるようになっています。 image image

使い方

現在ChromeWebストアに申請中です。 申請が承認されるまでは、以下の方法でお使いください。

  1. GitHubからリポジトリをクローン
  2. 拡張機能の設定画面をChromeで開く
  3. デベロッパーモードをONにする
  4. 「パッケージ化されていない拡張機能を読み込む」から、クローンしたリポジトリを選ぶ

こだわりポイント

  • 「ボタンに煽られるモード」において、ボタンが押せそうで押せないちょうどいい動きの実装
  • 「ボタンにモテるモード」でボタン同士が重なりすぎないように
  • ボタンが画面外へあんまり出ないように
  • モード切り替えにおいて、文字を押してもモードを切り替えられるように
  • モードに応じて、モード切り替えメニューの背景の色の変更
  • 無限スクロールのあるサイトでも、適切に動くように

使用技術

  • HTML
  • CSS
  • JavaScript

制作者

ばんぶー

@43b24m1p1hn8rn9x