Tạo dòng chữ chạy liên tục bằng jquery

Hướng dẫn code dòng chữ chạy qua lại liên tục nhấp nháy giống đèn led bằng JQuery

Bước 1: tạo bị HTML chuchaylientucqualai.html

Copy nội dung dưới vào:





<!DOCTYPE html>

<html>

<head>

  <title>Chữ chạy qua chạy lại với hiệu ứng đèn LED đỏ đậm và bóng mờ</title>

  <!-- Thêm Bootstrap 4.3 -->

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  {CHEN_CSS}

  {CHEN_JAVASCRIPT}

</head>

<body>

  <div class="container mt-5">

    <div class="row">

      <div class="col-md-12">

        <div id="vung_chu_chay">

          <span id="noidung_chu_chay">Chữ chạy qua chạy lại với hiệu ứng đèn LED đỏ đậm và bóng mờ!</span>

        </div>

      </div>

    </div>

  </div>

</body>

</html>

Bước 2: chuẩn bị file css để tạo hiệu ứng chữ nhấp nháy.

Tạo file chuchay.css

 #vung_chu_chay {

      width: 100%;

      overflow: hidden;

      border: 1px solid #000;

      position: relative;

      height: 40px;

    }

    #noidung_chu_chay {

      position: absolute;

      white-space: nowrap;

      font-size: 24px;

      font-weight: bold;

      color: #ff3333; /* Màu đỏ đậm hơn */

      text-shadow:

        0 0 3px #ff6666,

        0 0 6px #ff6666,

        0 0 9px #ff3333,

        0 0 12px #ff3333;

      animation: led-effect 1s infinite;

    }

    @keyframes led-effect {

      0%, 100% {

        text-shadow:

          0 0 3px #ff6666,

          0 0 6px #ff6666,

          0 0 9px #ff3333,

          0 0 12px #ff3333;

      }

      50% {

        text-shadow:

          0 0 1px #ff9999,

          0 0 4px #ff9999,

          0 0 7px #ff6666,

          0 0 10px #ff6666;

      }

    }

Bước 3: chuẩn bị file javascript để tác động đến đối tượng chữ chạy

Tạo file chuchay.js

   $(document).ready(function () {        

      function startvung_chu_chay() {    

        var textWidth = $("#noidung_chu_chay").width();

        var vung_chu_chayWidth = $("#vung_chu_chay").width();

        $("#noidung_chu_chay").css("left", vung_chu_chayWidth);

        $("#noidung_chu_chay").animate(

          { left: -textWidth },

          8000,

          "linear",

          startvung_chu_chay

        );

      }

      startvung_chu_chay();

    }); // startvung_chu_chay

Bước 4: ráp css và javascript vào file html

- Cách 1: ráp trực tiếp css và javascript vào file html (cách này ít sử dụng, chỉ làm ví dụ)
Thay thay {CHEN_CSS} thành
<style>
Lệnh css ở file .css
</style>
Thay thay {CHEN_JS} thành
<script>
Lệnh javascript ở file .js
</script>

- Cách 2: tạo file riêng rồi nạp vào
Thay thay {CHEN_CSS} thành
<link rel="stylesheet" href="chuchay.css">
Thay thay {CHEN_JS} thành
<script src="chuchay.js"></script>