Completely enlarge this inline-block CSS div scan-line

Question

Completely enlarge this inline-block CSS div scan-line

I am looking to create a unique scan line effect that gradually reveals text from left to right, mimicking the appearance of a cathode-ray burning text into a screen's phosphors.

The concept involves sliding across black rows with transparent tips. You can view an 80% functional demo here. Currently, I am facing an issue where the rightmost black .mask div in each row does not expand as desired. I have attempted to adjust its width using inline-block properties and setting it to full width, but this approach causes other inline-blocks to shift onto the next line.

While I understand the limitation causing the issue, I am seeking a solution to achieve the full right-hand side display without resorting to width adjustments through JavaScript hacks.

.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;
}

javascript jquery css scanline

Answer 1

Answer №1

Unfortunately, this code may not function properly on jsbin due to its utilization of absolute positioning (unless you opt for the full screen demo).. Nevertheless, I have provided it for you to easily copy and paste into your own browser http://jsbin.com/uteyik/12/.. Check out the highlighted changes below:

css:

.row {
 ..
  position:absolute;   /* adjusted to absolute */

}
.mask {
  ..
  width:100%;  /* changed to 100% */
  position:absolute;   /*adjusted to absolute */
}

and javascript:

jQuery(document).ready(function() {
    function fill_box(rows) {
        var rowHeight = getSampleRowHeight();
        var thisRowHeight = 0;
        for(var i = 0; i < rows; i += 1) {
            $('.box').append('<div class="row" style="top: '+thisRowHeight+'"><div class="scan_cursor i1"> </div><div class="scan_cursor i2"> </div><div class="scan_cursor i3"> </div><div class="mask"> </div></div>');       
            thisRowHeight +=rowHeight;
        }   
    }

    fill_box(30);

    function tag_animate(el) {
        // animate the mask
        el.animate( {
            'margin-left' : '100%'
            }, 
            {
                complete : function () {        
                    tag_animate(el.parent().next().find('.mask'));
                }
            } 
        );
        // animate the stripes
        el.siblings().animate( {
            'margin-left': '100%'
            }, 
            {
               complete : function () {     
                   el.siblings().hide();
               }
            }
        );      
    }    

    tag_animate($('.box').find('.row').eq(0).find('.mask'));

    function getSampleRowHeight() {
        // get sample row height, append to dom to calculate
        $('.box').append('<div class="row" style="display: hidden"> <div class="scan_cursor i1"> </div></div>');
        var rowHeight = $('.row').height();
        $('.box').find('.row').remove();
        return rowHeight;
    }    
 });

explanation: Initially, I create a dummy row to determine its height. Following that, I generate rows with position: absolute and adjust their position from the top based on the product of the dummy row height and row number. The concept behind this approach is to implement absolute positioning universally so that the mask does not displace the stripes below when reaching 100%. Additionally, the row has to be absolute to prevent any shifts in the rows below as their contents vanish.

bonus: To witness the reverse effect (text vanishing), visit: http://jsbin.com/uteyik/9 - this served as my initial (yet incorrect) response

Answer 2

Unfortunately, this code may not function properly on jsbin due to its utilization of absolute positioning (unless you opt for the full screen demo).. Nevertheless, I have provided it for you to easily copy and paste into your own browser http://jsbin.com/uteyik/12/.. Check out the highlighted changes below:

css:

.row {
 ..
  position:absolute;   /* adjusted to absolute */

}
.mask {
  ..
  width:100%;  /* changed to 100% */
  position:absolute;   /*adjusted to absolute */
}

and javascript:

jQuery(document).ready(function() {
    function fill_box(rows) {
        var rowHeight = getSampleRowHeight();
        var thisRowHeight = 0;
        for(var i = 0; i < rows; i += 1) {
            $('.box').append('<div class="row" style="top: '+thisRowHeight+'"><div class="scan_cursor i1"> </div><div class="scan_cursor i2"> </div><div class="scan_cursor i3"> </div><div class="mask"> </div></div>');       
            thisRowHeight +=rowHeight;
        }   
    }

    fill_box(30);

    function tag_animate(el) {
        // animate the mask
        el.animate( {
            'margin-left' : '100%'
            }, 
            {
                complete : function () {        
                    tag_animate(el.parent().next().find('.mask'));
                }
            } 
        );
        // animate the stripes
        el.siblings().animate( {
            'margin-left': '100%'
            }, 
            {
               complete : function () {     
                   el.siblings().hide();
               }
            }
        );      
    }    

    tag_animate($('.box').find('.row').eq(0).find('.mask'));

    function getSampleRowHeight() {
        // get sample row height, append to dom to calculate
        $('.box').append('<div class="row" style="display: hidden"> <div class="scan_cursor i1"> </div></div>');
        var rowHeight = $('.row').height();
        $('.box').find('.row').remove();
        return rowHeight;
    }    
 });

explanation: Initially, I create a dummy row to determine its height. Following that, I generate rows with position: absolute and adjust their position from the top based on the product of the dummy row height and row number. The concept behind this approach is to implement absolute positioning universally so that the mask does not displace the stripes below when reaching 100%. Additionally, the row has to be absolute to prevent any shifts in the rows below as their contents vanish.

bonus: To witness the reverse effect (text vanishing), visit: http://jsbin.com/uteyik/9 - this served as my initial (yet incorrect) response

Completely enlarge this inline-block CSS div scan-line

Answer №1

Similar questions

Leveraging Express request-specific variables to facilitate logging with correlation IDs

Communication between the Node development server and the Spring Boot application was hindered by a Cross-Origin Request

Notifier - The Best HTML Notification System for Web Applications

Traverse JSON object as a string

I encountered a permission denied error when trying to enter DEBUG=app ./bin/www in Node.js

"Sparkling div animation with the use of jQuery's .hover() function

Automatically trigger the hover effect in the menu using the Jquery Cycle plugin

What is the best way to update HTML content using JSF reRender or Ajax load, and then rebind the updated DOM with AngularJS?

How can I retrieve the initial truthy value in JavaScript/NextJS for assigning to a property?

Selecting the next element in the DOM using Javascript

Utilize moment.js to convert an epoch date into a designated time zone

results vary when using both a while loop and callback

Display the spinner until the data is successfully updated in the DOM using Angular

The text exceeds the width of the paragraph

Receiving an empty response when utilizing Ajax to fetch a token from an external website

Canceling a promise in a Vuex action

Guide on adding an additional key:value pair to a sub document in a MongoDB collection

Styling div elements within other div elements using CSS

When a selection element has a CSS box-shadow animation applied to it, it reverts to its default settings when expanded or clicked

Unfortunately, Rem fails to honor the preferences of users on their smartphones