Color change contrast text

Hi, ive seen this effect on sites very much but I don't know how I can implement it on my site! a site that has this is for example: https://larsson-template.webflow.io/post/digital-influence where the text on the loading screen the background of the letters is little opacity where the color changes contrast in regard to the background color so that it always stays visible. Does anyone know how to do this? Thank you!

9 hours ago, NYCS27 said:

Hi, ive seen this effect on sites very much but I don't know how I can implement it on my site! a site that has this is for example: https://larsson-template.webflow.io/post/digital-influence where the text on the loading screen the background of the letters is little opacity where the color changes contrast in regard to the background color so that it always stays visible. Does anyone know how to do this? Thank you!

I checked this site is using javascript to set the style transform for preload

We can add the following code to your header code injection (to make sure in run on all page)

<div class="pageloader">
  <div class="pageloader-content">
    <div class="overflow-hidden">
      <div class="pageloader-headline">
        Digital Influence</div>
    </div>
  </div>
</div>

<style>
  .pageloader {
    z-index: 10000;
    width: 100vw;
    height: 100dvh;
    background-color: #000;
    justify-content: center;
    align-items: center;
    display: none;
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    overflow: hidden;
  }

  .pageloader {
    transform-style: preserve-3d;
    display: flex;
    animation: preload 1s ease-in-out 1s forwards;
  }

  .pageloader-content {
    z-index: 2;
    width: 100%;
    height: 100%;
    mix-blend-mode: difference;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 4vw;
    display: flex;
    position: relative;
  }

  .pageloader-headline {
    color: #fff;
    text-align: right;
    letter-spacing: -.5vw;
    text-transform: uppercase;
    font-family: Satoshi, sans-serif;
    font-size: 12vw;
    font-weight: 300;
    line-height: 90%;
  }

  @media screen and (max-width: 991px) {
    .pageloader-headline {
      letter-spacing: 0;
      font-size: 8rem;
    }
  }

  .pageloader-headline {
    transform-style: preserve-3d;
    animation: textPreload 1s ease-in-out forwards;
  }


  @keyframes preload {
    from {
      transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    }

    to {
      transform: translate3d(0px, -100vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    }
  }

  @keyframes textPreload {
    from {
      transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    }

    to {
      transform: translate3d(0px, -101%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    }
  }
</style>

This could be a good basic we can start

I hope it makes sense