銀の弾丸がついに見つかりました！ #CSS

ついに銀の弾丸が発見されました！

See the Pen 銀の弾丸 (@mu-tomoya) on CodePen.

みなさん、いまのスクロールしてみましたか？ついに皆さんの探していた、銀の弾丸が見つかりました！いやあ、まさか銀の弾丸を自分が発見できるとは思いませんでした。こんなところに隠れていたとは。

思えば、人月の神話からでした。「銀の弾丸などない」と言われてから、約50年、あらゆるエンジニアがずっと探し求めていました。銀の弾丸を見つけては否定されをずっと繰り返されてきて、「フレームワークは銀の弾丸ではない」「オブジェクト指向UIは銀の弾丸なのではないか」、挙げ具の果てには「仕事に銀の弾丸を求めるな」とまで言われてきました。私は、銀の弾丸など存在しないと誰かが言ったということは、その銀の弾丸が存在したことを知っているから、ないと言ったのではないかと思い、日夜寝る間も惜しみ銀の弾丸を探し求め続けました。

Qiitaでも、実に500以上の記事が銀の弾丸について言及していましたが、銀の弾丸そのものを見つけたという記事は一つも見つかりませんでした。みんなプログラミングの話ばかりしています。

それが、2024年4月1日、ついに銀の弾丸が発見されました！

ここからは、どうして私がこの銀の弾丸を発見できたのか、CSSの奥地へと向かってみたいと思います。ちなみに、この銀の弾丸はなんと、JavaScriptを一切使っておりません

解説

まず、この弾丸の形はどうやってできているのか、それは、四角の部分と楕円の部分に分かれています。
四角の部分を普通にclassで作り、そして先の楕円の部分を、擬似要素を使って丸めます。

そして、角を丸めます

.silver-bullet {
  height: 60px;
  width: 180px;
  filter: drop-shadow(0 0 0.25rem #333);
  background: linear-gradient(1.3deg, #757575 0%, #9E9E9E 50%, #E8E8E8 70%, #9E9E9E 80%, #757575 90% 100%);
  ...
  &:after {
       ...
  background: linear-gradient(1.3deg, #757575 0%, #9E9E9E 50%, #E8E8E8 70%, #9E9E9E 80%, #757575 90% 100%);
       border-radius: 50% 50%;
  }
}

この記事を参考に、数値を微調整してbackgraoundを銀のグラデーションにしました。

次に、弾の溝を表現します。borderを使って、溝と、楕円と四角が重なる部分に線を引きます

 &before {
    width: 158px;
    height: 58px;
    left: 20px;
    border-left: solid 1px #adb0bc;
    border-right: solid 1px #adb0bc;
}

こんな感じでうまいこと数値を調整します。

さらに、どうやってこの銀の弾丸が飛んでいるのか。

これは、CSSの新機能、スクロールドリブンアニメーションを使っています。（ただし、今現在はChrome系のブラウザでしか動きません）

これを使うと、スクロールにあわせてアニメーションを実行することができます。

@keyframes  anim {
  from {
    margin-left:-100%;
  }
  to {
    margin-left:100%;
  }
}

.anim {
  animation: anim linear;
  animation-timeline: scroll();
}

最後に、スクロールが実行できるように、画面の高さを広げます。

body {
  width: 100vw;
  height: 1000px;
}

以上が、私がどうやって銀の弾丸が発見できたのかの詳細でした。

最後に

この記事は、エイプリルフール企画です。プログラミングに銀の弾丸なんてありません。常に知識をアップデートしていきましょう。