как создать непрерывную бегущую строку? [закрыт]

#javascript

        
             
                
                    
                        
                            Closed. This question needs details or clarity. It is
not currently accepting answers.
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            Want to improve this question? Add details and clarify
the problem by editing this post.
                        
                        Closed 2 года назад.
                                                                                
           
                
        
как создать непрерывную бегущую строку?
    

Ответы

Ответ 1

Можно использовать плагин jQuery.Marquee.


duplicated – задает непрерывность текста.      
startVisible – текст должен
заполнять пространство при начале.      
duration – задает время, за
которое текст должен прокрутиться.




$(function() {
  $('.marquee').marquee({
    duration: 7000,
    startVisible: true,
    duplicated: true
  });
});



jQuery plugin to scroll the text like
the old traditional marquee. A 5.51 KB (minified) jQuery plugin to scroll the text
like the old traditional marquee.


Ответ 2

используйте тег Marquee, но учтите он устарел. Но до сих пор работает.



Бегущая строка


Ответ 3

Бегущую строку можно также реализовать с помощью css

Пример



* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.b-marquee {
  font-family: 'Segoe UI', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  background: #333;
  color: #fff;
  padding: 10px;
  position: relative;
  margin-bottom: 10px;
}

.b-marquee__text {
  -webkit-animation: animMarquee 5s linear infinite;
  animation: animMarquee 5s linear infinite;
}

@-webkit-keyframes animMarquee {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

@keyframes animMarquee {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}


/* text right to left*/

.b-marquee--rtl {}

.b-marquee--rtl .b-marquee__text {
  -webkit-animation: animMarqueeRtl 5s linear infinite;
  animation: animMarqueeRtl 5s linear infinite;
}

@-webkit-keyframes animMarqueeRtl {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes animMarqueeRtl {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

  
Text left to right


  
Text right to left



Ответ 4

Если хочется на JS, то пожалуйста :-)



var wrapper = document.querySelector('.marquee-wrapper'),
    marquee = document.querySelector('.marquee'),   
    wrapperWidth = wrapper.offsetWidth,
    marqueeWidth = marquee.scrollWidth;
    
document.querySelector('button').onclick = function() {
  clearInterval(interval)
}
    
function move() {
  var currentTX = getComputedStyle(marquee).transform.split(',');
  if( currentTX[4] === undefined ) {
    currentTX = -1;
  } else {
    currentTX = parseFloat(currentTX[4]) - 1;
  }
  
  if(-currentTX >= marqueeWidth) {
    marquee.style.transform = 'translateX(' + wrapperWidth + 'px)';
  
  } else {
    marquee.style.transform = 'translateX(' + currentTX + 'px)';
  }
}

var interval = setInterval(move, 40);
.marquee-wrapper {
  width: 300px;
  overflow: hidden;
  position: relative;
}

.marquee-wrapper:after {
  position: absolute;
  content: ' ';
  right: 0;
  top: 0;
  width: 50px;
  height: 100%;
  background-image: linear-gradient(to right, transparent, #fff);
}

.marquee {
  white-space: nowrap;
}

  
это бегущая строка, которая реализована при помощи яваскрипта,
хотя можно было бы и без него