Skip to content

Text effects #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 27 commits into from
Closed

Text effects #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
9f3564e
first draft of effect.text
seankoole Dec 22, 2010
3789108
renamed the file
seankoole Dec 22, 2010
c70b0f8
Made the engine more efficient and better commented
seankoole Dec 22, 2010
292513d
Added build and disintegrate methods
seankoole Dec 22, 2010
dc40a5e
Added more information for external developers and added some perf
seankoole Dec 22, 2010
9c0d0c7
Added more flexibility for disintegration (top, bottom, left, right a…
seankoole Dec 23, 2010
c15f2df
Fixed bug reported by @ajpiano, elements are animated to document max…
seankoole Dec 23, 2010
1a4e445
fixed bug with disintegration (to top)
seankoole Dec 24, 2010
738ceda
used easeInSine for build and easeInCirc for disintegration as defaul…
seankoole Dec 24, 2010
7f222c0
used easeOutInSine for fadeblockout/in
seankoole Dec 24, 2010
ca8451a
Added effecst 'type' and 'backspace'
seankoole Dec 24, 2010
28d6530
added textExplode and textConverge
seankoole Dec 28, 2010
49e409e
Changed code to match styleguide
seankoole Jan 15, 2011
90a5906
Renamed glob.js to jquery.global.js to match actual plugin filenames.
jzaefferer Jan 17, 2011
0bbfbd4
Updated global plugin to latest version.
jzaefferer Jan 17, 2011
ff62bdf
Merge branch 'master' of github.com:jquery/jquery-ui
jzaefferer Jan 17, 2011
7608e4a
Update example culture files to $.global
jzaefferer Jan 17, 2011
67b070f
Datepicker: Update parseDate to properly handle a string value in sho…
IvanTheBearable Jan 18, 2011
ca818be
Update to latest jquery-global plugin
jzaefferer Jan 18, 2011
6a79c70
Spinner: Update to latest jquery-global plugin, removing the currency
jzaefferer Jan 18, 2011
086131b
Update to latest jquery-global plugin
jzaefferer Jan 18, 2011
fcf8c26
Datepicker i18n: Added Algerian Arabic. Fixes #6877 - Datepicker: Add…
Jan 15, 2011
30c9473
Datepicker i18n: Added Algerian Arabic to demos.
scottgonzalez Jan 19, 2011
cf0c32f
Sortable: pass a fake event object to _mouseUp on cancel. Fixes #5882…
scottgonzalez Jan 19, 2011
f165c93
Sortable: Make sure we have a placeholder before trying to remove it …
Jan 18, 2011
8598e95
Merge branch 'master' of github.com:seankoole/jquery-ui
paulirish Jan 23, 2011
bdeb08a
new text effect demos page. added and integrated.
paulirish Jan 24, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions demos/datepicker/localization.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<script src="../../ui/jquery.ui.datepicker.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-af.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-ar.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-ar-DZ.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-az.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-bg.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-bs.js"></script>
Expand Down Expand Up @@ -87,6 +88,7 @@
<select id="locale">
<option value="af">Afrikaans</option>
<option value="sq">Albanian (Gjuha shqipe)</option>
<option value="ar-DZ">Algerian Arabic</option>
<option value="ar">Arabic (&#8235;(&#1604;&#1593;&#1585;&#1576;&#1610;</option>
<option value="hy">Armenian (&#1344;&#1377;&#1397;&#1381;&#1408;&#1381;&#1398;)</option>
<option value="az">Azerbaijani (Az&#601;rbaycan dili)</option>
Expand Down
1 change: 1 addition & 0 deletions demos/effect/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Effect showcase</a></li>
<li><a href="text.html">Text Effect showcase</a></li>
<li><a href="easing.html">Easing showcase</a></li>
</ul>
</div>
Expand Down
249 changes: 249 additions & 0 deletions demos/effect/text.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,249 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - Text Effect demo</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.4.4.js"></script>
<script src="../../ui/jquery.effects.core.js"></script>
<script src="../../ui/jquery.effects.text.js"></script>
<link rel="stylesheet" href="../demos.css">

<style>

.box, .boxContainer {
height: 70px;
width: 100px;
overflow: visible;
}

.box {
color: #292929;
border: 1px solid #ccc;
background-color: #eee;
cursor: pointer;
overflow: hidden;
margin: 0;
padding: 5px;
}

.box:hover {
background-color: #efefef;
}

h3 {
padding: 5px;
margin: .5em 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;
clear: both;
}

.effectList li {
float: left;
margin: 1em;
padding: 0 .5em .5em;
}
</style>
</head>

<body>



<p style="font-weight: bold">
Click each block of text to play its animation
</p>


<ul class="effectList">
<li class="ui-widget-content ui-corner-all"><h3 class="ui-widget-header ui-corner-all">BlockFadeOut<br />(by word)</h3>
<div class="box textBox">
<p data-duration="1000" data-effect="blockFadeOut">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
</div>
</li>
<li class="vr ui-widget-content ui-corner-all"><h3 class="ui-widget-header ui-corner-all">BlockFadeIn<br />(by word)</h3>
<div class="box textBox">
<p data-duration="1000" data-effect="blockFadeIn"></p>
</div>
</li>
<li class="vr ui-widget-content ui-corner-all"><h3 class="ui-widget-header ui-corner-all">BlockFadeOut<br />(by character)</h3>
<div class="box textBox">
<p data-duration="1000" data-words="false" data-effect="blockFadeOut">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
</div>
</li>
<li class="vr ui-widget-content ui-corner-all"><h3 class="ui-widget-header ui-corner-all">BlockFadeIn<br />(by character)</h3>
<div class="box textBox">
<p data-duration="1000" data-words="false" data-effect="blockFadeIn"></p>
</div>
</li>

</ul>
<ul class="effectList">
<li class="ui-widget-content ui-corner-all"><h3 class="ui-widget-header ui-corner-all">build<br />(by word)</h3>
<div class="box textBox">
<p data-duration="1000" data-effect="build"></p>
</div>
</li>
<li class="vr ui-widget-content ui-corner-all"><h3 class="ui-widget-header ui-corner-all">disintegrate<br />(by word)</h3>
<div class="box textBox">
<p data-duration="1000" data-effect="disintegrate">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
</div>
</li>
<li class="vr ui-widget-content ui-corner-all"><h3 class="ui-widget-header ui-corner-all">build<br />(by character)</h3>
<div class="box textBox">
<p data-duration="1000" data-words="false" data-effect="build"></p>
</div>
</li>
<li class="vr ui-widget-content ui-corner-all"><h3 class="ui-widget-header ui-corner-all">disintegrate<br />(by character)</h3>
<div class="box textBox">
<p data-duration="1000" data-words="false" data-effect="disintegrate">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
</div>
</li>

</ul>
<ul class="effectList">
<li class="ui-widget-content ui-corner-all"><h3 class="ui-widget-header ui-corner-all">type<br /> (letters)</h3>
<div class="box textBox">
<p data-duration="2500" data-effect="type"></p>
</div>
</li>
<li class="vr ui-widget-content ui-corner-all"><h3 class="ui-widget-header ui-corner-all">backspace<br /> (letters)</h3>
<div class="box textBox">
<p data-duration="2500" data-effect="backspace">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
</div>
</li>
</ul>
<ul class="effectList">
<li class="ui-widget-content ui-corner-all"><h3 class="ui-widget-header ui-corner-all">textExplode<br />(by word)</h3>
<div class="box textBox">
<p data-duration="1000" data-effect="textExplode">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
</div>
</li>
<li class="vr ui-widget-content ui-corner-all"><h3 class="ui-widget-header ui-corner-all">textConverge<br />(by word)</h3>
<div class="box textBox">
<p data-duration="1000" data-effect="textConverge"></p>
</div>
</li>
<li class="vr ui-widget-content ui-corner-all"><h3 class="ui-widget-header ui-corner-all">textExplode<br />(by character)</h3>
<div class="box textBox">
<p data-duration="1000" data-words="false" data-effect="textExplode">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
</div>
</li>
<li class="vr ui-widget-content ui-corner-all"><h3 class="ui-widget-header ui-corner-all">textConverge<br />(by character)</h3>
<div class="box textBox">
<p data-duration="1000" data-words="false" data-effect="textConverge"></p>
</div>
</li>

</ul>

<hr style="clear:both">

<h3>options available in each effect:</h3>
<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>The direction the pieces travel</li>
<li>Whether or not to fade the pieces in/out</li>
<li>How much the effect should be randomized (a percentage)</li>
<li>stop elements from leaving the document's boundaries</li>
</ul>

<ul class="effectList">
<li>
<p style="font-weight: bold">
General Options
</p>
<input id="random" type="checkbox" value="1"> Random?<br>
<input type="number" id="ratio" size="5" value="30"> % randomness<br>
<input id="reverse" type="checkbox" value="1">
Reverse? (not really visible when random is turned on)<br>
</li>
<li>
<p style="font-weight: bold"> Build/Disintegrate options:</p>
<select id="direction">
<option value="bottom">bottom</option>
<option value="top">top</option>
<option value="left">left</option>
<option value="right">right</option>
<option value="bottom left">bottom left</option>
<option value="bottom right">bottom right</option>
<option value="top left">top left</option>
<option value="top right">top right</option>
</select>
<div>
<input type="number" id="distance" size="5" value="1"> Distance? (* parent height)</div>
</li>
</ul>


<script>


/* Some vars */
var origHTML = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.',
$replacement = $('#replacementText'),
$random = $('#random'),
$direction = $('#direction'),
$reverse = $('#reverse'),
$distance = $('#distance'),
$ratio = $('#ratio'),
$header = $('h1.header');

//$header.effect ('build', {distance: 5, direction: 'top', words: false, text: $header.data ('text')}, 2000);
$header.effect ('build', {words: false, text: $header.data ('text')}, 1500);

/* See if it's random or not */
function isRandom () {
return $random.is (':checked') ? parseFloat ($ratio.val ()) / 100 : false;
}

/* See if it's in reverse or not */
function isReverse () {
return $reverse.is (':checked') ? true : false;
}

/* See if it's in direction or not */
function getDirection () {
return $direction.val ();
}

/* Get the Distance to animate to/from */
function getDistance () {
return parseFloat ($distance.val ());
}

/*
Iterate over everything and bind events
*/
$('p[data-effect]').bind ('click',
function () {
var $this = $(this),
words = $this.data ('words') === 'false' ? false : true;


$this.effect ($this.data ('effect'), {distance: getDistance (), direction: getDirection (), words: $this.data ('words'), text: origHTML, random: isRandom (), reverse: isReverse ()}, $this.data ('duration'));
}
);


</script>
</body>
</html>
5 changes: 3 additions & 2 deletions demos/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
<link rel="stylesheet" href="demos.css">
<script src="../jquery-1.4.4.js"></script>
<script src="../external/jquery.bgiframe-2.1.2.js"></script>
<script src="../external/glob.js"></script>
<script src="../external/glob.de-DE.js"></script>
<script src="../external/jquery.global.js"></script>
<script src="../external/jquery.global.de-DE.js"></script>
<script src="../ui/jquery.ui.core.js"></script>
<script src="../ui/jquery.ui.widget.js"></script>
<script src="../ui/jquery.ui.mouse.js"></script>
Expand Down Expand Up @@ -44,6 +44,7 @@
<script src="../ui/jquery.effects.transfer.js"></script>
<script src="../ui/i18n/jquery.ui.datepicker-af.js"></script>
<script src="../ui/i18n/jquery.ui.datepicker-ar.js"></script>
<script src="../ui/i18n/jquery.ui.datepicker-ar-DZ.js"></script>
<script src="../ui/i18n/jquery.ui.datepicker-az.js"></script>
<script src="../ui/i18n/jquery.ui.datepicker-bs.js"></script>
<script src="../ui/i18n/jquery.ui.datepicker-bg.js"></script>
Expand Down
6 changes: 3 additions & 3 deletions demos/spinner/currency.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.4.js"></script>
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
<script type="text/javascript" src="../../external/glob.js"></script>
<script type="text/javascript" src="../../external/glob.de-DE.js"></script>
<script type="text/javascript" src="../../external/glob.ja-JP.js"></script>
<script type="text/javascript" src="../../external/jquery.global.js"></script>
<script type="text/javascript" src="../../external/jquery.global.de-DE.js"></script>
<script type="text/javascript" src="../../external/jquery.global.ja-JP.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
Expand Down
6 changes: 3 additions & 3 deletions demos/spinner/decimal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.4.js"></script>
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
<script type="text/javascript" src="../../external/glob.js"></script>
<script type="text/javascript" src="../../external/glob.de-DE.js"></script>
<script type="text/javascript" src="../../external/glob.ja-JP.js"></script>
<script type="text/javascript" src="../../external/jquery.global.js"></script>
<script type="text/javascript" src="../../external/jquery.global.de-DE.js"></script>
<script type="text/javascript" src="../../external/jquery.global.ja-JP.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
Expand Down
4 changes: 2 additions & 2 deletions demos/spinner/time.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.4.js"></script>
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
<script type="text/javascript" src="../../external/glob.js"></script>
<script type="text/javascript" src="../../external/glob.de-DE.js"></script>
<script type="text/javascript" src="../../external/jquery.global.js"></script>
<script type="text/javascript" src="../../external/jquery.global.de-DE.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
Expand Down
4 changes: 2 additions & 2 deletions external/glob.de-DE.js → external/jquery.global.de-DE.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
(function($) {
var cultures = $.cultures,
var cultures = $.global.cultures,
en = cultures.en,
standard = en.calendars.standard,
culture = cultures["de-DE"] = $.extend(true, {}, en, {
Expand Down Expand Up @@ -52,4 +52,4 @@
}
}, cultures["de-DE"]);
culture.calendar = culture.calendars.standard;
})(Globalization);
})(jQuery);
4 changes: 2 additions & 2 deletions external/glob.ja-JP.js → external/jquery.global.ja-JP.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
(function($) {
var cultures = $.cultures,
var cultures = $.global.cultures,
en = cultures.en,
standard = en.calendars.standard,
culture = cultures["ja-JP"] = $.extend(true, {}, en, {
Expand Down Expand Up @@ -71,4 +71,4 @@
}
}, cultures["ja-JP"]);
culture.calendar = culture.calendars.standard;
})(Globalization);
})(jQuery);
Loading