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>SOLVED How to HTML Image Link
-
- 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.
-
@Khuram-Shahzad
Yes! You can use video link but if you want to embed video you may use following code.<iframe width="544" height="360" src="https://www.sitename.com/embed/vL4Myo1g9v8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -
can we use for video link?
100% Off on Your FEE Join US! Ask Me How?
If you want to know how you can join us and get 100% Discount on your FEE ask Cyberian in Chat Room!
