<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
color: #2C2E37;
}
body {
font: 18px sans-serif;
background-color: #ddd;
}
</style>
<script src="cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
(function($) {
$.fn.TypeByLetter = function(options) {
var settings = $.extend({
speed: 100,
content: $(this).text(),
append: false,
callback: function() {}
}, options);
return this.each(function() {
var $object = $(this);
var text = " " + settings.content;
var arrayOfText = text.split("");
if (settings.append == false) {
$object.text("");
}
function type(i) {
i = i || 0;
$object.append(arrayOfText[i]);
console.log(arrayOfText[i]);
if (i < arrayOfText.length) {
i++;
setTimeout(function() {
type(i)
}, settings.speed);
} else {
settings.callback.call();
}
}
type(0);
});
};
//Calling the plugin
$('h1').TypeByLetter({
callback: function() {
$('body').TypeByLetter({
speed: 50,
content: 'This text is loaded into .TypeByLetter through the option "content", and has the options of- speed:50, append: true',
append: true
});
}
});
})(jQuery);
</script>
</head>
<body>
<h1>This is the new and upgraded .TypeByLetter Plugin!</h1>
</body>
</html>
|
Download
