SHARE WIDGET CỰC KÌ HAY CHO BLOG | DUY PHƯƠNG
Say hello, chào mừng anh em đã đến với blog mình. Do dạo này bận học với bí idea nữa nên chưa ra bài gì mới được. Thì hôm nay có dạo trên SiinBlog và mò được cái code hay liền đem về share cho anh em xài.
<div class="widget-content"><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 = ['DuyPhuongBlog','Make with love ❤','Power by DuyPhuong','Contact: 2018.net.vn@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></div>
Lưu lại và tận hưởng thành quả.
Duy Phương
đã đặt liện kết nha...hóng đặt lại nè haha :D
Trả lờiXóahttps://www.leanhduc.xyz/
ok trưa đi học ề đặt cho :))
Xóabuổi tối vui vẻ tương tác tốt nha
Trả lờiXóaok
XóaNgon cơm
Trả lờiXóangon trymmm :))
XóaĐeo có demo à :v
Trả lờiXóacó ảnh demo đó anh
Xóa:D
Trả lờiXóaLiên kết lại cho tui đi ông,
Trả lờiXóahttps://www.phucsieupham.info/
Phúc Siêu Phàm Blog
ok lát sửa
XóaKhông nha ông !
Xóademo live nữa là ngon
Trả lờiXóasad :(
Xóasad :(
Xóademo live luôn ngon :V
Xóalát thêm :p
Xóađc đấy :D
Trả lờiXóahihi :D
Xóathông báo!! Thứ 6 Quốc Bảo Blog sẽ lọc liên kết đấy ạ :V
Trả lờiXóaok
XóaBuổi tối vui vẻ nhé em
Trả lờiXóathanks anh :3
Xóađã lọc lk
Trả lờiXóa:))
Xóa:D
Trả lờiXóa:D
XóaHello
Trả lờiXóahi :D
Xóatương tác tốt nek :D
Trả lờiXóatui mới share temp 100k view á >< qua chơi
Trả lờiXóat cx 100k view mà chưa bk tổ chức event j đây :((
XóaDị ó hỏ
Trả lờiXóaTUONG TAC TOT NEK
Trả lờiXóademo ra sao ??
Trả lờiXóalâu không thấy qa tt
good
Trả lờiXóa:D
Xóalàm demo bên pencode cho hấp dẫn em ơi :D
Trả lờiXóacó rồi đó anh mà tại cái nút demo ko hiện :p để em sửa
Xóacòn slot đặt liên kết k bạn ơi
Trả lờiXóa