News Ticker - Copy this React, Tailwind Component to your project
I want text slide moving like example: <div class="breaknew"> <span class="break news">Breaking News</span> <iframe src="https://m.udayavani.com/widget/categoryarticles" height="70" title="Iframe Example"></iframe> </div>, <html><head><style type="text/css"> @keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d( 100%, 0, 0); } } .tcontainer{ width: 100%; overflow: hidden; display: block; text align: center; padding: 3px; background: #fefefe; border: 1px solid rgba(0,0,0,0.1); border left: 5px solid #4a555a; position: relative; } .ticker wrap { width: 100%; padding left: 100%; } .ticker move { display: inline block; white space: nowrap; padding right: 100%; animation iteration count: infinite; animation timing function: linear; animation name: ticker; animation duration: 60s; } .ticker item{ display: inline block; padding: 0 2rem; border right: 1px solid #ccc; } .ticker_heading{ position: absolute; background: #4a555a z index: 9999; color: #fff; font weight: bold; font size: 12px; padding: 8px 6px 8px 0px; left: 0px; top: 1px; } .ticker move:hover { webkit animation play state: paused; moz animation play state: paused; o animation play state: paused; animation play state: paused; } </style> <script src="https://code.jquery.com/jquery 3.3.1.slim.min.js"></script> <meta name="viewport" content="width=device width, initial scale=1.0, maximum scale=5.0"> </head><body><div class="flash_news"> <div class="tcontainer"><span class="ticker_heading"> </span> <div class="ticker wrap"> <div class="ticker move"> <div class="ticker item"> <a style="text decoration: none;color: inherit;" target="_blank" href="https://www.udayavani.com/cinema/small screen/bbk11 uncle auntie love story troll for friendship with manju what did gautami say">BBK11: ಮಂಜು ಜತೆಗಿನ ಸ್ನೇಹಕ್ಕೆ ಅಂಕಲ್‌ ಆಂಟಿ ಲವ್‌ ಸ್ಟೋರಿ ಟ್ರೋಲ್: ಗೌತಮಿ ಹೇಳಿದ್ದೇನು?</a> </div> <div class="ticker item"> <a style="text decoration: none;color: inherit;" target="_blank" href="https://www.udayavani.com/homepage karnataka edition/big5 karnataka edition/great honour to represent india says eam jaishankar after attending trumps inauguration">US New President: ಭಾರತವನ್ನು ಪ್ರತಿನಿಧಿಸುವುದು ದೊಡ್ಡ ಗೌರವ: ಸಚಿವ ಎಸ್.ಜೈಶಂಕರ್</a> </div> <div class="ticker item"> <a style="text decoration: none;color: inherit;" target="_blank" href="https://www.udayavani.com/news section/national news/andhra pradesh to offer birth death certificates via whatsapp soon">WhatsApp: ಈ ರಾಜ್ಯದಲ್ಲಿ ಇನ್ನು ವಾಟ್ಸಾಪ್ ಮೂಲಕವೇ ಜನನ, ಮರಣ ಪ್ರಮಾಣಪತ್ರ ಸಿಗಲಿದೆಯಂತೆ</a> </div> <div class="ticker item"> <a style="text decoration: none;color: inherit;" target="_blank" href="https://www.udayavani.com/cinema/south cinema/actor darshans gun license temporarily suspended by police">Actor Darshan: ದರ್ಶನ್‌ ಗನ್‌ ಲೈಸೆನ್ಸ್‌ ರದ್ದು ಮಾಡಿದ ಪೊಲೀಸರು</a> </div> <div class="ticker item"> <a style="text decoration: none;color: inherit;" target="_blank" href="https://www.udayavani.com/homepage karnataka edition/big5 karnataka edition/president trump a new era of anomalies donald trumps second term begins">President Trump: ವೈಪರೀತ್ಯಗಳ ಹೊಸ ಯುಗ ಡೊನಾಲ್ಡ್ ಟ್ರಂಪ್ ಎರಡನೇ ಅವಧಿ ಆರಂಭ!</a> </div> <div class="ticker item"> <a style="text decoration: none;color: inherit;" target="_blank" href="https://www.udayavani.com/homepage karnataka edition/breaking news/maoist carrying rs 1 crore bounty among 14 no more in chhattisgarh encounter">Naxals:ಛತ್ತೀಸ್‌ ಗಢ ಟಾಪ್‌ ಕಮಾಂಡರ್‌ ಸೇರಿ 14 ನಕ್ಸಲೀಯರು ಎನ್‌ ಕೌಂಟರ್‌ ಗೆ ಬ*ಲಿ</a> </div> <div class="ticker item"> <a style="text decoration: none;color: inherit;" target="_blank" href="https://www.udayavani.com/district news/kodagu news/wild elephant attack on canteen">Madikeri: ಬೆಳ್ಳಂಬೆಳಗ್ಗೆ ಕ್ಯಾಂಟೀನ್ ಮೇಲೆ ಕಾಡಾನೆ ದಾಳಿ… ಪಾರಾದ ದಂಪತಿ</a> </div> <div class="ticker item"> <a style="text decoration: none;color: inherit;" target="_blank" href="https://www.udayavani.com/district news/belgaum news/rahul is not coming to jai bapu jai bheem jai constitution convention">ಜೈ ಬಾಪು, ಜೈ ಭೀಮ್, ಜೈ ಸಂವಿಧಾನ ಸಮಾವೇಶಕ್ಕೆ ರಾಹುಲ್ ಬರುತ್ತಿಲ್ಲ; ಸಿಎಂ ಸ್ಪಷ್ಟನೆ</a> </div> <div class="ticker item"> <a style="text decoration: none;color: inherit;" target="_blank" href="https://www.udayavani.com/news section/national news/devotees caught eating egg biryani at tirumala face police warning">TTD: ತಿರುಮಲದಲ್ಲಿ ಎಗ್ ಬಿರಿಯಾನಿ ತಿಂದು ಸಿಕ್ಕಿಬಿದ್ದ ಭಕ್ತರ ಗುಂಪು.. ಪೊಲೀಸರಿಂದ ತರಾಟೆ</a> </div> <div class="ticker item"> <a style="text decoration: none;color: inherit;" target="_blank" href="https://www.udayavani.com/cinema/south cinema/it officials raid dil raju and pushpa 2 producers properties">IT Raids: ʼಪುಷ್ಪ 2ʼ, ‘ಗೇಮ್‌ ಚೇಂಜರ್‌’ ನಿರ್ಮಾಪಕರ ನಿವಾಸ‌, ಕಚೇರಿ ಮೇಲೆ ಐಟಿ ರೇಡ್</a> </div> </div> </div></div></div> <script type="text/javascript"> var category_id = 31085653; var records = 10; function getHtmlForFlashNews(posts) { var html = ''; html += '<div class="tcontainer"><span class="ticker_heading"> </span>'; html += ' <div class="ticker wrap">'; html += ' <div class="ticker move">'; $.each(posts, function(index, post) { html += ' <div class="ticker item"> <a style="text decoration: none;color: inherit;" target="_blank" href="'+post['url']+'">' +post['t']+ '</a> </div>'; }); html += ' </div>'; html += ' </div>'; html += '</div>'; $('.flash_news').append(html); } function getFlashNews() { fetch('/widget/postsbycategory/'+category_id+'/'+records) .then(function(response) { return response.text(); }) .then(function(response) { var posts = JSON.parse(response) ; if(!posts.status) { return; } getHtmlForFlashNews(posts.data); }).catch(function(error) { console.log('Request failure: ', error); }); } getFlashNews(); </script><! page is cached at 2025 01 21 14:41:22 ></body></html>
