Code hiệu ứng đánh chữ All Fancy Text

Dưới đây là một số đoạn code HTML, CSS, Js. Giúp tạo hiệu ứng chuyển động đánh chữ như plugin Elementor. Hiện nay, nhiều bạn thích sử dụng themes Flatsome hơn. Nhưng cũng rất thích thú về các hiệu ứng bên plugin Elementor. Bài viết này, Cam Ranh Media xin hướng dẫn Code hiệu ứng đánh chữ Fancy Text. Xem ngay nào các anh em.

Xem thêm: Hướng dẫn code hiển thị số lượt xem bài viết trên WordPress

Hướng dẫn code hiệu ứng đánh chữ All Fancy Text

Nếu bạn đang sử dụng themes flatsome hoặc theme bất kỳ mà nó không có tính năng chèn html. Thì bạn đừng hoang mang mà hảy vào plugin cài ngay plugin Shortcoder. Plugin Shortcoder là một plugin cho phép tạo một mã ngắn tùy chỉnh cho HTML, JavaScript và các đoạn mã khác. Plugin này vô cùng nhẹ nhàng và không gây nặng nề cho website bạn.

Đây là 1 plugin mà tôi luôn dùng làm website cho nhiều khách hàng của tôi. Link tải Shortcoder

<style type="text/css">
.text p{
    color:red;
    font-size: 24px;
}
    </style>
    
    <script type="text/javascript">
var TxtType = function(el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = '';
        this.tick();
        this.isDeleting = false;
    };

    TxtType.prototype.tick = function() {
        var i = this.loopNum % this.toRotate.length;
        var fullTxt = this.toRotate[i];

        if (this.isDeleting) {
        this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
        this.txt = fullTxt.substring(0, this.txt.length + 1);
        }

        this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

        var that = this;
        var delta = 200 - Math.random() * 100;

        if (this.isDeleting) { delta /= 2; }

        if (!this.isDeleting && this.txt === fullTxt) {
        delta = this.period;
        this.isDeleting = true;
        } else if (this.isDeleting && this.txt === '') {
        this.isDeleting = false;
        this.loopNum++;
        delta = 500;
        }

        setTimeout(function() {
        that.tick();
        }, delta);
    };

    window.onload = function() {
        var elements = document.getElementsByClassName('typewrite');
        for (var i=0; i<elements.length; i++) {
            var toRotate = elements[i].getAttribute('data-type');
            var period = elements[i].getAttribute('data-period');
            if (toRotate) {
              new TxtType(elements[i], JSON.parse(toRotate), period);
            }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
        document.body.appendChild(css);
    };
    </script>


<h3 class="text">
  <p class="typewrite" data-period="2000" data-type='["NHANH CHÓNG","CHUYÊN NGHIỆP","GIÁ RẺ"]'>
    <span class="wrap"></span>
  </p>
</h3>
   

Lời kết

Chỉ cần copy đoạn code trên dán vào vị trị nào mà bạn muốn, rất đơn giản phải không nào. Tính năng và cách hoạt động y chang như nhau. Nhưng lại vô cùng nhẹ nhàng cho website. Hy vong bài viết này sẽ giúp ích cho các bạn.

Xem chi tiết

Viết một bình luận

THÔNG TIN THÊM

Quảng cáo

Nhận Mã Giảm Giá Hosting

Tư Vấn Dịch Vụ

Chào bạn! Bạn cần tư vấn hãy gửi tin nhắn nhé!