Forum - Foren-Code "marquee" modernisieren - Mit Erweiterung für verschiedene Laufrichtungen Teil 1+2

<style>
.marquee-box {
  --marquee-font-size: 16px;
  --marquee-color: #ffffff;
  background: #2c3e50;
  padding: 10px 0;
 
  max-width: 100%; width: 100%; overflow: hidden; white-space: nowrap; color: var(--marquee-color);
}
.marquee-text { max-width: 100%;  width: 100%;  overflow: hidden; display: inline-block; padding-left: 0;}
.marquee-box[data-direction="links"] .marquee-text {animation: marquee-left var(--speed) linear infinite;}
.marquee-box:hover .marquee-text {animation-play-state: paused;}
.marquee-text a {color: var(--marquee-color); text-decoration: none !important;}
.marquee-text a:hover { color: #aaffff;}
 
@keyframes marquee-left {100% { transform: translateX(-100%); }}
</style>
 
<div class="marquee-box timed-news" data-direction="links" data-speed="3" data-end="30.04.2026">
    <div class="marquee-text">
       <a href="https://www.hilfe-tricks-tipps.de/"><span style="font-weight: bold;">+++ Laufrichtung: Nach LINKS +++ Willkommen im Forum! +++</span></a>
    </div>
</div>
 
<script>
document.addEventListener("DOMContentLoaded", function () {
  // Laufzeitkorrektur
  function updateMarquee() {
    document.querySelectorAll('.marquee-box[data-direction="links"]').forEach(box => {
      const text = box.querySelector('.marquee-text'); const start = box.clientWidth; text.style.transform = `translateX(${start}px)`;
      const duration = (box.clientWidth + text.scrollWidth) / (60 * (Number(box.dataset.speed) || 1));
      box.style.setProperty("--speed", duration + "s");
    });
  }
  window.addEventListener("load", () => {requestAnimationFrame(() => setTimeout(updateMarquee, 0)); });
  window.addEventListener("resize", updateMarquee);
 
  // Zeitgesteuerte News – Mit End-Datum für alle DE-Formate
  const today = new Date().toISOString().slice(0, 10);
  $('.timed-news').each(function () {
    const fix = d => {if (!d) return null; let [day, mon, year] = d.split('.');  if (year.length === 2) year = '20' + year; if (day.length === 1) day = '0' + day;  if (mon.length === 1) mon = '0' + mon; return `${year}-${mon}-${day}`; };
    const end = fix($(this).data('end')); const visible = (!end || end >= today);
    $(this).toggle(visible);
  });
});
</script>
 

[marquee={{direction}}={{speed}}={{date}}]
 

...
 

[/marquee]
 

<div class="marquee-box timed-news" data-direction="{{direction}}" data-speed="{{speed}}" data-end="{{date}}"><div class="marquee-text">
 

...
 

</div></div>
 

//files.homepagemodules.de/b104774/a_888_4d1a26d8.png
 

Reihenfolge: 0
 

<div onclick="xob_insert('[marquee=links=3=30.04.26]','+++ Herzlich willkommen! +++[/marquee]')" class="xob_icon_cont" id="icon_7001"><img title="LS-Button einfügen (Laufrichtung, Geschwindigkeit, End-Datum)" class="xob_icon" src="//files.homepagemodules.de/b104774/a_888_4d1a26d8.png" width="25px"></div>
 

[marquee=links=3=30.04.26]+++ Herzlich willkommen! +++[/marquee]
 

<style>
.marquee-box {
  --marquee-font-size: 16px;
  --marquee-color: #ffffff;
  background: #2c3e50;
  padding: 10px 0;
 
  max-width: 100%; width: 100%; overflow: hidden; white-space: nowrap; color: var(--marquee-color);
}
.marquee-text { max-width: 100%;  width: 100%;  overflow: hidden; display: inline-block; padding-left: 0;}
.marquee-box[data-direction="links"] .marquee-text {animation: marquee-left var(--speed) linear infinite;}
.marquee-box:hover .marquee-text {animation-play-state: paused;}
.marquee-text a {color: var(--marquee-color); text-decoration: none !important;}
.marquee-text a:hover { color: #aaffff;}
 
@keyframes marquee-left {100% { transform: translateX(-100%); }}
</style>
 
<script>
document.addEventListener("DOMContentLoaded", function () {
  // Laufzeitkorrektur
  function updateMarquee() {
    document.querySelectorAll('.marquee-box[data-direction="links"]').forEach(box => {
      const text = box.querySelector('.marquee-text'); const start = box.clientWidth; text.style.transform = `translateX(${start}px)`;
      const duration = (box.clientWidth + text.scrollWidth) / (60 * (Number(box.dataset.speed) || 1));
      box.style.setProperty("--speed", duration + "s");
    });
  }
  window.addEventListener("load", () => {requestAnimationFrame(() => setTimeout(updateMarquee, 0)); });
  window.addEventListener("resize", updateMarquee);
 
  // Zeitgesteuerte News – Mit End-Datum für alle DE-Formate
  const today = new Date().toISOString().slice(0, 10);
  $('.timed-news').each(function () {
    const fix = d => {if (!d) return null; let [day, mon, year] = d.split('.');  if (year.length === 2) year = '20' + year; if (day.length === 1) day = '0' + day;  if (mon.length === 1) mon = '0' + mon; return `${year}-${mon}-${day}`; };
    const end = fix($(this).data('end')); const visible = (!end || end >= today);
    $(this).toggle(visible);
  });
});
</script>
 

<style>
.marquee-box { 
  --marquee-font-size: 16px;
  --marquee-color: #fff;
  background:#2c3e50;
  padding: calc(var(--marquee-font-size) * 1.0) 0;
  
  font-size: var(--marquee-font-size); position: relative; overflow: hidden; white-space: nowrap; cursor: pointer;
}
.marquee-text {position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; color: var(--marquee-color);}
.marquee-text a { color: var(--marquee-color); text-decoration: none !important; }
.marquee-text a:hover { color:#aaffff; }
</style>
 
<br>
<div class="marquee-box timed-news" data-direction="pingpong" data-speed="1">
    <div class="marquee-text">
        <a href="https://www.hilfe-tricks-tipps.de/"><span style="font-weight: bold;">+++ Laufrichtung: PINGPONG +++ Willkommen im Forum! +++</span></a>
    </div>
</div>
<br>
 
<div class="marquee-box timed-news" data-direction="links" data-speed="1" data-start="3.04.2026" data-end="30.04.2026">
    <div class="marquee-text">
        <a href="https://www.hilfe-tricks-tipps.de/"><span style="font-weight: bold;">+++ Laufrichtung: Nach LINKS +++ Willkommen im Forum! +++ Willkommen im Forum! +++ </span></a>
    </div>
</div>
<br>
 
<div class="marquee-box timed-news" data-direction="rechts" data-speed="1" data-start="3.04.2026" data-end="30.04.2026">
    <div class="marquee-text">
        <a href="https://www.hilfe-tricks-tipps.de/"><span style="font-weight: bold;">+++ Laufrichtung: Nach RECHTS +++ Willkommen im Forum! +++ Willkommen im Forum! +++</span></a>
    </div>
</div>
<br>
 
<div class="marquee-box timed-news" data-direction="endlos" data-speed="1" data-start="3.04.2026" data-end="30.04.2026">
    <div class="marquee-text">
        <a href="https://www.hilfe-tricks-tipps.de/"><span style="font-weight: bold;">+++ Laufrichtung: ENDLOS +++ Willkommen im Forum! +++ Willkommen im Forum! +++</span></a>
    </div>
</div>
<br>
 
<script>
document.addEventListener("DOMContentLoaded", () => {
  /* Zeit-News */
  const today = new Date().toISOString().slice(0,10);
  $('.timed-news').each(function(){const fix = d => { if(!d) return null; let [day, mon, yr] = d.split('.'); if(yr.length === 2) yr = '20' + yr; return `${yr}-${mon.padStart(2,'0')}-${day.padStart(2,'0')}`;}; const s = fix($(this).data('start')); const e = fix($(this).data('end')); $(this).toggle((!s || s <= today) && (!e || e >= today)); });
 
  /* Laufschrift: LINKS, RECHTS, ENDLOS, PINGPONG */
  $('.marquee-box').each(function(){
    const box = $(this), txt = box.find('.marquee-text'); let pos1 = 0, pos2 = 0, anim, clone = null, filled = false;
    const baseSpd = parseFloat(box.data('speed')) || 1;
    const mode = (box.data('direction') || "links").toLowerCase(); let spd = baseSpd, move = "rechts", resizeTimer = null;
    const apply = (el, x) => el.css('transform', `translateY(-50%) translateX(${x}px)`);
 
    function run(){
      if(anim) cancelAnimationFrame(anim);
      const bw = box.width(); let tw = txt.width();
 
      // ENDLOS nur einmal auffüllen
      if(mode === "endlos" && !filled){const html = txt.html(); while(txt.width() < bw * 2) txt.append(html); clone = txt.clone().appendTo(box); filled = true; tw = txt.width();}
 
      // Speed-Faktor (1-10)
      spd = 0.5 + baseSpd * 0.3;
 
      // Startpositionen */
      if(mode === "links") pos1 = bw; else if(mode === "rechts") pos1 = -tw; else if(mode === "endlos"){ pos1 = 0; pos2 = tw; } else if(mode === "pingpong"){ pos1 = 0; move = "rechts"; }
 
      // Loop
      (function loop(){
        if(mode === "links"){pos1 -= spd; if(pos1 < -tw) pos1 = bw; apply(txt, pos1); } else if(mode === "rechts"){pos1 += spd; if(pos1 > bw) pos1 = -tw; apply(txt, pos1);} else if(mode === "endlos"){pos1 -= spd; pos2 -= spd; if(pos1 < -tw) pos1 = pos2 + tw; if(pos2 < -tw) pos2 = pos1 + tw; apply(txt, pos1); apply(clone, pos2);} else if(mode === "pingpong"){pos1 += (move === "rechts" ? spd : -spd); if(pos1 <= 0) move = "rechts"; if(pos1 + tw >= bw) move = "links"; apply(txt, pos1);}
        anim = requestAnimationFrame(loop);
      })();
    }
 
    // Start
    apply(txt, 0); run();
 
    // Resize
    $(window).on('resize', () => {clearTimeout(resizeTimer); resizeTimer = setTimeout(run, 200);});
 
    // Hover Pause + Speed-Faktor
    box.on('mouseenter', ()=> spd = 0); box.on('mouseleave', () => spd = 0.5 + baseSpd * 0.3);
  });
});
</script>
 

[marquee={{direction}}={{speed}}={{dateStart}}={{dateEnd}}]
 

...
 

[/marquee]
 

<div class="marquee-box timed-news" data-direction="{{direction}}" data-speed="{{speed}}" data-start="{{dateStart}}" data-end="{{dateEnd}}"><div class="marquee-text">
 

...
 

</div></div>
 

//files.homepagemodules.de/b104774/a_888_4d1a26d8.png
 

Reihenfolge: 0
 

<div onclick="xob_insert('[marquee=links=3=03.04.26=30.04.30]','+++ Herzlich willkommen! +++[/marquee]')" class="xob_icon_cont" id="icon_7002"><img title="LS-Button einfügen (Laufrichtung, Geschwindigkeit, Start-Datum + End-Datum)" class="xob_icon" src="//files.homepagemodules.de/b104774/a_888_4d1a26d8.png" width="25px"></div>
 

[marquee=links=3=03.04.26=30.04.30]+++ Herzlich willkommen! +++[/marquee]
 

<style>
.marquee-box { 
  --marquee-font-size: 16px;
  --marquee-color: #fff;
  background:#2c3e50;
  padding: calc(var(--marquee-font-size) * 1.0) 0;
  
  font-size: var(--marquee-font-size); position: relative; overflow: hidden; white-space: nowrap; cursor: pointer;
}
.marquee-text {position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; color: var(--marquee-color);}
.marquee-text a { color: var(--marquee-color); text-decoration: none !important; }
.marquee-text a:hover { color:#aaffff; }
</style>
 
<script>
document.addEventListener("DOMContentLoaded", () => {
  /* Zeit-News */
  const today = new Date().toISOString().slice(0,10);
  $('.timed-news').each(function(){const fix = d => { if(!d) return null; let [day, mon, yr] = d.split('.'); if(yr.length === 2) yr = '20' + yr; return `${yr}-${mon.padStart(2,'0')}-${day.padStart(2,'0')}`;}; const s = fix($(this).data('start')); const e = fix($(this).data('end')); $(this).toggle((!s || s <= today) && (!e || e >= today)); });
 
  /* Laufschrift: LINKS, RECHTS, ENDLOS, PINGPONG */
  $('.marquee-box').each(function(){
    const box = $(this), txt = box.find('.marquee-text'); let pos1 = 0, pos2 = 0, anim, clone = null, filled = false;
    const baseSpd = parseFloat(box.data('speed')) || 1;
    const mode = (box.data('direction') || "links").toLowerCase(); let spd = baseSpd, move = "rechts", resizeTimer = null;
    const apply = (el, x) => el.css('transform', `translateY(-50%) translateX(${x}px)`);
 
    function run(){
      if(anim) cancelAnimationFrame(anim);
      const bw = box.width(); let tw = txt.width();
 
      // ENDLOS nur einmal auffüllen
      if(mode === "endlos" && !filled){const html = txt.html(); while(txt.width() < bw * 2) txt.append(html); clone = txt.clone().appendTo(box); filled = true; tw = txt.width();}
 
      // Speed-Faktor (1-10)
      spd = 0.5 + baseSpd * 0.3;
 
      // Startpositionen */
      if(mode === "links") pos1 = bw; else if(mode === "rechts") pos1 = -tw; else if(mode === "endlos"){ pos1 = 0; pos2 = tw; } else if(mode === "pingpong"){ pos1 = 0; move = "rechts"; }
 
      // Loop
      (function loop(){
        if(mode === "links"){pos1 -= spd; if(pos1 < -tw) pos1 = bw; apply(txt, pos1); } else if(mode === "rechts"){pos1 += spd; if(pos1 > bw) pos1 = -tw; apply(txt, pos1);} else if(mode === "endlos"){pos1 -= spd; pos2 -= spd; if(pos1 < -tw) pos1 = pos2 + tw; if(pos2 < -tw) pos2 = pos1 + tw; apply(txt, pos1); apply(clone, pos2);} else if(mode === "pingpong"){pos1 += (move === "rechts" ? spd : -spd); if(pos1 <= 0) move = "rechts"; if(pos1 + tw >= bw) move = "links"; apply(txt, pos1);}
        anim = requestAnimationFrame(loop);
      })();
    }
 
    // Start
    apply(txt, 0); run();
 
    // Resize
    $(window).on('resize', () => {clearTimeout(resizeTimer); resizeTimer = setTimeout(run, 200);});
 
    // Hover Pause + Speed-Faktor
    box.on('mouseenter', ()=> spd = 0); box.on('mouseleave', () => spd = 0.5 + baseSpd * 0.3);
  });
});
</script>