पूरी तरह से इस सीएसएस इनलाइन-ब्लॉक div स्कैन-लाइन

Question

का विस्तार करें, मैं चाहता हूं कि यह स्कैन लाइन प्रभाव ठीक से काम करे। पर टेक्स्ट को बाएं से दाएं से प्रकट करें। जैसे कि कैथोड-रे स्क्रीन पर फॉस्फोर में जल रहा है।

विचार काले पंक्तियों में स्लाइड करना है, जिसमें एक पारदर्शी युक्ति है। Here is a 80% working demo. प्रत्येक पंक्ति में दाएं काले .mask div का विस्तार नहीं होगा। यह जरुरी है।

मैंने सही-से-अधिक .mask div को काले रंग की पृष्ठभूमि के साथ इनलाइन-ब्लॉक के रूप में रखने की कोशिश की है और इसे पूर्ण चौड़ाई बना दिया है। मैं कुछ हद तक समझता हूं कि अनुरोध क्यों काम नहीं करता है (चौड़ाई: 100% अन्य इनलाइन-ब्लॉक को अगली पंक्ति पर धक्का देता है, जैसा कि केवल उचित है), लेकिन जावास्क्रिप्ट में चौड़ाई को हैक किए बिना इस पूर्ण दाएं हाथ को पाने का एक तरीका होना चाहिए ।

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

Answer 1

इस jsbin पर काम नहीं करेगा क्योंकि यह पूर्ण स्थिति का उपयोग करता है (जब तक आप पूर्ण स्क्रीन डेमो देखने) .. लेकिन मैं यह वैसे भी आप कॉपी करना के लिए/इसे अपने ब्राउज़र http://jsbin.com/uteyik/12/ में पेस्ट .. नीचे प्रदान की

सीएसएस:

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

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

और जावास्क्रिप्ट:

परिवर्तन मुख्य आकर्षण हैं

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

स्पष्टीकरण: मैं पहले एक डमी पंक्ति बनाते हैं और इसकी ऊंचाई की गणना करता हूं। मैं फिर पंक्तियां बनाते हैं जिनमें position: absolute है और डमी पंक्ति ऊंचाई x पंक्ति संख्या का उपयोग करके इसे शीर्ष से स्थिति दें। विचार यह है कि मैं पूर्ण स्थिति के साथ सबकुछ बनाना चाहता था ताकि मास्क 100% होने पर पट्टियों को नीचे धक्का न दे, तो पंक्ति भी पूर्ण होनी चाहिए क्योंकि जब मैं इसे सामग्री गायब कर देता हूं, तो मैं नहीं चाहता कूदने के लिए नीचे पंक्तियां।

बोनस: यह विपरीत रास्ता (यानी पाठ गायब) काम देखें: http://jsbin.com/uteyik/9 यह मेरा प्रारंभिक (और गलत) जवाब