Cum să derulați ușor textul folosind HTML5 (Programare, Javascript, Jquery, Html)

software-ul este distractiv a intrebat.

Vreau să derulez un singur rând de text cât mai lin posibil

Dispozitivul meu țintă este o rezoluție de 1920 x 120 cu o rezoluție fără intrare. (fără tastatură sau mouse). Are un procesor subalimentat.

<html>
<head>
    <title>News</title>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            $(function() {
                $.get('data.txt', function(data) {
                    $('#text-file-container').html(data);
                });
            });
        </script>
        <link rel="stylesheet" href="content.css">
</head>
<body>

    <div id="scroll">
            <h1>
                <marquee behavior="scroll" direction="left" scrollamount="15" id="text-file-container"></marquee>
            </h1>
    </div>

</body>
</html>

Am încercat o bibliotecă JS pe care am găsit-o online, dar a avut performanțe foarte slabeSunt deschis la sugestii

Comentarii

  • „1920 x 120”? Vrei să spui 1920×1200? –  > Por Wai Ha Lee.
  • Nu, 120px este ceea ce vreau să spun. Este un afișaj subțire și lat –  > Por software-ul este distractiv..
  • marquee este învechit și ar trebui evitat. –  > Por Alvaro Montoro.
  • Care este echivalentul modern? –  > Por software-ul este distractiv.
  • Echivalentul ar fi utilizarea tranzițiilor și animațiilor CSS –  > Por Alvaro Montoro.
1 răspunsuri
Alvaro Montoro

Ai putea încerca să folosești animații și tranziții CSS în loc de o bibliotecă/plugin JavaScript sau marquee (care, așa cum se menționează pe comentarii, este învechit și ar trebui să fie evitat).

Un exemplu de cum s-ar putea face cu CSS și animații:

Puteți ajusta viteza marquee-ului prin modificarea valorii parametrului animation-duration. Și ar trebui să modificați valoarea elementului to în funcție de lungimea textului.


Actualizare după comentariul lui Jay: marquee-ul a eșuat atunci când textul a fost mai mare decât spațiul marquee-ului. O soluție ar fi ca spațiile goale să nu fie wrap/break și animațiile să țină cont de dimensiunea textului (folosind transformări și nu doar poziția pentru a muta textul):

Apoi, mișcarea este un pic întreruptă pe browserul meu. Voi căuta o soluție mai lină soluție mai lină, dar aceasta ar rezolva problema lungimii textului.

Comentarii

  • corecție: trebuie să creștem valoarea lățimii: din #text pentru a încadra un text mai lung. și a funcționat! Bună treabă Alvaro! –  > Por curiozitate.
  • cum se poate face ca scroll vertical? aș vrea să fie scroll vertical în loc de scroll orizontal –  > Por userAZLogicApps.
  • Acest lucru este drăguț, însă nu funcționează cu lungimi de șir de text care depășesc lățimea #marquee’ s. –  > Por Jay.
  • @Jay Mulțumesc că m-ați anunțat despre această problemă. Am adăugat o a doua versiune care ia în considerare acest lucru, dar arată un pic cam întrerupt pe calculatorul meu. Voi verifica mai târziu dacă pot găsi o soluție mai bună doar pentru CSS. –  > Por Alvaro Montoro.
  • @AlvaroMontoro Hmm Am rulat fragmentul de aici atât în Safari cât și în Chrome și nu văd deloc text în caseta „Text overflows”. –  > Por Jay.