Navigation

    Cyberian
    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Pro Blog
    • Users
    • Groups
    • Unsolved
    • Solved

    How to make this illumination effect with CSS

    Web Designing
    css effect with css illumination illumination effect illumination effect with css
    2
    2
    128
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Leader Leader
      Leader Leader last edited by zaasmi

      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

      1 Reply Last reply Reply Quote 0
      • zaasmi
        zaasmi Cyberian's Gold last edited by

        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>
        

        Discussion is right way to get Solution of the every assignment, Quiz and GDB.
        We are always here to discuss and Guideline, Please Don't visit Cyberian only for Solution.
        Cyberian Team always happy to facilitate to provide the idea solution. Please don't hesitate to contact us!
        NOTE: Don't copy or replicating idea solutions.
        Quiz Copy Solution
        Mid and Final Past Papers
        Live Chat

        1 Reply Last reply Reply Quote 0
        • First post
          Last post
        Insaf Sehat Card Live Cricket Streaming

        100% Off on Your FEE Join US! Ask Me How?

        Quiz 100% Result If you want to know how you can join us and get 100% Discount on your FEE ask Cyberian in Chat Room!
        Quiz 100% Result Quiz 100% Result
        solution1255 discussion1206 fall 2019813 assignment 1433 assignment 2297 spring 2020265 gdb 1248 assignment 382 crw10174 spring 201955
        | |
        Copyright © 2021 Cyberian Inc. Pakistan | Contributors
        Live Chat