打字效果動(dòng)畫的4種實(shí)現(xiàn)方法(超簡(jiǎn)單)
更新時(shí)間：2017年10月18日 08:27:18 作者：HelloShadow
下面小編就為大家?guī)硪黄蜃中Ч麆?dòng)畫的4種實(shí)現(xiàn)方法(超簡(jiǎn)單)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
方法一(純css實(shí)現(xiàn))：
html代碼：
<h1 class="typing typing-item">打字動(dòng)畫打字動(dòng)畫打字動(dòng)畫</h1>
css樣式：
.typing{
font-size: 1rem;
padding-top: 6%;
margin-bottom: 5%;
font-weight: normal;
letter-spacing: .3rem;
-webkit-animation: type 2s steps(50, end) forwards;
animation: type 2s steps(50, end) forwards;
}
.typing-item{
text-align: center;
color: black;
width:100%;
white-space:nowrap;
overflow:hidden;
}
@-webkit-keyframes type{
from { width: 0;}
}
@keyframes type{
from { width: 0;}
}
缺點(diǎn)：只能實(shí)現(xiàn)一行式的打字效果，無法打出一段落文字
方法二（jquery）:
html代碼：
<div class="text-container"> <span class="text-static"></span> <span class="text"></span> <span class="cursor">|</span> </div>
jquery代碼：
<script type="text/javascript" src="../js/jquery.js"></script>
<script>
$(function() {
myPrint(["hello my word!"], 100);
function myPrint(arr, speed) {
var index = 0;
var str = arr[index];
var i = 0;
var add = true;
var mySetInterval = setInterval(function() {
// 延時(shí)4個(gè)字符的時(shí)間
if (i == str.length + 4) {
add = false;
// 如果是最后一個(gè)字符串則終止循環(huán)函數(shù)
if (index + 1 >= arr.length) {
clearInterval(mySetInterval);
}
} else if (i == -2) {
// 刪除后延時(shí)2個(gè)字符的時(shí)間
add = true;
str = arr[++index];
}
setTimeout(function() {
if (add) {
i++;
$(".text").html(str.substring(0, i));
} else {
$(".text").html(str.substring(0, i - 1));
i--;
}
})
}, speed)
}
})
</script>
方法三（jquery-typed插件）:
html代碼：
<div class="content"> <div class="content-div"> <span id="content-item"></span> </div> </div> <input type="hidden" id="content" value="內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容" />
引入Typed.js，Typed.js內(nèi)容如下
// The MIT License (MIT)
// Typed.js | Copyright (c) 2014 Matt Boldt | www.mattboldt.com
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
! function($) {
"use strict";
var Typed = function(el, options) {
// chosen element to manipulate text
this.el = $(el);
// options
this.options = $.extend({}, $.fn.typed.defaults, options);
// attribute to type into
this.isInput = this.el.is('input');
this.attr = this.options.attr;
// show cursor
this.showCursor = this.isInput ? false : this.options.showCursor;
// text content of element
this.elContent = this.attr ? this.el.attr(this.attr) : this.el.text()
// html or plain text
this.contentType = this.options.contentType;
// typing speed
this.typeSpeed = this.options.typeSpeed;
// add a delay before typing starts
this.startDelay = this.options.startDelay;
// backspacing speed
this.backSpeed = this.options.backSpeed;
// amount of time to wait before backspacing
this.backDelay = this.options.backDelay;
// input strings of text
this.strings = this.options.strings;
// character number position of current string
this.strPos = 0;
// current array position
this.arrayPos = 0;
// number to stop backspacing on.
// default 0, can change depending on how many chars
// you want to remove at the time
this.stopNum = 0;
// Looping logic
this.loop = this.options.loop;
this.loopCount = this.options.loopCount;
this.curLoop = 0;
// for stopping
this.stop = false;
// custom cursor
this.cursorChar = this.options.cursorChar;
// shuffle the strings
this.shuffle = this.options.shuffle;
// the order of strings
this.sequence = [];
// All systems go!
this.build();
};
Typed.prototype = {
constructor: Typed
,
init: function() {
// begin the loop w/ first current string (global self.string)
// current string will be passed as an argument each time after this
var self = this;
self.timeout = setTimeout(function() {
for (var i=0;i<self.strings.length;++i) self.sequence[i]=i;
// shuffle the array if true
if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);
// Start typing
self.typewrite(self.strings[self.sequence[self.arrayPos]], self.strPos);
}, self.startDelay);
}
,
build: function() {
// Insert cursor
if (this.showCursor === true) {
this.cursor = $("<span class=\"typed-cursor\">" + this.cursorChar + "</span>");
this.el.after(this.cursor);
}
this.init();
}
// pass current string state to each function, types 1 char per call
,
typewrite: function(curString, curStrPos) {
// exit when stopped
if (this.stop === true) {
return;
}
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
var self = this;
// ------------- optional ------------- //
// backpaces a certain string faster
// ------------------------------------ //
// if (self.arrayPos == 1){
// self.backDelay = 50;
// }
// else{ self.backDelay = 500; }
// contain typing function in a timeout humanize'd delay
self.timeout = setTimeout(function() {
// check for an escape character before a pause value
// format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^
// single ^ are removed from string
var charPause = 0;
var substr = curString.substr(curStrPos);
if (substr.charAt(0) === '^') {
var skip = 1; // skip atleast 1
if (/^\^\d+/.test(substr)) {
substr = /\d+/.exec(substr)[0];
skip += substr.length;
charPause = parseInt(substr);
}
// strip out the escape character and pause value so they're not printed
curString = curString.substring(0, curStrPos) + curString.substring(curStrPos + skip);
}
if (self.contentType === 'html') {
// skip over html tags while typing
var curChar = curString.substr(curStrPos).charAt(0)
if (curChar === '<' || curChar === '&') {
var tag = '';
var endTag = '';
if (curChar === '<') {
endTag = '>'
} else {
endTag = ';'
}
while (curString.substr(curStrPos).charAt(0) !== endTag) {
tag += curString.substr(curStrPos).charAt(0);
curStrPos++;
}
curStrPos++;
tag += endTag;
}
}
// timeout for any pause after a character
self.timeout = setTimeout(function() {
if (curStrPos === curString.length) {
// fires callback function
self.options.onStringTyped(self.arrayPos);
// is this the final string
if (self.arrayPos === self.strings.length - 1) {
// animation that occurs on the last typed string
self.options.callback();
self.curLoop++;
// quit if we wont loop back
if (self.loop === false || self.curLoop === self.loopCount)
return;
}
self.timeout = setTimeout(function() {
self.backspace(curString, curStrPos);
}, self.backDelay);
} else {
/* call before functions if applicable */
if (curStrPos === 0)
self.options.preStringTyped(self.arrayPos);
// start typing each new char into existing string
// curString: arg, self.el.html: original text inside element
var nextString = curString.substr(0, curStrPos + 1);
if (self.attr) {
self.el.attr(self.attr, nextString);
} else {
if (self.isInput) {
self.el.val(nextString);
} else if (self.contentType === 'html') {
self.el.html(nextString);
} else {
self.el.text(nextString);
}
}
// add characters one by one
curStrPos++;
// loop the function
self.typewrite(curString, curStrPos);
}
// end of character pause
}, charPause);
// humanized value for typing
}, humanize);
}
,
backspace: function(curString, curStrPos) {
// exit when stopped
if (this.stop === true) {
return;
}
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.backSpeed;
var self = this;
self.timeout = setTimeout(function() {
// ----- this part is optional ----- //
// check string array position
// on the first string, only delete one word
// the stopNum actually represents the amount of chars to
// keep in the current string. In my case it's 14.
// if (self.arrayPos == 1){
// self.stopNum = 14;
// }
//every other time, delete the whole typed string
// else{
// self.stopNum = 0;
// }
if (self.contentType === 'html') {
// skip over html tags while backspacing
if (curString.substr(curStrPos).charAt(0) === '>') {
var tag = '';
while (curString.substr(curStrPos).charAt(0) !== '<') {
tag -= curString.substr(curStrPos).charAt(0);
curStrPos--;
}
curStrPos--;
tag += '<';
}
}
// ----- continue important stuff ----- //
// replace text with base text + typed characters
var nextString = curString.substr(0, curStrPos);
if (self.attr) {
self.el.attr(self.attr, nextString);
} else {
if (self.isInput) {
self.el.val(nextString);
} else if (self.contentType === 'html') {
self.el.html(nextString);
} else {
self.el.text(nextString);
}
}
// if the number (id of character in current string) is
// less than the stop number, keep going
if (curStrPos > self.stopNum) {
// subtract characters one by one
curStrPos--;
// loop the function
self.backspace(curString, curStrPos);
}
// if the stop number has been reached, increase
// array position to next string
else if (curStrPos <= self.stopNum) {
self.arrayPos++;
if (self.arrayPos === self.strings.length) {
self.arrayPos = 0;
// Shuffle sequence again
if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);
self.init();
} else
self.typewrite(self.strings[self.sequence[self.arrayPos]], curStrPos);
}
// humanized value for typing
}, humanize);
}
/**
* Shuffles the numbers in the given array.
* @param {Array} array
* @returns {Array}
*/
,shuffleArray: function(array) {
var tmp, current, top = array.length;
if(top) while(--top) {
current = Math.floor(Math.random() * (top + 1));
tmp = array[current];
array[current] = array[top];
array[top] = tmp;
}
return array;
}
// Start & Stop currently not working
// , stop: function() {
// var self = this;
// self.stop = true;
// clearInterval(self.timeout);
// }
// , start: function() {
// var self = this;
// if(self.stop === false)
// return;
// this.stop = false;
// this.init();
// }
// Reset and rebuild the element
,
reset: function() {
var self = this;
clearInterval(self.timeout);
var id = this.el.attr('id');
this.el.after('<span id="' + id + '"/>')
this.el.remove();
if (typeof this.cursor !== 'undefined') {
this.cursor.remove();
}
// Send the callback
self.options.resetCallback();
}
};
$.fn.typed = function(option) {
return this.each(function() {
var $this = $(this),
data = $this.data('typed'),
options = typeof option == 'object' && option;
if (!data) $this.data('typed', (data = new Typed(this, options)));
if (typeof option == 'string') data[option]();
});
};
$.fn.typed.defaults = {
strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],
// typing speed
typeSpeed: 0,
// time before typing starts
startDelay: 0,
// backspacing speed
backSpeed: 0,
// shuffle the strings
shuffle: false,
// time before backspacing
backDelay: 500,
// loop
loop: false,
// false = infinite
loopCount: false,
// show cursor
showCursor: true,
// character for cursor
cursorChar: "|",
// attribute to type (null == text)
attr: null,
// either html or text
contentType: 'html',
// call when done callback function
callback: function() {},
// starting callback function before each string
preStringTyped: function() {},
//callback for every typed string
onStringTyped: function() {},
// callback for reset
resetCallback: function() {}
};
}(window.jQuery);
調(diào)用Typed.js
var string = $('#content').val();
$('#content-item').typed({
strings: [" " + string],
typeSpeed: 50,
backDelay: 800,
loop: false,
loopCount: false
});
方法四（純js）：
html代碼：
<div id="typing"></div>
js代碼：
<script>
var str = '內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容';
var i = 0;
function typing(){
var divTyping = document.getElementById('typing');
if (i <= str.length) {
divTyping.innerHTML = str.slice(0, i++) + '_';
setTimeout('typing()', 200);
}
else{
divTyping.innerHTML = str;
}
}
typing();
</script>
最后，發(fā)現(xiàn)實(shí)現(xiàn)打字效果還是蠻簡(jiǎn)單的對(duì)吧，css的思路是利用width和overflow:hidden，動(dòng)畫讓寬度變寬實(shí)現(xiàn)像打字的樣式，但是樣式有限，不能實(shí)現(xiàn)多行顯示。js/jquery，普遍都是先得到字的內(nèi)容，然后再逐字往容器中添加文字。問題不難，主要是要善于思考！！
以上這篇打字效果動(dòng)畫的4種實(shí)現(xiàn)方法(超簡(jiǎn)單)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
用SWFObject 插入flash，好處多多，代碼簡(jiǎn)潔，不會(huì)出現(xiàn)微軟的“單擊此處以激活控件”的提示（據(jù)可靠消息，這個(gè)是微軟惹的官司，其結(jié)果是害苦了用戶）。2010-07-07
這是前端面試的經(jīng)典題型，要去找工作的小伙伴看看還是有幫助的,需要的朋友可以參考下2017-06-06
JS畫布動(dòng)態(tài)實(shí)現(xiàn)黑客帝國(guó)背景效果
這篇文章主要為大家詳細(xì)介紹了JS畫布動(dòng)態(tài)實(shí)現(xiàn)黑客帝國(guó)背景效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
JS實(shí)現(xiàn)長(zhǎng)圖上下滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)長(zhǎng)圖上下滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
javascript基礎(chǔ)練習(xí)之翻轉(zhuǎn)字符串與回文
最近在學(xué)習(xí)的時(shí)候到了基礎(chǔ)算法這一章節(jié)，讓我對(duì)js內(nèi)置對(duì)象方法的掌握還有思維邏輯都得到了提升，所借此機(jī)會(huì)來寫一寫學(xué)習(xí)心得和總結(jié)。下面這篇文章主要介紹了利用javascript實(shí)現(xiàn)翻轉(zhuǎn)字符串與回文的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
JavaScript this關(guān)鍵字指向常用情況解析
這篇文章主要介紹了JavaScript this關(guān)鍵字指向常用情況解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
有些時(shí)候我們需要針對(duì)某些IE下的兼容性寫單獨(dú)的JS處理代碼,這只是簡(jiǎn)簡(jiǎn)單單為了兼容行啊，有多種方法可以實(shí)現(xiàn)，小編整理了一下，感興趣的朋友可以了解下，或許對(duì)你有所幫助2013-01-01
這篇文章主要分享了JavaScript?微任務(wù)和宏任務(wù)講解，在js中，我們一般將所有的任務(wù)都分成兩類，一種是同步任務(wù)，另外一種是異步任務(wù)。而在異步任務(wù)中，又有著更加細(xì)致的分類，那就是微任務(wù)和宏任務(wù)，下面來一起學(xué)習(xí)js中的微任務(wù)和宏任務(wù)吧2021-12-12
JS 排序輸出實(shí)現(xiàn)table行號(hào)自增前端動(dòng)態(tài)生成的tr
一個(gè)項(xiàng)目，需要對(duì)數(shù)據(jù)進(jìn)行排序輸出，要求有行號(hào)，依次遞增1.2.3.4.5，使用前端動(dòng)態(tài)生成的tr2014-08-08
如我之前的文章所述(Javascript作用域)，定義在全局的函數(shù)，函數(shù)的所有者就是當(dāng)前頁(yè)面，也就是window對(duì)象2013-11-11