cssで画像を境に文字や要素の色を変えるには

Question

こちらのサイトに独学でXDから模写したものをあげています。

https://hiroyukitakase.github.io/contact.html

contactページをデベロッパーツールで横幅を375px以下にして見てもらうと分かりますが、

scrollという文字と画像を境に変わる縦棒を置いてあります。

仕様では、おそらく画像を境に白黒が反転するんだと思いますが、方法が分からなかったので、目視で白黒を変えて配置しました。

しかし、写真のheightは画像幅に応じて増減するので、その増減に応じてスクロールバーの縦棒の白黒の境がずれてしまいます。

こういったスクロールバー？を置く簡潔な方法はあるのでしょうか？

画像を境に変えるなら、下の記事のようなものもありますが、

https://webkore.site/text-split/

こちら（http://mr-mr.jp/）のlive the lifeのようにできれば、アニメーションの幅が広がるのでbetterだと思いますが、こちらも方法が分かりません。

スクロールバーの実装のイメージとしては、おそらく後者のサイトのようにするのであって、前者の記事ではないと考えますが。。

このようなスクロールバーの実装方法がわかる方、これ試したらいけるよ、でもいいので詳しい方ご教授ください。

Answer 1

無事解決できたようで何よりです。
また機会がありましたら宜しくお願い致します。

Comments

[neginattofan]

確認が遅くなってすみません。とても参考になるコードで、勉強になりました！transform-originを使うのは全くわかってませんでした。ありがとうございました。

Answer 2

一例です。

@media screen and (max-width: 375px)
.contact-hero-sp-scroll-container {
    position: absolute;
    z-index: 3;
    top: 100vw;
    left: 3vw;
    font-family: 'Montserrat', sans-serif;
    font-size: 4vw;
    color: #333333;
    font-weight: bold;
    transform: rotate(270deg);
    display: flex;
    transform-origin: 0 0 0;
    width: 30vw;

.contact-hero-sp-scroll-container::before {
    border-top: 2px solid #fff;
    content: "";
    width: 20vw;
    position: absolute;
    top: 1.5vw;
    left: 28vw;

.contact-hero-sp-scroll-container::after {
    border-top: 2px solid;
    content: "";
    width: 8vw;
    top: 1.5vw;
    position: absolute;
    left: 20vw;

一応動作確認は行っており境目はずれないかと思います。