推しアイデア
Webサイトを見ていてイライラする時に、ボタンに煽られることでさらにイライラするというアイディア。一見ムカつきますが、煽ってくるボタンを押せた時の達成感はヤバいです。ちなみに、作者自身も何度もイライラさせられてます😅 イライラしてばかりもしんどいので、モテるモードも作成しました
モテたいけど、逃げられたい？ そんな君には「モテ逃げボタン」
―
GitHub
CSS
JavaScript
HTML
VSCode
Webサイト上のボタンから煽られたりモテたりするChrome拡張
作った背景
Webサイトで「学」んでいる時に、イライラすることはありませんか？そんなあなたをもっと煽りたい！という気持ちから、この作品は生まれました🤗
推し技術
ボタンの動きを、１から自分たちで実装🔥いい感じに押せそうで押せない具合で煽ってきてくれます。 ボタンにモテるモードでは、ボタン同士が重ならないように工夫しています。 ボタンを押せた後の画面にも注目です🧐
プロジェクト詳細
作品概要
Web上のボタンに煽られたり、モテたりするChrome拡張です。 この作品には、「ボタンに煽られるモード」と「ボタンにモテるモード」があります。 それぞれのモードは、Chrome右上のメニューから切り替え可能です。
ボタンに煽られるモード
このモードでは、みなさんがボタンに煽られます。 ボタンを押そうとしたらボタンが逃げていってしまうので、頑張って追いかけてください。 運良くボタンに追いつけたら、なにかいいことが起こるかもしれません。
ボタンにモテるモード
このモードでは、ボタンにめっちゃモテることができます。 ページを開くと、たくさんのボタンたちがあなたのマウスに寄ってきます。 モテモテ気分を味わってみてください。
ボタンを押せたときは、一定の確率で成功ページ・失敗ページに飛ばされるようになっています。
使い方
現在ChromeWebストアに申請中です。 申請が承認されるまでは、以下の方法でお使いください。
- GitHubからリポジトリをクローン
- 拡張機能の設定画面をChromeで開く
- デベロッパーモードをONにする
- 「パッケージ化されていない拡張機能を読み込む」から、クローンしたリポジトリを選ぶ
こだわりポイント
- 「ボタンに煽られるモード」において、ボタンが押せそうで押せないちょうどいい動きの実装
- 「ボタンにモテるモード」でボタン同士が重なりすぎないように
- ボタンが画面外へあんまり出ないように
- モード切り替えにおいて、文字を押してもモードを切り替えられるように
- モードに応じて、モード切り替えメニューの背景の色の変更
- 無限スクロールのあるサイトでも、適切に動くように
使用技術
- HTML
- CSS
- JavaScript
