arie_cristianD

change news ticker to post marque style

Jan 26th, 2026
149
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.48 KB | None | 0 0
  1. .jeg_news_ticker {
  2.   overflow: hidden;
  3.   padding-right: 15px !important;
  4. }
  5. .jeg_news_ticker .jeg_news_ticker_item {
  6.   animation: none !important;
  7.   transition: none !important;
  8.   opacity: 1 !important;
  9.   position: relative;
  10. }
  11.  
  12. .jeg_news_ticker .jeg_news_ticker_items {
  13.   display: flex;
  14.   gap: 20px;
  15.   overflow: hidden;
  16.   user-select: none;
  17.   -webkit-user-select: none;
  18.   -moz-user-select: none;
  19. }
  20.  
  21. .jeg_news_ticker .jeg_news_ticker_items .marque-wrapper {
  22.   align-items: center;
  23.   animation: jnews-marque-animate 18s linear infinite; /* you can cahgne the animation duration here */
  24.   display: flex;
  25.   flex-shrink: 0;
  26.   gap: 20px;
  27.   justify-content: space-around;
  28.   min-width: 100%;
  29.   transition: margin-left .7s ease-out;
  30. }
  31.  
  32. .jeg_news_ticker .jeg_news_ticker_items.stop:hover .marque-wrapper {
  33.   animation-play-state: paused;
  34.   transition: margin-left .5s ease-out;
  35. }
  36.  
  37. .jeg_news_ticker .jeg_news_ticker_items.stop:hover .marque-wrapper:first-child {
  38.   margin-left: -50px;
  39. }
  40.  
  41.  
  42. .jeg_news_ticker .jeg_news_ticker_items.stop:hover.reverse .marque-wrapper:first-child {
  43.   margin-left: 50px;
  44. }
  45.  
  46. .jeg_news_ticker .jeg_news_ticker_item {
  47.   flex: 0 0 auto;
  48.   display: inline-flex;
  49.   align-items: center;
  50.   gap: 10px;
  51.   white-space: nowrap;
  52. }
  53.  
  54. /* Hide the news ticker nav */
  55. .jeg_news_ticker .jeg_news_ticker_control {
  56.   display: none;
  57. }
  58.  
  59. @keyframes jnews-marque-animate {
  60.   0% { transform: translateX(0); }
  61.   to { transform: translateX(calc(-100% - 20px)); }
  62. }
Advertisement
Add Comment
Please, Sign In to add comment