Einfliegender Text

eagleroxx · 17 September 2012

Hallo alle miteinander,

ich versuche einen "einfliegenden" Text zu erstellen jedoch sollen ca. 5 Sätze einfliegen.
Zwischen jeder dieser einfliegenden Sätze soll eine Pause liegen am besten wäre es wenn die Sätze von Rechts in die Mitte einfliegen.

Habe dazu bereits einen Code:

<html>
<head>
<meta name="generator" content="HTML Studio">
<title> </title>
<script language="JavaScript">
//config
ft=27//Geschwindikeit Faktor Oben
fl=26//Geschwindikeit Faktor links
s=60//Aktualisierung millisekunden
et=282//Endposition oben
el=290//Endposition links
//config ende

function schieb()
{
c=0;
nt=document.getElementById("flieger").style.top;
nt=parseInt(nt.slice(0,nt.length-2))+ft;
if(nt>et){nt=et;c++;}
document.getElementById("flieger").style.top=nt+"pt";

nl=document.getElementById("flieger").style.left;
nl=parseInt(nl.slice(0,nl.length-2))+fl;
if(nl>el){nl=el;c++;}
document.getElementById("flieger").style.left =nl+"pt";

window.status="["+nt+"]["+nl+"]";

if(c<2)setTimeout("schieb()",s);
}
</script>
</head>
<body onLoad="schieb()">
<span style="position:absolute;left:0pt;top:0pt;" id="flieger">Berufsbekleidung</span>
</body>
</html>

Es wäre echt super wenn einer diesen Code bearbeiten könnte oder mit sagen könnte wie und wo ich eine Pause einfüge damit das klappt.

Vielen Dank im Voraus.

Sempervivum · 17 September 2012

Das geht wesentlich enfacher mit jQuery. Dort gibt es die Funktion delay(), mit der man eine Pause einfügen kann. Ich habe so etwas mal mit einem Bild gemacht. Auf dein Problem übertragen müsste es etwa so aussehen:

Code:

    textwidth = 200;
    textheight = 5;
    winwidth = $(window).width();
    winheight = $(window).height();
    starty = (winheight - 5 * textheight) / 2;
    endy = starty;
    var i = 0;

function einfliegen ()
{
    if (i < 5)
      {
        y = endy + textheight * i;
        $('#text' + i).animate ({left: endx, top: y}, 5000).delay(2000).einfliegen();
        i++;
}
$(document).ready(function(){
    for (i = 0; i < 5; i ++)
    {
      y = starty + textheight * i;
      $('#text' + i).animate ({left: startx, top: y}, 0);
    }
    i = 0;
    einfliegen();
    };

Ungetestet, probier's mal aus und wenn es nicht funktioniert, sehen wir weiter. Den Texten musst Du jeweils die ID "text0", "text1" usw. geben. Möglicherweise könnte man es noch etwas eleganter machen, indem man aus einem Klassennamen eine Liste von Elementen erzeugt:

Code:

texts = new Array();
$('.text').each(function(){texts.push(this)});

Viel Erfolg und viele Grüße - Ulrich

Tronjer · 17 September 2012

Ich würde so etwas weder in vanilla JS noch in purem jQuery machen, dazu sind die Möglichkeiten von animate() zu begrenzt.

Der erste Blick sollte in Richtung CSS3 gehen: Transform, Transition und Animation. Diese lassen sich mit jQuery Methoden wie fadeIn() und delay() kombinieren. Darüber hinaus existieren noch einige Funktionsbibliotheken für Texteffekte. Einfach mal googeln.

Einfliegender Text

eagleroxx

Neues Mitglied

Sempervivum

Guest

Tronjer

Senior HTML'ler

Neueste Beiträge