Wie kann man den Marquee-Effekt ohne Verwendung des Tags <marquee> bekommen (mit CSS, JavaScript und jQuery).

  1. Bekommen Sie den Marquee-Effekt mit CSS-Animationen (horizontal und vertikal)
  2. Bekommen Sie den Marquee-Effekt mit JavaScript
  3. Erstellen Sie das Plugin zum Scrollen von Texten mit jQuery.

Das Tag <marquee> wird nicht mehr verwendet. Es ist ein altes und nicht standardmäßiges HTML-Element, das verwendet wurde, um den Text oder das Bild automatisch nach oben, unten, links oder rechts auf der Webseite zu scrollen.

Heutzutage wird es überhaupt nicht mehr verwendet. Es gibt keine Notwendigkeit und keinen Nutzen, kontinuierlich durchlaufenden Text zu haben. Niemand möchte einen Text lesen, der nicht still bleibt.

Aber, wenn Sie den Marquee-Effekt benötigen, finden Sie unten einige alternative Möglichkeiten, es mit CSS, JavaScript und jQuery zu bekommen.

Marquee-Effekt mit CSS-Animationen (horizontal und vertikal)

Verwenden Sie die CSS-Eigenschaften animation und transform mit @keyframes at-rule, um den Marquee-Effekt ohne Verwendung des Tages <marquee> zu bekommen.

Für das horizontale Scrollen des Textes setzen Sie den Wert "marquee 10s linear infinite;" für die Eigenschaft animation (ändern Sie die Sekunden nach Ihren Bedürfnissen). Definieren Sie dann die Animation, um sie zu bewegen:

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

Nun, lassen Sie uns sehen, wie der Text von rechts nach links scrollen wird:

Beispiel

<!DOCTYPE html>
<html>
  <title>Der Titel des Dokuments</title>
  <head>
    <style>
      div {
      background-color: #1c87c9;
      color: #fff;
      padding: 5px;
      }
      p {
      -moz-animation: marquee 10s linear infinite;
      -webkit-animation: marquee 10s linear infinite;
      animation: marquee 10s linear infinite;
      }
      @-moz-keyframes marquee {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
      }
      @-webkit-keyframes marquee {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
      }
      @keyframes marquee {
      0% { 
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%) }
      100% { 
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%); }
      }
    </style>
  </head>
  <body>
    <div>
      <p>Dies ist ein horizontal scrollender Text ohne das Tag marquee.</p>
    </div>
  </body>
</html>

Dann lassen Sie uns den Text vertikal scrollen. Diesmal müssen wir die Werte der Eigenschaft transform wie folgt ändern:

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(0, -100%); }
}

Unser von unten nach oben scrollender Text sieht wie folgt aus:

Beispiel

<!DOCTYPE html>
<html>
  <title>Der Titel des Dokuments</title>
  <head>
    <style>
      div {
      background-color: #1c87c9;
      color: #fff;
      text-align: center;
      }
      p {
      display: inline-block;
      padding-top: 100%;
      -moz-animation: marquee 5s linear infinite;
      -webkit-animation: marquee 5s linear infinite;
      animation: marquee 5s linear infinite;
      }
      @-moz-keyframes marquee {
      0%   { transform: translate(0, 0); }
      100% { transform: translate(0, -100%); }
      }
      @-webkit-keyframes marquee {
      0%   { transform: translate(0, 0); }
      100% { transform: translate(0, -100%); }
      }
      @keyframes marquee {
      0%   { 
      -moz-transform: translate(0, 0);
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0); }
      100% { 
      -moz-transform: translate(0, -100%);
      -webkit-transform: translate(0, -100%);
      transform: translate(0, -100%); }
      }
    </style>
  </head>
  <body>
    <div>
      <p>
Dies ist ein vertikal scrollender Text ohne das Tag marquee.</p>
    </div>
  </body>
</html>

Sie können den Selektor :hover mit der Eigenschaft animation-play-state verwenden, um das Scrollen des Textes bei gedrückter Maustaste zu stoppen. Setzten Sie den Wert "paused" für animation-play-state.

:hover {
    animation-play-state: paused;
  }

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .marquee {
      margin: 0 auto;
      width: 600px;
      height: 30px;
      white-space: nowrap;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
      }
      .marquee:before, .marquee:after {
      position: absolute;
      top: 0;
      width: 50px;
      height: 30px;
      content: "";
      z-index: 1;
      }
      .marquee:before {
      left: 0;
      background: linear-gradient(to right, #ccc 10%, transparent 80%);
      }
      .marquee:after {
      right: 0;
      background: linear-gradient(to left, #ccc 10%, transparent 80%);
      }
      .marquee__content {
      width: 300%;
      display: flex;
      line-height: 30px;
      animation: marquee 10s linear infinite forwards;
      }
      .marquee__content:hover {
      animation-play-state: paused;
      }
      .list-inline {
      display: flex;
      justify-content: space-around;
      width: 33.33%;
      /* reset list */
      list-style: none;
      padding: 0;
      margin: 0;
      }
      @keyframes marquee {
      0% {
      transform: translateX(0);
      }
      100% {
      transform: translateX(-66.6%);
      }
      }
    </style>
  </head>
  <body>
    <div class="marquee">
      <div class="marquee__content">
        <ul class="list-inline">
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
        </ul>
        <ul class="list-inline">
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
        </ul>
        <ul class="list-inline">
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
        </ul>
      </div>
    </div>
  </body>
</html>

Marquee-Effekt mit JavaScript

Hier wird vanilla JS verwendet:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      font-family: sans-serif;
      font-weight: 700;
      height: 600vh;
      background: #d66d75;
      background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
      }
      .marquee {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      }
      .marquee .inner {
      position: relative;
      width: 100%;
      display: flex;
      color: white;
      font-size: 8rem;
      }
      .marquee .inner > * {
      white-space: nowrap;
      padding: 0 4rem;
      }
    </style>
  </head>
  <body>
    <div class="marquee">
      <div class="inner">
        <p>Hello world of humans.</p>
      </div>
    </div>
    <script>
      function handleMarquee(){
      	const marquee = document.querySelectorAll('.marquee');
      	let speed = 4;
      	let lastScrollPos = 0;
      	let timer;
      	
      	marquee.forEach(function(el){
      		const container = el.querySelector('.inner');
      		const content = el.querySelector('.inner > *');
      		//Get total width
      		const  elWidth = content.offsetWidth;
      		
      		
      		//Duplicate content
      		let clone = content.cloneNode(true);
      		container.appendChild(clone);
      		
      		let progress = 1;
      		function loop(){
      			progress = progress-speed;
      			if(progress <= elWidth*-1) {progress=0;}
      			container.style.transform = 'translateX(' + progress + 'px)';
      			container.style.transform += 'skewX(' + speed*0.4 + 'deg)';
      			
      			window.requestAnimationFrame(loop);
      		}
      		loop();
      	});
      	
      	window.addEventListener('scroll', function(){
      		const maxScrollValue = 12;
      		const newScrollPos = window.scrollY;
      		let scrollValue = newScrollPos - lastScrollPos;
      		
      		
      		if( scrollValue > maxScrollValue ) scrollValue = maxScrollValue;
          else if( scrollValue < -maxScrollValue ) scrollValue = -maxScrollValue;
      		
      		speed = scrollValue;
      		
      		clearTimeout(timer);
          timer = setTimeout(handleSpeedClear, 10);
      	});
      	
      	function handleSpeedClear(){
      		speed = 4;
      	}
      };
      
      handleMarquee();
    </script>
  </body>
</html>

Plugin zum Scrollen von Texten mit jQuery

Die Verwendung von jQuery ist eine weitere alternative Möglichkeit, das Ergebnis von Marquee zu erhalten. Lassen Sie uns, es Schritt für Schritt zu erklären:

  1. Schließen Sie die jQuery-Bibliothek und Marquee.js in Ihren Header ein:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>
  1. Fügen Sie das Plugin jQuery easing ein, um die Optionen zu erleichtern:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  1. Schreiben Sie das Markup:
<div class="marquee">Hier kommt ein Text.</div>
  1. Aufruf des Plugins: 
<script>
	$(function(){
		$('.marquee').marquee();		
	});
</script>
  1. Definieren Sie diese Optionen, wenn Sie die Standardfunktionalitäten neu schreiben möchten:
$(function(){
  $('.marquee').marquee({

  //If you wish to always animate using jQuery
  allowCss3Support: true,

  //works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
  css3easing: 'linear',

  //requires jQuery easing plugin. Default is 'linear'
  easing: 'linear',

  //pause time before the next animation turn in milliseconds
  delayBeforeStart: 1000,
  //'left', 'right', 'up' or 'down'
  direction: 'left',

  //true or false - should the marquee be duplicated to show an effect of continues flow
  duplicated: false,

  //speed in milliseconds of the marquee in milliseconds
  duration: 5000,

  //gap in pixels between the tickers
  gap: 20,

  //on cycle pause the marquee
  pauseOnCycle: false,

  //on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
  pauseOnHover: false,

  //the marquee is visible initially positioned next to the border towards it will be moving
  startVisible: false
  
  });
});

Nun lassen Sie uns sehen, wie es aussehen wird:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <div class="marquee">Ein Text geht hier entlang.</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <script>
      $(function(){
        $('.marquee').marquee({
      
        //If you wish to always animate using jQuery
        allowCss3Support: true,
      
        //works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
        css3easing: 'linear',
      
        //requires jQuery easing plugin. Default is 'linear'
        easing: 'linear',
      
        //pause time before the next animation turn in milliseconds
        delayBeforeStart: 1000,
        //'left', 'right', 'up' or 'down'
        direction: 'left',
      
        //true or false - should the marquee be duplicated to show an effect of continues flow
        duplicated: false,
      
        //speed in milliseconds of the marquee in milliseconds
        duration: 5000,
      
        //gap in pixels between the tickers
        gap: 20,
      
        //on cycle pause the marquee
        pauseOnCycle: false,
      
        //on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
        pauseOnHover: false,
      
        //the marquee is visible initially positioned next to the border towards it will be moving
        startVisible: false
        
        });
      });
    </script>
  </body>
</html>