source: Dev/trunk/src/client/dojox/fx/tests/test_text.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 10.2 KB
Line 
1<html>
2<head>
3       
4        <title>dojox.fx Text Effect Tests | The Dojo Toolkit</title>
5
6        <link rel="stylesheet" href="../../../dijit/tests/css/dijitTests.css" />
7
8        <script type="text/javascript" src="../../../dojo/dojo.js"
9                data-dojo-config="parseOnLoad:true, isDebug:false"></script>
10               
11        <script type="text/javascript">
12                dojo.require("dojox.fx.text");
13                dojo.require("dojo.fx.easing");
14
15                var intro1, intro2;
16                var text_blockfade_1, text_blockfade_2;
17                var text_disintegrate_1, text_disintegrate_2
18                var text_explode_1, text_explode_2;
19                var text_backspace_1, text_backspace_2;
20
21                var currentAnimation;
22
23                var originalText;
24                var originalReplacementText = replacementText = "<center><u>This </u><br>is " +
25                        "a <br><i>little </i>bit <br>of <br><b>replacement text</b>...</center>";
26
27                var init = function(){
28
29                        originalText = dojo.byId("text_blockfade_1").innerHTML;
30                        dojo.byId("replacementText").value = replacementText;
31
32                        // Intro //
33                        intro2 = dojox.fx.text.build({
34                                node: "header2",
35                                duration: 2500,
36                                interval: 80,
37                                reverseOrder: true,
38                                distance: 3,
39                                easing:dojo.fx.easing.backOut,
40                                onPlay: function(){ dojo.style("header2","opacity", 1); }
41                        }).play();
42                       
43
44                        // Text Effects //
45
46                        text_blockfade_1 = function(node){
47                                if(node.style.height){
48                                        return false;
49                                }
50                                var properties = {
51                                        node: node,
52                                        words: true
53                                };
54                                properties.onEnd = function(){
55                                        currentAnimation = dojox.fx.text.blockFadeIn(dojo.mixin(properties, {
56                                                onEnd: undefined,
57                                                text: (replacementText && node.innerHTML != replacementText) ?
58                                                        replacementText :
59                                                        originalText
60                                        }));
61                                        currentAnimation.play()
62                                };
63                                currentAnimation = dojox.fx.text.blockFadeOut(properties);
64                                currentAnimation.play();
65                        };
66                        text_blockfade_2 = function(node){
67                                if(node.style.height){
68                                        return false;
69                                }
70                                var properties = {
71                                        node: node,
72                                        duration: 1500,
73                                        random: 0.3,
74                                        reverseOrder: true
75                                };
76                                properties.onEnd = function(){
77                                        currentAnimation = dojox.fx.text.blockFadeIn(dojo.mixin(properties, {
78                                                onEnd: undefined,
79                                                text: (replacementText && node.innerHTML != replacementText) ?
80                                                        replacementText :
81                                                        originalText
82                                        }));
83                                        currentAnimation.play();
84                                };
85                                currentAnimation = dojox.fx.text.blockFadeOut(properties);
86                                currentAnimation.play();
87                        };
88
89                        text_disintegrate_1 = function(node){
90                                if(node.style.height){
91                                        return false;
92                                }
93                                var properties = {
94                                        node: node,
95                                        words: true,
96                                        crop: true,
97                                        distance: 1
98                                };
99                                properties.onEnd = function(){
100                                        currentAnimation = dojox.fx.text.build(dojo.mixin(properties, {
101                                                onEnd: undefined,
102                                                text: (replacementText && node.innerHTML != replacementText) ?
103                                                        replacementText :
104                                                        originalText
105                                        }));
106                                        currentAnimation.play();
107                                };
108                                currentAnimation = dojox.fx.text.disintegrate(properties);
109                                currentAnimation.play();
110                        };
111                        text_disintegrate_2 = function(node){
112                                if(node.style.height){
113                                        return false;
114                                }
115                                var properties = {
116                                        node: node,
117                                        random: 0.5,
118                                        distance: 2.5,
119                                        reverseOrder: true
120                                };
121                                properties.onEnd = function(){
122                                        currentAnimation = dojox.fx.text.build(dojo.mixin(properties, {
123                                                onEnd: undefined,
124                                                text: (replacementText && node.innerHTML != replacementText) ?
125                                                        replacementText :
126                                                        originalText
127                                        }));
128                                        currentAnimation.play();
129                                };
130                                currentAnimation = dojox.fx.text.disintegrate(properties);
131                                currentAnimation.play();
132                        };
133
134                        text_explode_1 = function(node){
135                                if(node.style.height){
136                                        return false;
137                                }
138                                var properties = {
139                                        node: node,
140                                        distance: 0.5
141                                };
142                                properties.onEnd = function(){
143                                        currentAnimation = dojox.fx.text.converge(dojo.mixin(properties,
144                                        {
145                                                onEnd: undefined,
146                                                text: (replacementText && node.innerHTML != replacementText) ?
147                                                        replacementText :
148                                                        originalText
149                                        }));
150                                        currentAnimation.play();
151                                };
152                                currentAnimation = dojox.fx.text.explode(properties);
153                                currentAnimation.play();
154                        };
155                        text_explode_2 = function(node){
156                                if(node.style.height){
157                                        return false;
158                                }
159                                var properties = {
160                                        node: node,
161                                        words: true,
162                                        distance: 1.5,
163                                        duration: 1500,
164                                        random: 0.5,
165                                        //crop: true
166                                };
167                                properties.onEnd = function(){
168                                        currentAnimation = dojox.fx.text.converge(dojo.mixin(properties,{
169                                                onEnd: undefined,
170                                                text: (replacementText && node.innerHTML != replacementText) ?
171                                                        replacementText :
172                                                        originalText
173                                        }));
174                                        currentAnimation.play();
175                                };
176                                currentAnimation = dojox.fx.text.explode(properties).play();
177                        };
178
179                        text_backspace_1 = function(node){
180                                if(node.style.height){
181                                        return false;
182                                }
183                                var properties = {
184                                        node: node,
185                                        duration: 2500,
186                                        wordDelay: 0,
187                                        fixed: true
188                                };
189                                properties.onEnd = function(){
190                                        currentAnimation = dojox.fx.text.type(dojo.mixin(properties,{
191                                                onEnd: undefined,
192                                                text: (replacementText && node.innerHTML != replacementText) ?
193                                                        replacementText :
194                                                        originalText
195                                        }));
196                                        currentAnimation.play();
197                                };
198                                currentAnimation = dojox.fx.text.backspace(properties);
199                                currentAnimation.play();
200                        };
201                        text_backspace_2 = function(node){
202                                if(node.style.height){
203                                        return false;
204                                }
205                                var properties = {
206                                        node: node,
207                                        interval: 40,
208                                        random: 0.75
209                                };
210                                properties.onEnd = function(){
211                                        currentAnimation = dojox.fx.text.type(dojo.mixin(properties,
212                                        {
213                                                onEnd: undefined,
214                                                interval: 200,
215                                                text: (replacementText && node.innerHTML != replacementText) ?
216                                                        replacementText :
217                                                        originalText
218                                        }));
219                                        currentAnimation.play();
220                                };
221                                currentAnimation = dojox.fx.text.backspace(properties).play();
222                        };
223                };
224                dojo.addOnLoad(init);
225        </script>
226        <style type="text/css">
227          body {
228                font-family: verdana, arial;
229          }
230
231          h1 {
232                margin: 0;
233          }
234
235          hr {
236                clear: both;
237                border: 0px solid #999;
238                border-top-width: 1px;
239                margin: 0;
240          }
241
242          hr.thick {
243                border-top-width: 5px;
244          }
245
246          .box, .boxContainer {
247                height: 100px;
248                width: 100px;
249                overflow: visible;
250          }
251
252          .box {
253                color: #292929;
254                border: 1px solid #999;
255                background-color: #ddd;
256                cursor: pointer;
257                overflow: hidden;
258                margin: 0;
259                padding: 0;
260          }
261
262
263          .textBox p {
264                width: 100px;
265                height: 100px;
266          }
267
268          .box p, .box code {
269                margin: 0;
270                text-align: left;
271          }
272
273          .effectList {
274                list-style: none;
275                padding: 0;
276                font-size: 10px;
277                margin: 0;
278          }
279
280          .effectList li {
281                float: left;
282                padding: 1em;
283          }
284
285          .vl, .vr {
286                border: 0px dotted #999;
287          }
288
289          .vl {
290                border-left-width: 4px;
291          }
292
293          .vr {
294                border-right-width: 4px;
295          }
296        </style>
297</head>
298<body>
299
300        <h1 id="header2" style="opacity:0">dojox.fx.text</h1>
301
302        <div style="float:right;">
303
304                <label for="replacementText">Replacement Text:</label>
305                <input type="button" value="Clear" onclick="dojo.byId('replacementText').value = replacementText = '';">
306                <input type="button" value="Reset" onclick="dojo.byId('replacementText').value = replacementText = originalReplacementText;"><br />
307                <textarea id="replacementText" rows=8 cols=30 onkeyup="replacementText = this.value"></textarea>
308        </div>
309
310        <p>
311                The following effects are very similar to the previous; rather than separating an element into
312                rectangular blocks, these separate the text inside the element into either words or characters, preserving any HTML.
313        </p>
314       
315        Each effect is highly configurable.     Here is a general list of the options available in each effect:
316        <ul>
317                <li>Whether or not the text should be split into words rather than characers</li>
318                <li>Text to use instead of the element's innerHTML</li>
319                <li>The distance the pieces travel (as a multiple of the element's respective dimensions)</li>
320                <li>Whether or not to fade the pieces in/out</li>
321                <li>How much the effect should be randomized (a percentage)</li>
322                <li>Whether or not the pieces should appear outside the element's boundries</li>
323        </ul>
324        <p style="font-weight: bold">
325                Just click each block of text to play its animation!<br />
326                (Some of these are very cpu-hungry)
327        </p>
328        <hr />
329        <ul class="effectList">
330          <li>BlockFadeOut,<br />BlockFadeIn uniformly<br />(by word)
331                <div class="box textBox">
332                  <p id="text_blockfade_1" onclick="text_blockfade_1(this)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
333                </div>
334          </li>
335          <li class="vr">BlockFadeOut,<br />BlockFadeIn randomly<br />(by character)
336                <div class="box textBox">
337                  <p id="text_blockfade_2" onclick="text_blockfade_2(this)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
338                </div>
339          </li>
340          <li>Disintegrate, Build<br />uniformly<br />(by word, cropped)
341                <div class="box textBox">
342                  <p id="text_disintegrate_1" onclick="text_disintegrate_1(this)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
343                </div>
344          </li>
345          <li class="vr">Disintegrate, Build<br />randomly<br />(by character)
346                <div class="box textBox">
347                  <p id="text_disintegrate_2" onclick="text_disintegrate_2(this)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
348                </div>
349          </li>
350          <li>Explode, Converge<br />uniformly<br />(by character)
351                <div class="box textBox">
352                  <p id="text_explode_1" onclick="text_explode_1(this)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
353                </div>
354          </li>
355          <li class="vr">Explode, Converge<br />randomly<br />(by word)
356                <div class="box textBox">
357                  <p id="text_explode_2" onclick="text_explode_2(this)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
358                </div>
359          </li>
360          <li>Backspace, Type<br />uniformly<br />(by duration, fixed)
361                <div class="box textBox">
362                  <p id="text_backspace_1" onclick="text_backspace_1(this)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
363                </div>
364          </li>
365          <li>Backspace, Type<br />randomly<br />(by interval)
366                <div class="box textBox">
367                  <p id="text_backspace_2" onclick="text_backspace_2(this)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
368                </div>
369          </li>
370        </ul>
371        <div style="height:400px"></div>
372  </body>
373</html>
Note: See TracBrowser for help on using the repository browser.