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"><</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 = '!<>-_\\/[]{}—=+*^?#________';
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;
}();
// ——————————————————————————————————————————————————// From SiinBlog with love// ——————————————————————————————————————————————————
var phrases = ['StarSinhBlog', 'Make with love ❤', 'Power by StarSinh', 'Contact: starsonblogs@gmail.com', '❤'];
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!
sơn ctv blog tui nữa :v
ReplyDeleteSơn độc quyền bên t nha
Deletehay :v
ReplyDeleteShare đi
Deletechất
ReplyDeleteShare đi nào
Deletechất đó ông
ReplyDeleteShare nào
Deletesao không thêm cuộc chuột cho khung code em ?
ReplyDeleteĐể mai e thêm,😂
Deletegắt nha :V mình là đệ nhất tương tác chym bự
ReplyDeleteE là admin chim bụ
Deleteclick nè :D
ReplyDeleteClick cần thận chứ khóa gà của e thì khổ
DeleteHay đó man
ReplyDeleteThank a
Deleteclick nè :D
ReplyDeleteOkii
DeleteĐu bai
ReplyDeletethông báo!! Thứ 6 Quốc Bảo Blog sẽ lọc liên kết đấy ạ :V
ReplyDeleteCc
Deletetui mới share temp 100k view á >< qua chơi
ReplyDeleteRồi rồi
Delete