| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | <html> |
|---|
| 4 | <head> |
|---|
| 5 | <title>Gruppler's Effect Demos</title> |
|---|
| 6 | |
|---|
| 7 | <link rel="stylesheet" href="../../../dijit/tests/css/dijitTests.css" /> |
|---|
| 8 | |
|---|
| 9 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad:true, isDebug:false"></script> |
|---|
| 10 | |
|---|
| 11 | <script type="text/javascript"> |
|---|
| 12 | dojo.require("dojox.fx.split"); |
|---|
| 13 | |
|---|
| 14 | var intro1, intro2; |
|---|
| 15 | var currentAnimation; |
|---|
| 16 | var originalText; |
|---|
| 17 | |
|---|
| 18 | var init = function(){ |
|---|
| 19 | |
|---|
| 20 | // Intro // |
|---|
| 21 | dojo.style("header1", { "opacity":0, "visibility":"visible" }); |
|---|
| 22 | intro1 = dojox.fx.build({ |
|---|
| 23 | node: "header1", |
|---|
| 24 | duration: 2000, |
|---|
| 25 | rows: 8, |
|---|
| 26 | columns: 1, |
|---|
| 27 | interval: 125 |
|---|
| 28 | }); |
|---|
| 29 | |
|---|
| 30 | intro1.play(); |
|---|
| 31 | // Split Effects // |
|---|
| 32 | dojo.connect(dojo.byId("box_blockfade_1"), "onclick", null, |
|---|
| 33 | function(){ |
|---|
| 34 | var node = dojo.byId("box_blockfade_1"); |
|---|
| 35 | if(parseFloat(node.style.opacity) < 1){ |
|---|
| 36 | return false; |
|---|
| 37 | } |
|---|
| 38 | var properties = { |
|---|
| 39 | node: node, |
|---|
| 40 | rows: 1, |
|---|
| 41 | columns: 10 |
|---|
| 42 | }; |
|---|
| 43 | properties.onEnd = function(){ |
|---|
| 44 | currentAnimation = dojox.fx.blockFadeIn(dojo.mixin(properties, {onEnd: undefined})); |
|---|
| 45 | currentAnimation.play(); |
|---|
| 46 | }; |
|---|
| 47 | currentAnimation = dojox.fx.blockFadeOut(properties); |
|---|
| 48 | currentAnimation.play(); |
|---|
| 49 | |
|---|
| 50 | /* |
|---|
| 51 | // This is how we /should/ be able to do it... |
|---|
| 52 | dojo.fx.chain([ |
|---|
| 53 | dojox.fx.blockFadeOut(properties), |
|---|
| 54 | dojox.fx.blockFadeIn(properties) |
|---|
| 55 | ]).play(); |
|---|
| 56 | */ |
|---|
| 57 | } |
|---|
| 58 | ); |
|---|
| 59 | dojo.connect(dojo.byId("box_blockfade_2"), "onclick", null, |
|---|
| 60 | function(){ |
|---|
| 61 | var node = dojo.byId("box_blockfade_2"); |
|---|
| 62 | if(parseFloat(dojo.style(node,"opacity")) < 1){ |
|---|
| 63 | return false; |
|---|
| 64 | } |
|---|
| 65 | var properties = { |
|---|
| 66 | node: node, |
|---|
| 67 | random: 0.25, |
|---|
| 68 | reverseOrder: true |
|---|
| 69 | }; |
|---|
| 70 | properties.onEnd = function(){ |
|---|
| 71 | currentAnimation = dojox.fx.blockFadeIn(dojo.mixin(properties, {onEnd: undefined})); |
|---|
| 72 | currentAnimation.play(); |
|---|
| 73 | }; |
|---|
| 74 | currentAnimation = dojox.fx.blockFadeOut(properties); |
|---|
| 75 | currentAnimation.play(); |
|---|
| 76 | } |
|---|
| 77 | ); |
|---|
| 78 | |
|---|
| 79 | dojo.connect(dojo.byId("box_disintegrate_1"), "onclick", null, |
|---|
| 80 | function(){ |
|---|
| 81 | var node = dojo.byId("box_disintegrate_1"); |
|---|
| 82 | if(parseFloat(dojo.style(node,"opacity")) < 1){ |
|---|
| 83 | return false; |
|---|
| 84 | } |
|---|
| 85 | var properties = { |
|---|
| 86 | node: node, |
|---|
| 87 | distance: 1, |
|---|
| 88 | crop: true, |
|---|
| 89 | fade: false |
|---|
| 90 | }; |
|---|
| 91 | properties.onEnd = function(){ |
|---|
| 92 | currentAnimation = dojox.fx.build(dojo.mixin(properties, {onEnd: undefined})); |
|---|
| 93 | currentAnimation.play(); |
|---|
| 94 | }; |
|---|
| 95 | currentAnimation = dojox.fx.disintegrate(properties); |
|---|
| 96 | currentAnimation.play(); |
|---|
| 97 | } |
|---|
| 98 | ); |
|---|
| 99 | |
|---|
| 100 | dojo.connect(dojo.byId("box_disintegrate_2"), "onclick", null, |
|---|
| 101 | function(){ |
|---|
| 102 | var node = dojo.byId("box_disintegrate_2"); |
|---|
| 103 | if(parseFloat(dojo.style(node,"opacity")) < 1){ |
|---|
| 104 | return false; |
|---|
| 105 | } |
|---|
| 106 | var properties = { |
|---|
| 107 | node: node, |
|---|
| 108 | random: 0.5, |
|---|
| 109 | distance: 2.5 |
|---|
| 110 | }; |
|---|
| 111 | properties.onEnd = function(){ |
|---|
| 112 | currentAnimation = dojox.fx.build(dojo.mixin(properties, {onEnd: undefined})); |
|---|
| 113 | currentAnimation.play(); |
|---|
| 114 | }; |
|---|
| 115 | currentAnimation = dojox.fx.disintegrate(properties); |
|---|
| 116 | currentAnimation.play(); |
|---|
| 117 | } |
|---|
| 118 | ); |
|---|
| 119 | |
|---|
| 120 | dojo.connect(dojo.byId("box_explode_1"), "onclick", null, |
|---|
| 121 | function(){ |
|---|
| 122 | var node = dojo.byId("box_explode_1"); |
|---|
| 123 | if(parseFloat(dojo.style(node,"opacity")) < 1){ |
|---|
| 124 | return false; |
|---|
| 125 | } |
|---|
| 126 | var properties = { |
|---|
| 127 | node: node, |
|---|
| 128 | rows: 2, |
|---|
| 129 | columns: 2, |
|---|
| 130 | distance: 0.75, |
|---|
| 131 | easing: dojo.fx.easing.elasticOut, |
|---|
| 132 | fade: false, |
|---|
| 133 | crop: true |
|---|
| 134 | }; |
|---|
| 135 | properties.onEnd = function(){ |
|---|
| 136 | currentAnimation = dojox.fx.converge(dojo.mixin(properties, |
|---|
| 137 | { |
|---|
| 138 | onEnd: undefined, |
|---|
| 139 | easing: dojo.fx.easing.bounceOut |
|---|
| 140 | })); |
|---|
| 141 | currentAnimation.play() |
|---|
| 142 | }; |
|---|
| 143 | currentAnimation = dojox.fx.explode(properties); |
|---|
| 144 | currentAnimation.play(); |
|---|
| 145 | } |
|---|
| 146 | ); |
|---|
| 147 | |
|---|
| 148 | dojo.connect(dojo.byId("box_explode_2"), "onclick", null, |
|---|
| 149 | function(){ |
|---|
| 150 | var node = dojo.byId("box_explode_2"); |
|---|
| 151 | if(parseFloat(dojo.style(node,"opacity")) < 1){ |
|---|
| 152 | return false; |
|---|
| 153 | } |
|---|
| 154 | var properties = { |
|---|
| 155 | node: node, |
|---|
| 156 | rows: 5, |
|---|
| 157 | columns: 5, |
|---|
| 158 | distance: 1.5, |
|---|
| 159 | duration: 1500, |
|---|
| 160 | random: 0.75 |
|---|
| 161 | }; |
|---|
| 162 | properties.onEnd = function(){ |
|---|
| 163 | currentAnimation = dojox.fx.converge(dojo.mixin(properties, {onEnd: undefined})); |
|---|
| 164 | currentAnimation.play(); |
|---|
| 165 | }; |
|---|
| 166 | currentAnimation = dojox.fx.explode(properties); |
|---|
| 167 | currentAnimation.play(); |
|---|
| 168 | } |
|---|
| 169 | ); |
|---|
| 170 | |
|---|
| 171 | dojo.connect(dojo.byId("box_shear_1"), "onclick", null, |
|---|
| 172 | function(){ |
|---|
| 173 | var node = dojo.byId("box_shear_1"); |
|---|
| 174 | if(parseFloat(dojo.style(node,"opacity")) < 1){ |
|---|
| 175 | return false; |
|---|
| 176 | } |
|---|
| 177 | var properties = { |
|---|
| 178 | node: node, |
|---|
| 179 | interval: 50, |
|---|
| 180 | distance: 0.95, |
|---|
| 181 | rows: 10, |
|---|
| 182 | columns: 1, |
|---|
| 183 | fade: false, |
|---|
| 184 | crop: true, |
|---|
| 185 | reverseOrder: true |
|---|
| 186 | }; |
|---|
| 187 | properties.onEnd = function(){ |
|---|
| 188 | currentAnimation = dojox.fx.unShear(dojo.mixin(properties, {onEnd: undefined})); |
|---|
| 189 | currentAnimation.play(); |
|---|
| 190 | }; |
|---|
| 191 | currentAnimation = dojox.fx.shear(properties); |
|---|
| 192 | currentAnimation.play(); |
|---|
| 193 | } |
|---|
| 194 | ); |
|---|
| 195 | |
|---|
| 196 | dojo.connect(dojo.byId("box_shear_2"), "onclick", null, |
|---|
| 197 | function(){ |
|---|
| 198 | var node = dojo.byId("box_shear_2"); |
|---|
| 199 | if(parseFloat(dojo.style(node,"opacity")) < 1){ |
|---|
| 200 | return false; |
|---|
| 201 | } |
|---|
| 202 | var properties = { |
|---|
| 203 | node: node, |
|---|
| 204 | random: 1 |
|---|
| 205 | }; |
|---|
| 206 | properties.onEnd = function(){ |
|---|
| 207 | currentAnimation = dojox.fx.unShear(dojo.mixin(properties, {onEnd: undefined})); |
|---|
| 208 | currentAnimation.play(); |
|---|
| 209 | }; |
|---|
| 210 | currentAnimation = dojox.fx.shear(properties); |
|---|
| 211 | currentAnimation.play(); |
|---|
| 212 | } |
|---|
| 213 | ); |
|---|
| 214 | |
|---|
| 215 | dojo.connect(dojo.byId("box_pinwheel_1"), "onclick", null, |
|---|
| 216 | function(){ |
|---|
| 217 | var node = dojo.byId("box_pinwheel_1"); |
|---|
| 218 | if(parseFloat(dojo.style(node,"opacity")) < 1){ |
|---|
| 219 | return false; |
|---|
| 220 | } |
|---|
| 221 | var properties = { |
|---|
| 222 | node: node, |
|---|
| 223 | fade: false |
|---|
| 224 | }; |
|---|
| 225 | properties.onEnd = function(){ |
|---|
| 226 | currentAnimation = dojox.fx.unPinwheel(dojo.mixin(properties, {onEnd: undefined})); |
|---|
| 227 | currentAnimation.play(); |
|---|
| 228 | }; |
|---|
| 229 | currentAnimation = dojox.fx.pinwheel(properties); |
|---|
| 230 | currentAnimation.play(); |
|---|
| 231 | } |
|---|
| 232 | ); |
|---|
| 233 | |
|---|
| 234 | dojo.connect(dojo.byId("box_pinwheel_2"), "onclick", null, |
|---|
| 235 | function(){ |
|---|
| 236 | var node = dojo.byId("box_pinwheel_2"); |
|---|
| 237 | if(parseFloat(dojo.style(node,"opacity")) < 1){ |
|---|
| 238 | return false; |
|---|
| 239 | } |
|---|
| 240 | var properties = { |
|---|
| 241 | node: node, |
|---|
| 242 | random: 1, |
|---|
| 243 | rows: 5, |
|---|
| 244 | columns: 5 |
|---|
| 245 | }; |
|---|
| 246 | properties.onEnd = function(){ |
|---|
| 247 | currentAnimation = dojox.fx.unPinwheel(dojo.mixin(properties, {onEnd: undefined})); |
|---|
| 248 | currentAnimation.play(); |
|---|
| 249 | }; |
|---|
| 250 | currentAnimation = dojox.fx.pinwheel(properties); |
|---|
| 251 | currentAnimation.play(); |
|---|
| 252 | } |
|---|
| 253 | ); |
|---|
| 254 | } // end init |
|---|
| 255 | dojo.addOnLoad(init); |
|---|
| 256 | </script> |
|---|
| 257 | |
|---|
| 258 | <style type="text/css"> |
|---|
| 259 | h1 { |
|---|
| 260 | margin: 0; |
|---|
| 261 | } |
|---|
| 262 | |
|---|
| 263 | hr { |
|---|
| 264 | } |
|---|
| 265 | |
|---|
| 266 | hr.thick { |
|---|
| 267 | } |
|---|
| 268 | |
|---|
| 269 | .box { |
|---|
| 270 | height: 100px; |
|---|
| 271 | width: 100px; |
|---|
| 272 | overflow: visible; |
|---|
| 273 | } |
|---|
| 274 | |
|---|
| 275 | .box { |
|---|
| 276 | color: #292929; |
|---|
| 277 | border: 1px solid #999; |
|---|
| 278 | background-color: #ddd; |
|---|
| 279 | cursor: pointer; |
|---|
| 280 | overflow: hidden; |
|---|
| 281 | margin: 0; |
|---|
| 282 | padding: 0; |
|---|
| 283 | } |
|---|
| 284 | |
|---|
| 285 | |
|---|
| 286 | .textBox p { |
|---|
| 287 | width: 100px; |
|---|
| 288 | height: 100px; |
|---|
| 289 | } |
|---|
| 290 | |
|---|
| 291 | .box p, .box code { |
|---|
| 292 | margin: 0; |
|---|
| 293 | text-align: left; |
|---|
| 294 | } |
|---|
| 295 | |
|---|
| 296 | .effectList { |
|---|
| 297 | list-style: none; |
|---|
| 298 | padding: 0; |
|---|
| 299 | font-size: 10px; |
|---|
| 300 | margin: 0; |
|---|
| 301 | } |
|---|
| 302 | |
|---|
| 303 | .effectList li { |
|---|
| 304 | float: left; |
|---|
| 305 | display:block; |
|---|
| 306 | padding: 1em; |
|---|
| 307 | } |
|---|
| 308 | |
|---|
| 309 | .vl, .vr { |
|---|
| 310 | border: 0px dotted #999; |
|---|
| 311 | } |
|---|
| 312 | |
|---|
| 313 | .vl { |
|---|
| 314 | border-left-width: 4px; |
|---|
| 315 | } |
|---|
| 316 | |
|---|
| 317 | .vr { |
|---|
| 318 | border-right-width: 4px; |
|---|
| 319 | } |
|---|
| 320 | </style> |
|---|
| 321 | </head> |
|---|
| 322 | <body> |
|---|
| 323 | <h1 id="header1">dojox.fx.split</h1> |
|---|
| 324 | Each effect is highly configurable. Here is a general list of the options available in each effect: |
|---|
| 325 | <ul> |
|---|
| 326 | <li>The number of rows and columns in which to split the element</li> |
|---|
| 327 | <li>The distance the pieces travel (as a multiple of the element's respective dimensions)</li> |
|---|
| 328 | <li>Whether or not to fade the pieces in/out</li> |
|---|
| 329 | <li>How much the effect should be randomized (a percentage)</li> |
|---|
| 330 | <li>Whether or not the pieces should appear outside the element's boundries</li> |
|---|
| 331 | </ul> |
|---|
| 332 | <p style="font-weight: bold"> |
|---|
| 333 | Just click each box to play its animation! |
|---|
| 334 | </p> |
|---|
| 335 | <hr /> |
|---|
| 336 | <ul class="effectList"> |
|---|
| 337 | <li>BlockFadeOut,<br />BlockFadeIn uniformly |
|---|
| 338 | <div id='box_blockfade_1' class="box"> |
|---|
| 339 | <code> |
|---|
| 340 | rows: 1<br /> |
|---|
| 341 | columns: 10 |
|---|
| 342 | </code><hr /> |
|---|
| 343 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p> |
|---|
| 344 | </div> |
|---|
| 345 | </li> |
|---|
| 346 | <li class="vr">BlockFadeOut,<br />BlockFadeIn randomly |
|---|
| 347 | <div id='box_blockfade_2' class="box"> |
|---|
| 348 | <code> |
|---|
| 349 | random: 0.25<br /> |
|---|
| 350 | reverseOrder: true |
|---|
| 351 | </code><hr /> |
|---|
| 352 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p> |
|---|
| 353 | </div> |
|---|
| 354 | </li> |
|---|
| 355 | <li>Disintegrate, Build<br />uniformly (cropped) |
|---|
| 356 | <div id='box_disintegrate_1' class="box"> |
|---|
| 357 | <code> |
|---|
| 358 | distance: 1<br /> |
|---|
| 359 | crop: true<br /> |
|---|
| 360 | fade: false |
|---|
| 361 | </code><hr /> |
|---|
| 362 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p> |
|---|
| 363 | </div> |
|---|
| 364 | </li> |
|---|
| 365 | <li class="vr">Disintegrate, Build<br />randomly |
|---|
| 366 | <div id='box_disintegrate_2' class="box"> |
|---|
| 367 | <code> |
|---|
| 368 | random: 0.5<br /> |
|---|
| 369 | distance: 2.5 |
|---|
| 370 | </code><hr /> |
|---|
| 371 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p> |
|---|
| 372 | </div> |
|---|
| 373 | </li> |
|---|
| 374 | <li>Explode, Converge<br />uniformly (cropped) |
|---|
| 375 | <div id='box_explode_1' class="box"> |
|---|
| 376 | <code> |
|---|
| 377 | rows: 2<br /> |
|---|
| 378 | columns: 2<br /> |
|---|
| 379 | distance: 0.75<br /> |
|---|
| 380 | fade: false<br /> |
|---|
| 381 | crop: true<br /> |
|---|
| 382 | (custom easing) |
|---|
| 383 | </code><hr /> |
|---|
| 384 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p> |
|---|
| 385 | </div> |
|---|
| 386 | </li> |
|---|
| 387 | <li class="vr">Explode, Converge<br />randomly |
|---|
| 388 | <div id='box_explode_2' class="box"> |
|---|
| 389 | <code> |
|---|
| 390 | rows: 5<br /> |
|---|
| 391 | columns: 5<br /> |
|---|
| 392 | distance: 1.5<br /> |
|---|
| 393 | duration: 1500<br /> |
|---|
| 394 | random: 0.75 |
|---|
| 395 | </code><hr /> |
|---|
| 396 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p> |
|---|
| 397 | </div> |
|---|
| 398 | </li> |
|---|
| 399 | <li>Shear, UnShear<br />rows (cropped) |
|---|
| 400 | <div id='box_shear_1' class="box"> |
|---|
| 401 | <code> |
|---|
| 402 | interval: 50<br /> |
|---|
| 403 | distance: 0.95<br /> |
|---|
| 404 | rows: 10<br /> |
|---|
| 405 | columns: 1<br /> |
|---|
| 406 | fade: false<br /> |
|---|
| 407 | crop: true<br /> |
|---|
| 408 | reverseOrder: true |
|---|
| 409 | </code><hr /> |
|---|
| 410 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p> |
|---|
| 411 | </div> |
|---|
| 412 | </li> |
|---|
| 413 | <li class="vr">Shear, UnShear<br />rows and columns |
|---|
| 414 | <div id='box_shear_2' class="box"> |
|---|
| 415 | <code> |
|---|
| 416 | random: 1 |
|---|
| 417 | </code><hr /> |
|---|
| 418 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p> |
|---|
| 419 | </div> |
|---|
| 420 | </li> |
|---|
| 421 | <li>Pinwheel, UnPinwheel<br />uniformly |
|---|
| 422 | <div id='box_pinwheel_1' class="box"> |
|---|
| 423 | <code> |
|---|
| 424 | fade: false |
|---|
| 425 | </code><hr /> |
|---|
| 426 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p> |
|---|
| 427 | </div> |
|---|
| 428 | </li> |
|---|
| 429 | <li>Pinwheel, UnPinwheel<br />randomly |
|---|
| 430 | <div id='box_pinwheel_2' class="box"> |
|---|
| 431 | <code> |
|---|
| 432 | random: 1<br /> |
|---|
| 433 | rows: 5<br /> |
|---|
| 434 | columns: 5 |
|---|
| 435 | </code><hr /> |
|---|
| 436 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p> |
|---|
| 437 | </div> |
|---|
| 438 | </li> |
|---|
| 439 | </ul> |
|---|
| 440 | <div style="height:400px"></div> |
|---|
| 441 | </body> |
|---|
| 442 | </html> |
|---|
