css3TextShineEffect/textGradientEffect.js at master · weakwire/css3TextShineEffect · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
/*
 *  Iphone unlock Animate menu version 0.1
 */

$(function(){

	var selectedClass=".slideEffect";

	/*
	 * Increase that for faster animation
	 */
	var animationStep=1;

	/*
	 * Hold the dom and if is animating
	 */
	function animatingText(){
		this.isAnimating;
		this.dom;
	}

	var itemArr= new Array();

	/*
	 * Where the animation actually happens
	 */
	function animateOption(animatingText,progress,color){

		/*
		 * Animation reached to an end
		 */
		if(progress>50){
			animatingText.isAnimating=false;
			return;
		}

		/*
		 * move the animation
		 */
		progress+=animationStep;
		$(animatingText.dom).children().first().css({
			"background-image": "-webkit-linear-gradient(left, " +color+ " " + parseInt(17+progress) +"%, rgba(0,0,0,0)  "+ parseInt(53+progress) + "%,  "+ color + " " + parseInt(80+progress) +"%)",
			"-webkit-background-clip": "text",
			"-webkit-text-fill-color": "transparent"
		});

		/*
		 * Run recursive at 60fps ... hopefully.
		 */
		setTimeout(function(){animateOption(animatingText,progress,color)}, 10);
	}

	/*
	 *	On mouse enter toggle the effect
	 */
	$(selectedClass).mouseenter(function(){

		/*
		 * Get the id from data-id to identify the animation
		 */
		var id = $(this).data('id');

		/*
		 * Create a new object or retreive it if already
		 * created
		 */
		var thisItem =itemArr[id];

		if(thisItem!=undefined){

			/*
			 * if is already animating exit
			 */
			if(thisItem.isAnimating){
				return;
			}
		}else{
			thisItem = new animatingText();
			itemArr[id]=thisItem;
			thisItem.dom=this;
		}

		/*
		 * Set that is animating
		 */
		thisItem.isAnimating=true;

		/*
		 * Start animation
		 */
		animateOption(thisItem,-70,$(thisItem.dom).children().first().css('color'));
	});

}); //EOF