Chắc hẳn mọi người ở đây ai cũng sẽ yêu cái đẹp đúng không? Và mình cũng không phải ngoại lệ đâu. Chính vì thế mà khi nào thấy có một hiệu ứng đẹp, cách bố trí widget hay thậm chí chỉ là cách chọn font chữ, màu sắc sao cho đẹp, hài hòa thì cũng phải đi tham khảo blog/web này nọ chứ chẳng đùa. Mới đêm qua mình ghé thăm blog anh Nguyễn Anh Duy thì thấy cái header phần intro có hiệu ứng chữ đánh máy đẹp quá nên cũng đú đởn làm bên blog mình. Sáng nay ngủ dậy sẽ viết bài share cho các bạn đây. Live demo thì ngay trên phần intro blog mình nhé.
Tạo hiệu ứng chữ đánh máy tuyệt đẹp
Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Chèn 2 đoạn Javascript sau trước
</body>
<script id='typist' language='javascript' type='text/javascript'>//<![CDATA[
// Generated by CoffeeScript 1.8.0
(function(){var c,b=function(e,f){return function(){return e.apply(f,arguments)}},a={}.hasOwnProperty,d=function(h,f){for(var e in f){if(a.call(f,e)){h[e]=f[e]}}function g(){this.constructor=h}g.prototype=f.prototype;h.prototype=new g();h.__super__=f.prototype;return h};c=(function(){function e(){this._fireEvent=b(this._fireEvent,this);this._empty=b(this._empty,this);this._each=b(this._each,this)}e.prototype._addEvent=function(g,i,h,f){if(f==null){f=false}return g.addEventListener(i,h,f)};e.prototype._forEach=function(m,j,k){var h,g,f;h=0;g=m.length;f=[];while(h<g){if(h in m){j.call(k,m[h],h,m)}f.push(h++)}return f};e.prototype._each=function(h,f,g){if(h){this._forEach(h,f,g);return h}};e.prototype._pass=function(g,f,h){if(f==null){f=[]}return function(){return g.apply(h,f)}};e.prototype._delay=function(h,g,i,f){if(f==null){f=[]}return setTimeout(this._pass(h,f,i),g)};e.prototype._periodical=function(g,i,h,f){if(f==null){f=[]}return setInterval(this._pass(g,f,h),i)};e.prototype._setHtml=function(g,f){return g.innerHTML=f};e.prototype._getHtml=function(f){return f.innerHTML};e.prototype._empty=function(f){return this._setHtml(f,"")};e.prototype._fireEvent=function(f,g){if(this.options[f]){return this.options[f].call(this,g,this.options)}};e.prototype._extend=function(f,h){var g,i;for(g in h){i=h[g];f[g]=i}return f};return e})();this.Typist=(function(f){d(e,f);function e(h,g){if(g==null){g={}}this.typeLetter=b(this.typeLetter,this);this.typeLetters=b(this.typeLetters,this);this.typeText=b(this.typeText,this);this.selectOffset=b(this.selectOffset,this);this.selectText=b(this.selectText,this);this.fetchVariations=b(this.fetchVariations,this);this.next=b(this.next,this);this.slide=b(this.slide,this);this.setupDefaults=b(this.setupDefaults,this);this.options={typist:h,letterSelectInterval:60,interval:3000,selectClassName:"selectedText"};this.options=this._extend(this.options,g);this.elements={typist:this.options.typist};this.offsets={current:{index:0,text:""}};if(this.elements.typist){this.setupDefaults()}}e.prototype.setupDefaults=function(){this.variations=this.fetchVariations(this.elements.typist);this.newText=[];return this.timer=this._periodical(this.slide,this.options.interval)};e.prototype.slide=function(g){this.offsets.current.text=this.variations[this.offsets.current.index];this.offsets.current.text=this.offsets.current.text.split("");this._each(this.offsets.current.text,this.selectText);this.offsets.current.index=this.next(this.offsets.current.index);this._delay((function(h){return function(){h.options.currentSlideIndex=h.offsets.current.index;return h.typeText(h.variations[h.offsets.current.index])}})(this),this.options.letterSelectInterval*this.offsets.current.text.length);if(this.variations.length<=this.offsets.current.index){this.offsets.current.index=0}else{if(this.offsets.current.index===0){this.offsets.current.index=this.variations.length}else{this.offsets.current.index=this.offsets.current.index}}return this.newText.length=0};e.prototype.next=function(g){return g=g+1};e.prototype.fetchVariations=function(g){var j,h,i;j=g.getAttribute("data-typist");h=this._getHtml(g);i=j.split(",");i.splice(0,0,h);return i};e.prototype.selectText=function(h,g){return this._delay((function(i){return function(){return i.selectOffset((i.offsets.current.text.length-g)-1)}})(this),g*this.options.letterSelectInterval)};e.prototype.selectOffset=function(j){var h,i,g;i=this.offsets.current.text;h=i.slice(j,i.length);h=h.join("");g=i.slice(0,j);g=g.join("");return this._setHtml(this.elements.typist,""+g+'<em class="'+this.options.selectClassName+'">'+h+"</em>")};e.prototype.typeText=function(g){this.typeTextSplit=g.split("");this._each(this.typeTextSplit,this.typeLetters);return this._fireEvent("onSlide",g)};e.prototype.typeLetters=function(h,g){clearInterval(this.timer);return this._delay((function(i){return function(){return i.typeLetter(h,g)}})(this),g*this.options.letterSelectInterval)};e.prototype.typeLetter=function(h,g){this._empty(this.elements.typist);this.newText.push(h);this._setHtml(this.elements.typist,this.newText.join(""));if(this.typeTextSplit.length===g+1){return this.timer=this._periodical(this.slide,this.options.interval)}};return e})(c)}).call(this);
//]]></script>
<script language='javascript' type='text/javascript'>(function () {
var typist;
typist = document.querySelector('#typist-element');
new Typist(typist, {
letterInterval: 60,
textInterval: 3000
});
}.call(this));
</script>
Bước 3: Chèn đoạn code hiển thị chữ đánh máy vào nơi bạn muốn (cái này tùy mỗi bạn sẽ có những cách đặt để trang trí khác nhau nha nên mình không hướng dẫn chi tiết phải đặt ở đâu cho mỗi template đâu)
Đôi lúc không như chúng ta mong muốn nhưng đừng buồn, đừng suy nghĩ nhiều quá mà hãy tiếp tục đứng lên và chiến đấu tiếp <span class='typist-text typist-blink' data-typist='và tương lai nhé...' id='typist-element'>vì hiện tại...</span>
Trong đó:
- vì hiện tại...: chữ xuất hiện ngay lúc đầu
- và tương lai nhé trong data-typist: chữ đánh máy khi vì hiện tại... mất đi
Bạn hãy tùy chỉnh theo ý thích của mình nhé.
Bước 4: Lưu template lại
Kết luận
Vậy là mình vừa hướng dẫn xong cho các bạn cách tạo hiệu ứng chữ đánh máy tuyệt đẹp cho blogspot rồi đó. Tuy là có dùng Javascript dài nhưng khi check speed thì nó chỉ trừ 1 điểm thôi nên không lo ngại lắm đâu. Ngoài blog tâm sự mình thì các bạn có thể ghé qua blog NAD để đọc những bài viết chất hơn nhé :)
