jquery/css: एक समाचार टिकर की प्लगइन की तरह क्षैतिज रूप से div scroll के अंदर टेक्स्ट बनाएं

Question

किसी के पास प्लगइन का उपयोग किए बिना "न्यूज़ टिकर" फैशन में दाएं से बाएं से क्षैतिज रूप से एक div scroll के अंदर पाठ को कैसे बनाना है, इस पर कुछ सुझाव हैं। । यहां एक उदाहरण दिया गया है जिसे मैं पूरा करने की कोशिश कर रहा हूं (यह एक प्लगइन समाधान है: http://www.maaki.com/scrollingText.html)।

Answer 1

यहाँ इस के लिए एक त्वरित समाधान है: http://jsfiddle.net/4mTMw/8/

var marquee = $('div.marquee'); 
marquee.each(function() { 
    var mar = $(this),indent = mar.width(); 
    mar.marquee = function() { 
     indent--; 
     mar.css('text-indent',indent); 
     if (indent < -1 * mar.children('div.marquee-text').width()) { 
      indent = mar.width(); 
     } 
    }; 
    mar.data('interval',setInterval(mar.marquee,1000/60)); 
});​ 

text-indent सीएसएस संपत्ति का उपयोग करना, आप इस बल्कि बस कर सकते हैं।

Answer 2

आप इस

<div id="scrollcontainer" style="postion:relative; overflow:hidden; width:100%;"> 
    <span id="scrolltext" style="position:absolute; white-space:nowrap">this is the scrolling text</span> 
</div> 

और एक js समारोह

function scroll() { 
    $('#scrolltext').css('left', $('#scrollcontainer').width()); 
    $('#scrolltext').animate({ 
    left: '-='+($('#scrollcontainer').width()+$('#scrolltext').width()) 
    }, 2000, function() { 
    scroll(); 
    }); 
} 

scroll(); 

परीक्षण किया की तरह कुछ कर सकता है। यहां पाया जा सकता: http://jsfiddle.net/zrW5q/85/

Answer 3

मैंने हाल ही में इसे सीएसएस कीफ्रेम एनिमेशन के साथ हल किया है।

अनिवार्य रूप से आपके टिकर को उस पर छिपे ओवरफ्लो के साथ एक रैपर div की आवश्यकता होती है।

<div class="ticker-wrap"> 
    <div class="ticker"> 
     <div class="ticker__item">Letterpress chambray brunch.</div> 
     <div class="ticker__item">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div> 
     <div class="ticker__item">Ugh PBR&B kale chips Echo Park.</div> 
    </div> 
</div> 

उदाहरण सीएसएस: टिकर आइटम इनलाइन-ब्लॉक प्रदर्शित करना चाहिए ताकि वे एक कतार में हैं निहित

.ticker-wrap { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    overflow: hidden; 
    height: 4rem; 
    background-color: rgba(51, 51, 51, 0.5); 
    padding-left: 100%; // offsets items to begin 
} 

.ticker { 
    display: inline-block; 
    height: 4rem; 
    line-height: 4rem; 
    white-space: nowrap; 
    padding-right: 100%; // taken from container as display inline-block 
} 

.ticker__item { 
    display: inline-block; 
    padding: 0 2rem; 
    font-size: 2rem; 
    color: white; 
} 

मैं a demo है तो करने के लिए सीएसएस-फ़्रेम एनीमेशन का उपयोग करता है सामग्री को बदलने सभी एक तरफ से दूसरी तरफ असीम तरीके से। N.B. विक्रेता prefixed संस्करण दिखाया नहीं है।

@keyframes ticker { 
    0% { 
     -webkit-transform: translate3d(0, 0, 0); 
       transform: translate3d(0, 0, 0); 

    } 
    100% { 
     -webkit-transform: translate3d(-100%, 0, 0); 
       transform: translate3d(-100%, 0, 0); 
    } 
} 

एनीमेशन अवधि निर्धारित करने और इसे टिकर पर लागू करने के लिए आपको केवल एक ही ट्विक की आवश्यकता है।

.ticker { 
    animation-name: ticker; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
    animation-duration: 25s; // tweak based on number of items/desired speed 
} 

आप देख सकते हैं full demo