Textyle.js

A simple text effect with jQuery and tiny CSS.

How to use

JS

Textyle.js requires jQuery and textyle.js ( or textyle.min.js).
Easing pattern can be extended by jquery.easing.js.

read

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="textyle.min.js"></script>

call ( most simply )

$('target').textyle();

CSS

target element

opacity: 0;

span (as child element)

• translate effect position: relative; top: xxx; left: xxx;

• fade effect opacity: 0;

example

target {
	opacity: 0;
}
target span {
	/* translate effect */
	position: relative;
	top: 10px;
	left: 10px;
	/* fade effect */
	opacity: 0;
}

Opitions

You can choose some following options or add callback function.
Values below is default.

$('target').textyle({
	duration : 400,
	delay : 100,
	easing : 'swing',
	callback : null
});

Easing property can be extended by jquery.easing.js.
If you want , add reading script below next to jQuery.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

example

$('target').textyle({
	duration : 600,
	delay : 150,
	easing : 'linear',
	callback : function(){
   		$(this).css({
   		color :  'coral',
   		transition :  '1s',
   		});
	}
});

DEMO

codepen