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>
-
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> -
HTML image link code <a href="...../site-logo.png"><img src="site-logo.png" width="82" height="86" title="Cyberian" alt="Cyberian Logo"></a> Or better use css styling to determine the width and height. <a href="...../site-logo.png"><img src="site-logo.png" width:82px; height:86px" title="Cyberian" alt="Cyberian Logo"></a>
This code has the following parts:
“<a>” is link tag. “href” attribute sets URL to link to. “<img>” the image start. “src” attribute sets the image file. “title” attribute sets the image tool-tip text. “alt” is the image tag alternative text attribute. “style” attribute sets with “css” with detail size of image “width” and “height” of the image. “</a>” is the link end tag.
50% Off on Your FEE Join US!
If you want to know how you can join us and get 50% Discout on your FEE ask Cyberian in Chat Room!
