,

TẠO WIDGET CHỮ ẨN HIỆN PHONG CÁCH MATRIX


Hello mọi người, đã lâu blog không có thêm bài viết hay và bổ ích rồi nhỉ? Haha (cười...).
Thôi vào vấn đề luôn, hôm nay mình sẽ chia sẻ cho các bạn 1 widget siêu chất lượng dành cho blogger/blogspot. Đó là widget chạy chữ ẩn hiện theo phong cách matrix.

DEMO
 
Let's go boy!

BƯỚC 1:

Chèn đoạn code sau vào nơi bạn muốn nó hiển thị, thường là phần sidebar của template.
  <style>.containerSB {  height: 100px;  justify-content: center;  align-items: center;  display: flex;  font-family: 'Roboto Mono', monospace;  background: #212121;}.text {  font-weight: 100;  font-size: 16px;  color: #fafafa;}.sb {  color: #757575;}
</style>
    <div class="containerSB">
        <div class="text"><span class="sb">_</span><span class="sb">&lt;</span>n<span class="sb">#</span>r<span class="sb">=</span>by <span class="sb">#</span>uyPhu<span class="sb">1</span><span class="sb">8</span>g<span class="sb">#</span>n<span class="sb">#</span><span class="sb">]</span><span class="sb">_</span><span class="sb">1</span><span class="sb">-</span><span class="sb">/</span>o<span class="sb">_</span></div>
    </div>
    <script>
        var _createClass = function() {
            function defineProperties(target, props) {
                for (var i = 0; i < props.length; i++) {
                    var descriptor = props[i];
                    descriptor.enumerable = descriptor.enumerable || false;
                    descriptor.configurable = true;
                    if ("value" in descriptor) descriptor.writable = true;
                    Object.defineProperty(target, descriptor.key, descriptor);
                }
            }
            return function(Constructor, protoProps, staticProps) {
                if (protoProps) defineProperties(Constructor.prototype, protoProps);
                if (staticProps) defineProperties(Constructor, staticProps);
                return Constructor;
            };
        }();

        function _classCallCheck(instance, Constructor) {
            if (!(instance instanceof Constructor)) {
                throw new TypeError("Cannot call a class as a function");
            }
        }
        var TextScramble = function() {
            function TextScramble(el) {
                _classCallCheck(this, TextScramble);
                this.el = el;
                this.chars = '!<>-_\\/[]{}&#8212;=+*^?#________';
                this.update = this.update.bind(this);
            }
            _createClass(TextScramble, [{
                key: 'setText',
                value: function setText(newText) {
                    var _this = this;
                    var oldText = this.el.innerText;
                    var length = Math.max(oldText.length, newText.length);
                    var promise = new Promise(function(resolve) {
                        return _this.resolve = resolve;
                    });
                    this.queue = [];
                    for (var i = 0; i < length; i++) {
                        var from = oldText[i] || '';
                        var to = newText[i] || '';
                        var start = Math.floor(Math.random() * 40);
                        var end = start + Math.floor(Math.random() * 40);
                        this.queue.push({
                            from: from,
                            to: to,
                            start: start,
                            end: end
                        });
                    }
                    cancelAnimationFrame(this.frameRequest);
                    this.frame = 0;
                    this.update();
                    return promise;
                }
            }, {
                key: 'update',
                value: function update() {
                    var output = '';
                    var complete = 0;
                    for (var i = 0, n = this.queue.length; i < n; i++) {
                        var _queue$i = this.queue[i],
                            from = _queue$i.from,
                            to = _queue$i.to,
                            start = _queue$i.start,
                            end = _queue$i.end,
                            char = _queue$i.char;
                        if (this.frame >= end) {
                            complete++;
                            output += to;
                        } else if (this.frame >= start) {
                            if (!char || Math.random() < 0.28) {
                                char = this.randomChar();
                                this.queue[i].char = char;
                            }
                            output += '<span class="sb">' + char + '</span>';
                        } else {
                            output += from;
                        }
                    }
                    this.el.innerHTML = output;
                    if (complete === this.queue.length) {
                        this.resolve();
                    } else {
                        this.frameRequest = requestAnimationFrame(this.update);
                        this.frame++;
                    }
                }
            }, {
                key: 'randomChar',
                value: function randomChar() {
                    return this.chars[Math.floor(Math.random() * this.chars.length)];
                }
            }]);
            return TextScramble;
        }();

        // &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;// From SiinBlog with love// &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;
        var phrases = ['StarSinhBlog', 'Make with love &#10084;', 'Power by StarSinh', 'Contact: starsonblogs@gmail.com', '&#10084;'];

        var el = document.querySelector('.text');
        var fx = new TextScramble(el);
        var counter = 0;
        var next = function next() {
            fx.setText(phrases[counter]).then(function() {
                setTimeout(next, 800);
            });
            counter = (counter + 1) % phrases.length;
        };
        next();
    </script>
    <script type="text/javascript">
        //<![CDATA[
        (function(b) {
            var c = {
                    topSpacing: 0,
                    bottomSpacing: 0,
                    className: "is-sticky",
                    center: false
                },
                f = b(window),
                e = b(document),
                d = [],
                h = f.height(),
                a = function() {
                    var j = f.scrollTop(),
                        q = e.height(),
                        p = q - h,
                        l = (j > p) ? p - j : 0;
                    for (var m = 0; m < d.length; m++) {
                        var r = d[m],
                            k = r.stickyWrapper.offset().top,
                            n = k - r.topSpacing - l;
                        if (j <= n) {
                            if (r.currentTop !== null) {
                                r.stickyElement.css("position", "").css("top", "").removeClass(r.className);
                                r.currentTop = null
                            }
                        } else {
                            var o = q - r.elementHeight - r.topSpacing - r.bottomSpacing - j - l;
                            if (o < 0) {
                                o = o + r.topSpacing
                            } else {
                                o = r.topSpacing
                            }
                            if (r.currentTop != o) {
                                r.stickyElement.css("position", "fixed").css("top", o).addClass(r.className);
                                r.currentTop = o
                            }
                        }
                    }
                },
                g = function() {
                    h = f.height()
                };
            if (window.addEventListener) {
                window.addEventListener("scroll", a, false);
                window.addEventListener("resize", g, false)
            } else {
                if (window.attachEvent) {
                    window.attachEvent("onscroll", a);
                    window.attachEvent("onresize", g)
                }
            }
            b.fn.sticky = function(i) {
                var j = b.extend(c, i);
                return this.each(function() {
                    var l = b(this);
                    if (j.center) {
                        var k = "margin-left:auto;margin-right:auto;"
                    }
                    stickyId = l.attr("id");
                    l.wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + k + '"></div>').css("width", l.width());
                    var m = l.outerHeight(),
                        n = l.parent();
                    n.css("width", l.outerWidth()).css("height", m).css("clear", l.css("clear"));
                    d.push({
                        topSpacing: j.topSpacing,
                        bottomSpacing: j.bottomSpacing,
                        stickyElement: l,
                        currentTop: null,
                        stickyWrapper: n,
                        elementHeight: m,
                        className: j.className
                    })
                })
            }
        })(jQuery);
        //]]>
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#HTML1").sticky({
                topSpacing: 10,
                bottomSpacing: 320
            });
        });
    </script>

BƯỚC 2:

Lưu lại và kiểm tra kết quả.

KẾT LUẬN :

Chỉ với những dòng code không quá phức tạp bạn đã sở hữu cho blog mình một thủ thuật tuyệt đẹp phải không nào, chúc các bạn thành công!
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
• Email: transinh085@gmail.com
• Facebook: Fb.com/TNS.CLONE1
Xin chân thành cảm ơn những đóng góp của bạn để chúng tôi ngày càng phát triển hơn nữa...

● Hãy là con người văn minh từ những câu nói

24 nhận xét:

  1. sao không thêm cuộc chuột cho khung code em ?

    Trả lờiXóa
  2. gắt nha :V mình là đệ nhất tương tác chym bự

    Trả lờiXóa
  3. Trả lời
    1. Click cần thận chứ khóa gà của e thì khổ

      Xóa
  4. thông báo!! Thứ 6 Quốc Bảo Blog sẽ lọc liên kết đấy ạ :V

    Trả lờiXóa
  5. tui mới share temp 100k view á >< qua chơi

    Trả lờiXóa