• simulate a “scan” light that will reveal words in a box, this is my code by now:

    const e = document.getElementsByClassName('scan')[0];
    document.onmousemove = function(event){
      e.style.left = `${event.clientX}px`;
    };
    
    *{
        margin: 0;
        padding: 0;
    }
    
    html, body{
        width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
        
        display: flex;
    }
    
    .banner{
        width: 100vw;
        height: 100vh;
    
        display: flex;
        flex-grow: 1;
        flex-direction: row;
        align-items: center;
        background-color: #031321;
    }
    
    .banner .scan{
        width: 7px;
        height: 80%;
        
        position: absolute;
        left: 30px;
        z-index: 3;
    
        transition: left 50ms ease-out 0s;
        
        border-radius: 15px;
        background-color: #fff;
        box-shadow:
            0 0 15px 5px #fff,  /* inner white */
            0 0 35px 15px #008cff, /* inner blue */
            0 0 350px 20px #0ff; /* outer cyan */
    }
    
    .banner .description{
        width: 100%;
        color: white;
        font-size: 3em;
        text-align: center;
    
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    <div class="banner">
        <div class="scan"></div>
        <div class="description">
            Just trying something
        </div>
    </div>
    

    1.mp4

  • Cyberian's Gold

    You can increase the background-size (500px in this example) to increase transition smoothing.

    const e = document.getElementsByClassName('scan')[0];
    const hidden = document.getElementsByClassName('hidden')[0];
    
    document.onmousemove = function(event) {
      e.style.left = `${event.clientX}px`; //               ↓ background width (500px) / 2
      hidden.style.setProperty("--pos", `${event.clientX - 250}px`);
    };
    
    
    * {
      margin: 0;
      padding: 0;
    }
    
    html,
    body {
      width: 100%;
      min-height: 100vh;
      overflow-x: hidden;
      display: flex;
    }
    
    .banner {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-grow: 1;
      flex-direction: row;
      align-items: center;
      background-color: #031321;
    }
    
    .banner .scan {
      width: 7px;
      height: 80%;
      position: absolute;
      left: 30px;
      z-index: 3;
      transition: left 50ms ease-out 0s;
      border-radius: 15px;
      background-color: #fff;
      box-shadow: 0 0 15px 5px #fff, /* inner white */
      0 0 35px 15px #008cff, /* inner blue */
      0 0 350px 20px #0ff;
      /* outer cyan */
    }
    
    .banner .description {
      width: 100%;
      color: white;
      font-size: 3em;
      text-align: center;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    .hidden {
      background: radial-gradient(dodgerblue 10%, #031321 50%) var(--pos) 50% / 500px 500px no-repeat fixed;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    <div class="banner">
      <div class="scan"></div>
      <div class="description">
        Just <span class="hidden">hidden</span> something
      </div>
    </div>
    

50% Off on Your FEE Join US!

Quiz 100% Result If you want to know how you can join us and get 50% Discout on your FEE ask Cyberian in Chat Room! Quiz 100% Result Quiz 100% Result
| |