Created by Pete R., Founder of BucketListly
440 |
461 |
462 |
463 |
470 |
471 |
472 |
473 |
--------------------------------------------------------------------------------
/demo/jquery.flipping_text.js:
--------------------------------------------------------------------------------
1 | /* ===========================================================
2 | * jquery-flipping_text.js v1
3 | * ===========================================================
4 | * Copyright 2013 Pete Rojwongsuriya.
5 | * http://www.thepetedesign.com
6 | *
7 | * Create an intro animation for your
8 | * typography
9 | *
10 | * https://github.com/peachananr/flipping_text
11 | *
12 | * ========================================================== */
13 |
14 | !function($){
15 |
16 | var defaults = {
17 | tickerTime: 10,
18 | customRandomChar: false,
19 | tickerCount: 10,
20 | opacityEffect: true,
21 | resetOnChange: false
22 | };
23 |
24 | var onblur = false;
25 |
26 | function Timer(callback, delay) {
27 | var timerId, start, remaining = delay;
28 |
29 | this.pause = function() {
30 | window.clearTimeout(timerId);
31 | remaining -= new Date() - start;
32 | };
33 |
34 | this.resume = function() {
35 | start = new Date();
36 | timerId = window.setTimeout(callback, remaining);
37 | };
38 |
39 | this.resume();
40 | }
41 |
42 |
43 | $.fn.flipping_text = function(options){
44 |
45 | var els = this;
46 |
47 | resetAll = function(els){
48 | els.each(function (index) {
49 | $(this).css({
50 | opacity: 1,
51 | visibility: "visible"
52 | }).text($(this).data("ft-text"));
53 | });
54 | }
55 |
56 | return this.each(function (index) {
57 | if ($(this).data("delay") !== undefined) {
58 | var data_delay = $(this).data("delay") + 0;
59 | } else {
60 | var data_delay = 0;
61 | }
62 |
63 |
64 |
65 | var settings = $.extend({}, defaults, options),
66 | el = $(this),
67 | count = el.text().length;
68 |
69 |
70 |
71 | function randString() {
72 |
73 | var text = el.text(),
74 | char_pos = 0;
75 | if (settings.customRandomChar != false) {
76 | var random_char = settings.customRandomChar;
77 | } else {
78 | var random_char = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
79 | }
80 |
81 |
82 | el.attr("data-ft-text", text).html("");
83 |
84 |
85 | for(var i=0; i < count; i++) {
86 | el.append("");
87 | var timeout = new Timer(function() {
88 | char_pos = char_pos + 1;
89 | var j_count = 0;
90 |
91 | if (onblur == true) {
92 | return false;
93 | } else {
94 | for(var j=0; j < settings.tickerCount; j++) {
95 |
96 | var el2 = el.find(".ft_char" + (char_pos - 1));
97 |
98 | var timeout2 = new Timer(function() {
99 | if (onblur == true) {
100 | return false;
101 | } else {
102 |
103 | if (j_count == (settings.tickerCount - 2)) {
104 |
105 | el2.css("opacity", "1").text(el2.data("ft-bk"));
106 | return false;
107 | } else {
108 | if (settings.opacityEffect == true) {
109 | var opacity = (j_count / settings.tickerCount);
110 | } else {
111 | var opacity = 1;
112 | }
113 |
114 | el2.css("opacity", opacity).text(random_char.charAt(Math.floor(Math.random() * random_char.length)));
115 | j_count++;
116 | }
117 | }
118 |
119 | }, j * (settings.tickerTime));
120 |
121 |
122 | }
123 | }
124 | }, (i + 1) * (settings.tickerTime * settings.tickerCount));
125 | }
126 | }
127 |
128 | if (settings.resetOnChange == true) {
129 | $(window).on("blur", function() {
130 | onblur = true;
131 | resetAll(els);
132 | });
133 | }
134 |
135 | el.css("visibility", "hidden");
136 | var global = new Timer(function() {
137 | if (onblur == true) {
138 | return false;
139 | } else {
140 | el.css("visibility", "visible");
141 | randString();
142 | }
143 | }, data_delay * index);
144 | });
145 | }
146 | }(window.jQuery);
147 |
148 |
--------------------------------------------------------------------------------
/jquery.flipping_text.js:
--------------------------------------------------------------------------------
1 | /* ===========================================================
2 | * jquery-flipping_text.js v1
3 | * ===========================================================
4 | * Copyright 2013 Pete Rojwongsuriya.
5 | * http://www.thepetedesign.com
6 | *
7 | * Create an intro animation for your
8 | * typography
9 | *
10 | * https://github.com/peachananr/flipping_text
11 | *
12 | * ========================================================== */
13 |
14 | !function($){
15 |
16 | var defaults = {
17 | tickerTime: 10,
18 | customRandomChar: false,
19 | tickerCount: 10,
20 | opacityEffect: true,
21 | resetOnChange: false
22 | };
23 |
24 | var onblur = false;
25 |
26 | function Timer(callback, delay) {
27 | var timerId, start, remaining = delay;
28 |
29 | this.pause = function() {
30 | window.clearTimeout(timerId);
31 | remaining -= new Date() - start;
32 | };
33 |
34 | this.resume = function() {
35 | start = new Date();
36 | timerId = window.setTimeout(callback, remaining);
37 | };
38 |
39 | this.resume();
40 | }
41 |
42 |
43 | $.fn.flipping_text = function(options){
44 |
45 | var els = this;
46 |
47 | resetAll = function(els){
48 | els.each(function (index) {
49 | $(this).css({
50 | opacity: 1,
51 | visibility: "visible"
52 | }).text($(this).data("ft-text"));
53 | });
54 | }
55 |
56 | return this.each(function (index) {
57 | if ($(this).data("delay") !== undefined) {
58 | var data_delay = $(this).data("delay") + 0;
59 | } else {
60 | var data_delay = 0;
61 | }
62 |
63 |
64 |
65 | var settings = $.extend({}, defaults, options),
66 | el = $(this),
67 | count = el.text().length;
68 |
69 |
70 |
71 | function randString() {
72 |
73 | var text = el.text(),
74 | char_pos = 0;
75 | if (settings.customRandomChar != false) {
76 | var random_char = settings.customRandomChar;
77 | } else {
78 | var random_char = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
79 | }
80 |
81 |
82 | el.attr("data-ft-text", text).html("");
83 |
84 |
85 | for(var i=0; i < count; i++) {
86 | el.append("");
87 | var timeout = new Timer(function() {
88 | char_pos = char_pos + 1;
89 | var j_count = 0;
90 |
91 | if (onblur == true) {
92 | return false;
93 | } else {
94 | for(var j=0; j < settings.tickerCount; j++) {
95 |
96 | var el2 = el.find(".ft_char" + (char_pos - 1));
97 |
98 | var timeout2 = new Timer(function() {
99 | if (onblur == true) {
100 | return false;
101 | } else {
102 |
103 | if (j_count == (settings.tickerCount - 2)) {
104 |
105 | el2.css("opacity", "1").text(el2.data("ft-bk"));
106 | return false;
107 | } else {
108 | if (settings.opacityEffect == true) {
109 | var opacity = (j_count / settings.tickerCount);
110 | } else {
111 | var opacity = 1;
112 | }
113 |
114 | el2.css("opacity", opacity).text(random_char.charAt(Math.floor(Math.random() * random_char.length)));
115 | j_count++;
116 | }
117 | }
118 |
119 | }, j * (settings.tickerTime));
120 |
121 |
122 | }
123 | }
124 | }, (i + 1) * (settings.tickerTime * settings.tickerCount));
125 | }
126 | }
127 |
128 | if (settings.resetOnChange == true) {
129 | $(window).on("blur", function() {
130 | onblur = true;
131 | resetAll(els);
132 | });
133 | }
134 |
135 | el.css("visibility", "hidden");
136 | var global = new Timer(function() {
137 | if (onblur == true) {
138 | return false;
139 | } else {
140 | el.css("visibility", "visible");
141 | randString();
142 | }
143 | }, data_delay * index);
144 | });
145 | }
146 | }(window.jQuery);
147 |
148 |
--------------------------------------------------------------------------------
/jquery.flipping_text.min.js:
--------------------------------------------------------------------------------
1 | !function(e){function r(e,t){var n,r,i=t;this.pause=function(){window.clearTimeout(n);i-=new Date-r};this.resume=function(){r=new Date;n=window.setTimeout(e,i)};this.resume()}var t={tickerTime:10,customRandomChar:false,tickerCount:10,opacityEffect:true,resetOnChange:false};var n=false;e.fn.flipping_text=function(i){var s=this;resetAll=function(t){t.each(function(t){e(this).css({opacity:1,visibility:"visible"}).text(e(this).data("ft-text"))})};return this.each(function(o){function c(){var e=f.text(),t=0;if(a.customRandomChar!=false){var i=a.customRandomChar}else{var i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"}f.attr("data-ft-text",e).html("");for(var s=0;s