dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
374 lines (339 loc) • 10.5 kB
HTML
<html>
<head>
<title>dojox.fx Text Effect Tests | The Dojo Toolkit</title>
<link rel="stylesheet" href="../../../dijit/tests/css/dijitTests.css" />
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="parseOnLoad:true, isDebug:false"></script>
<script type="text/javascript">
dojo.require("dojox.fx.text");
dojo.require("dojo.fx.easing");
var intro1, intro2;
var text_blockfade_1, text_blockfade_2;
var text_disintegrate_1, text_disintegrate_2
var text_explode_1, text_explode_2;
var text_backspace_1, text_backspace_2;
var currentAnimation;
var originalText;
var originalReplacementText = replacementText = "<center><u>This </u><br>is " +
"a <br><i>little </i>bit <br>of <br><b>replacement text</b>...</center>";
var init = function(){
originalText = dojo.byId("text_blockfade_1").innerHTML;
dojo.byId("replacementText").value = replacementText;
// Intro //
intro2 = dojox.fx.text.build({
node: "header2",
duration: 2500,
interval: 80,
reverseOrder: true,
distance: 3,
easing:dojo.fx.easing.backOut,
onPlay: function(){ dojo.style("header2","opacity", 1); }
}).play();
// Text Effects //
text_blockfade_1 = function(node){
if(node.style.height){
return false;
}
var properties = {
node: node,
words: true
};
properties.onEnd = function(){
currentAnimation = dojox.fx.text.blockFadeIn(dojo.mixin(properties, {
onEnd: undefined,
text: (replacementText && node.innerHTML != replacementText) ?
replacementText :
originalText
}));
currentAnimation.play()
};
currentAnimation = dojox.fx.text.blockFadeOut(properties);
currentAnimation.play();
};
text_blockfade_2 = function(node){
if(node.style.height){
return false;
}
var properties = {
node: node,
duration: 1500,
random: 0.3,
reverseOrder: true
};
properties.onEnd = function(){
currentAnimation = dojox.fx.text.blockFadeIn(dojo.mixin(properties, {
onEnd: undefined,
text: (replacementText && node.innerHTML != replacementText) ?
replacementText :
originalText
}));
currentAnimation.play();
};
currentAnimation = dojox.fx.text.blockFadeOut(properties);
currentAnimation.play();
};
text_disintegrate_1 = function(node){
if(node.style.height){
return false;
}
var properties = {
node: node,
words: true,
crop: true,
distance: 1
};
properties.onEnd = function(){
currentAnimation = dojox.fx.text.build(dojo.mixin(properties, {
onEnd: undefined,
text: (replacementText && node.innerHTML != replacementText) ?
replacementText :
originalText
}));
currentAnimation.play();
};
currentAnimation = dojox.fx.text.disintegrate(properties);
currentAnimation.play();
};
text_disintegrate_2 = function(node){
if(node.style.height){
return false;
}
var properties = {
node: node,
random: 0.5,
distance: 2.5,
reverseOrder: true
};
properties.onEnd = function(){
currentAnimation = dojox.fx.text.build(dojo.mixin(properties, {
onEnd: undefined,
text: (replacementText && node.innerHTML != replacementText) ?
replacementText :
originalText
}));
currentAnimation.play();
};
currentAnimation = dojox.fx.text.disintegrate(properties);
currentAnimation.play();
};
text_explode_1 = function(node){
if(node.style.height){
return false;
}
var properties = {
node: node,
distance: 0.5
};
properties.onEnd = function(){
currentAnimation = dojox.fx.text.converge(dojo.mixin(properties,
{
onEnd: undefined,
text: (replacementText && node.innerHTML != replacementText) ?
replacementText :
originalText
}));
currentAnimation.play();
};
currentAnimation = dojox.fx.text.explode(properties);
currentAnimation.play();
};
text_explode_2 = function(node){
if(node.style.height){
return false;
}
var properties = {
node: node,
words: true,
distance: 1.5,
duration: 1500,
random: 0.5,
//crop: true
};
properties.onEnd = function(){
currentAnimation = dojox.fx.text.converge(dojo.mixin(properties,{
onEnd: undefined,
text: (replacementText && node.innerHTML != replacementText) ?
replacementText :
originalText
}));
currentAnimation.play();
};
currentAnimation = dojox.fx.text.explode(properties).play();
};
text_backspace_1 = function(node){
if(node.style.height){
return false;
}
var properties = {
node: node,
duration: 2500,
wordDelay: 0,
fixed: true
};
properties.onEnd = function(){
currentAnimation = dojox.fx.text.type(dojo.mixin(properties,{
onEnd: undefined,
text: (replacementText && node.innerHTML != replacementText) ?
replacementText :
originalText
}));
currentAnimation.play();
};
currentAnimation = dojox.fx.text.backspace(properties);
currentAnimation.play();
};
text_backspace_2 = function(node){
if(node.style.height){
return false;
}
var properties = {
node: node,
interval: 40,
random: 0.75
};
properties.onEnd = function(){
currentAnimation = dojox.fx.text.type(dojo.mixin(properties,
{
onEnd: undefined,
interval: 200,
text: (replacementText && node.innerHTML != replacementText) ?
replacementText :
originalText
}));
currentAnimation.play();
};
currentAnimation = dojox.fx.text.backspace(properties).play();
};
};
dojo.addOnLoad(init);
</script>
<style type="text/css">
body {
font-family: verdana, arial;
}
h1 {
margin: 0;
}
hr {
clear: both;
border: 0px solid #999;
border-top-width: 1px;
margin: 0;
}
hr.thick {
border-top-width: 5px;
}
.box, .boxContainer {
height: 100px;
width: 100px;
overflow: visible;
}
.box {
color: #292929;
border: 1px solid #999;
background-color: #ddd;
cursor: pointer;
overflow: hidden;
margin: 0;
padding: 0;
}
.textBox p {
width: 100px;
height: 100px;
}
.box p, .box code {
margin: 0;
text-align: left;
}
.effectList {
list-style: none;
padding: 0;
font-size: 10px;
margin: 0;
}
.effectList li {
float: left;
padding: 1em;
}
.vl, .vr {
border: 0px dotted #999;
}
.vl {
border-left-width: 4px;
}
.vr {
border-right-width: 4px;
}
</style>
</head>
<body>
<h1 id="header2" style="opacity:0">dojox.fx.text</h1>
<div style="float:right;">
<label for="replacementText">Replacement Text:</label>
<input type="button" value="Clear" onclick="dojo.byId('replacementText').value = replacementText = '';">
<input type="button" value="Reset" onclick="dojo.byId('replacementText').value = replacementText = originalReplacementText;"><br />
<textarea id="replacementText" rows=8 cols=30 onkeyup="replacementText = this.value"></textarea>
</div>
<p>
The following effects are very similar to the previous; rather than separating an element into
rectangular blocks, these separate the text inside the element into either words or characters, preserving any HTML.
</p>
Each effect is highly configurable. Here is a general list of the options available in each effect:
<ul>
<li>Whether or not the text should be split into words rather than characers</li>
<li>Text to use instead of the element's innerHTML</li>
<li>The distance the pieces travel (as a multiple of the element's respective dimensions)</li>
<li>Whether or not to fade the pieces in/out</li>
<li>How much the effect should be randomized (a percentage)</li>
<li>Whether or not the pieces should appear outside the element's boundaries</li>
</ul>
<p style="font-weight: bold">
Just click each block of text to play its animation!<br />
(Some of these are very cpu-hungry)
</p>
<hr />
<ul class="effectList">
<li>BlockFadeOut,<br />BlockFadeIn uniformly<br />(by word)
<div class="box textBox">
<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>
</div>
</li>
<li class="vr">BlockFadeOut,<br />BlockFadeIn randomly<br />(by character)
<div class="box textBox">
<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>
</div>
</li>
<li>Disintegrate, Build<br />uniformly<br />(by word, cropped)
<div class="box textBox">
<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>
</div>
</li>
<li class="vr">Disintegrate, Build<br />randomly<br />(by character)
<div class="box textBox">
<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>
</div>
</li>
<li>Explode, Converge<br />uniformly<br />(by character)
<div class="box textBox">
<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>
</div>
</li>
<li class="vr">Explode, Converge<br />randomly<br />(by word)
<div class="box textBox">
<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>
</div>
</li>
<li>Backspace, Type<br />uniformly<br />(by duration, fixed)
<div class="box textBox">
<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>
</div>
</li>
<li>Backspace, Type<br />randomly<br />(by interval)
<div class="box textBox">
<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>
</div>
</li>
</ul>
<div style="height:400px"></div>
</body>
</html>