I want this scan line effect to work properly. To reveal the text from left to right. As if the cathode-ray is burning it into the phosphors on the screen.
The idea is to slide across black rows, that have a transparent tip. Here is a 80% working demo.
The rightmost black
.mask
div in every row will not expand. It must.
I have tried to keep the right-most .mask
div with a black background as inline-block and make it full width. I somewhat understand why the request does not work (width:100% pushes the other inline-blocks onto the next line, as is only proper), but there must be a way to get this full right hand side without hacking the widths in javascript.
.row {
font-family:'Courier New',Courier,monospace;
font-size:16px;
display:block;
height:auto;
width:100%;
min-width:20%;
position:relative;
margin-right:0px;
}
.mask {
display:inline-block;
width:auto; /* 100% does not work */
background:black;
white-space:pre;
}
this won't work on jsbin becuase it uses absolute positioning (unless you view the full screen demo).. but I provided it anyways for you to copy/paste it into your own browser http://jsbin.com/uteyik/12/.. below are the change highlights:
css:
and javascript:
explanation: I first create a dummy row and calculate it's height. I then create rows that have
position: absolute
and position it from the top using the dummy row height x row number. the idea is that I wanted to make everything with absolute positioning so that the mask doesn't push the stripes below when it's 100%, also the row has to be absolute because as I make it's contents disappear, I don't want the rows below to jump up.bonus: see it work the opposite way (ie the text disappearing): http://jsbin.com/uteyik/9 this was my initial (and incorrect) answer