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é :)