forked from UIZE/UIZE-JavaScript-Framework
-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript-animation-examples.html
188 lines (173 loc) · 12.3 KB
/
javascript-animation-examples.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Animation Examples | UIZE JavaScript Framework</title>
<meta name="keywords" content="UIZE JavaScript Framework"/>
<meta name="description" content="The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 32 JavaScript animation examples."/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="css/page.css"/>
<link rel="stylesheet" href="css/page.simpledoc.css"/>
<link rel="stylesheet" href="css/page.index.css"/>
</head>
<body>
<script type="text/javascript" src="js/Uize.js"></script>
<h1 class="document-title">
<a id="page-homeLink" href="index.html" title="UIZE JavaScript Framework home"></a>
JavaScript Animation Examples
</h1>
<div class="main">
<div class="preamble">
The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 32 JavaScript animation examples.
<div class="tourPromo">
<div class="tourPromoHeading">TAKE A STEP-BY-STEP TOUR...</div>
<div class="tourPromoText">
You can take a step-by-step tour through the examples listed on this page. When you get into the tour, you can use the gigantic arrows that will appear on either side of the example pages to navigate from one page to the next (or back). You can also use the "thermometer" bar, that will appear right underneath the title bar of the example pages, to navigate to other pages in the tour. The highlighted segment of the thermometer shows you where you are in the tour.
</div>
<div>
<a href="javascript-feature-tours.html?tour=animation" class="buttonLink">START THE TOUR<span class="arrow"> </span></a>
<br style="line-height:6px;"/>
<br style="clear:right;"/>
</div>
</div>
</div>
<ul id="page-index">
<li>
<div class="itemTitle"><a href="examples/3d-rotation-viewer.html">3D Rotation Viewer</a><span class="arrow"> </span></div>
<div class="itemBody">Easily create a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/animate-position-in-javascript.html">Animate Position in JavaScript</a><span class="arrow"> </span></div>
<div class="itemBody">See how to animate the position of an HTML element and how to apply amazingly realistic motion effects like easing, elasticity, bounce, and many more.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/animate-size-in-javascript.html">Animate Size in JavaScript</a><span class="arrow"> </span></div>
<div class="itemBody">See how to animate the size of an HTML element and how to apply amazingly realistic physics effects like easing, elasticity, bounce, and many more.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/animated-buttons-with-box-shadow.html">Animated Buttons with Box Shadow</a><span class="arrow"> </span></div>
<div class="itemBody">See how to animate CSS3 box-shadow in order to make buttons leap out of the page when you mouse over them and bounce back when you mouse out of them.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/bars.html">Bars For Data Comparison</a><span class="arrow"> </span></div>
<div class="itemBody">See an example that uses bar widgets to create a dynamic bar chart to compare nutritional data for fruits, with slick JavaScript animation effects.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/swap-html.html">Basic HTML Swap</a><span class="arrow"> </span></div>
<div class="itemBody">See a demo of the HTML swapper widget, which provides a JavaScript animation transition effect when swapping out the HTML that the widget displays.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/mask.html">Basic Mask</a><span class="arrow"> </span></div>
<div class="itemBody">See a mask widget being used to highlight an image in a layout. Switching to highlighting a different image is accompanied by a JavaScript animation.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/progress-bar.html">Basic Progress Bar</a><span class="arrow"> </span></div>
<div class="itemBody">Ever needed a progress bar for your Ajax applications to show that requests are busy and how much longer they may take? This demo will show you how.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/collection-item-coupled-zooming.html">Coupled Zooming Collection Items</a><span class="arrow"> </span></div>
<div class="itemBody">See how two instances of the zooming collection item widget can be coupled together to give you a side-by-side zoomed in comparison of two images.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/curve-explorer.html">Curve Explorer</a><span class="arrow"> </span></div>
<div class="itemBody">Add pizazz to JavaScript animations - bounce, easing, elasticity, and more. Visualize and experiment with preset curve functions. Or create your own!</div>
</li>
<li>
<div class="itemTitle"><a href="examples/swap-deck.html">Deck Swapper</a><span class="arrow"> </span></div>
<div class="itemBody">See a demo of the deck swapper widget, which provides a JavaScript animation transition effect when swapping from one item in the deck to another.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/fading-an-object.html">Fading an Object</a><span class="arrow"> </span></div>
<div class="itemBody">Animate complex data objects with ease. UIZE supports compound value interpolation. See how an array of two RGB color objects can be faded over time.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/fading-links.html">Fading Links</a><span class="arrow"> </span></div>
<div class="itemBody">Elegant menu animation effects to liven up any dull Web page! This JavaScript example shows you what is possible with the UIZE JavaScript Framework.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/hover-fader-color-effects.html">Hover Fader Color Effects</a><span class="arrow"> </span></div>
<div class="itemBody">Who needs boring menus when you can have stunning menu animations that will have your users mesmerized! You have to see these effects to believe them.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/hover-fader-for-thumbnails.html">Hover Fader for Thumbnails</a><span class="arrow"> </span></div>
<div class="itemBody">See how to liven up image thumbnails with some cool JavaScript animation! Diverse effects can be achieved by animating different CSS style properties.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/hover-fader-stretching-menu.html">Hover Fader Stretching Menu</a><span class="arrow"> </span></div>
<div class="itemBody">Stretch the limits of what can be done with animated menus. Using JavaScript to animate CSS style properties can produce amazingly slick effects!</div>
</li>
<li>
<div class="itemTitle"><a href="examples/hover-fader-text-shadow-animation.html">Hover Fader Text Shadow Animation</a><span class="arrow"> </span></div>
<div class="itemBody">Animate the color, horizontal offset, vertical offset, and blur radius properties for any number of CSS3 text shadows to produce amazing menu effects.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/swap-image-cycle.html">Image Cycle</a><span class="arrow"> </span></div>
<div class="itemBody">Create a simple JavaScript slideshow experience with the cycling image swap widget. Each image is revealed with a different swap / transition effect.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/slideshow-mantle.html">Mantle Slideshow</a><span class="arrow"> </span></div>
<div class="itemBody">.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/scrolly.html">Scrolly</a><span class="arrow"> </span></div>
<div class="itemBody">See the scrolly widget in action, as it scrolls two sets of thumbnails - horizontal and vertical - with an accompanying JavaScript animation effect.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/scrolly-carousel.html">Scrolly Carousel</a><span class="arrow"> </span></div>
<div class="itemBody">See the scrolly widget being used to create a scrollable carousel, where scrolling through the pages is accompanied by a JavaScript animation effect.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/sequenced-show.html">Sequenced Show</a><span class="arrow"> </span></div>
<div class="itemBody">This demo shows how you can sequence the appearance of thumbnails in a grid, with thumbnails filling in from the top left and bottom right corners.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/sequenced-show-using-swap.html">Sequenced Show Using Swap</a><span class="arrow"> </span></div>
<div class="itemBody">See how thumbnails in a grid of thumbnails can be revealed in a choreographed manner, with a JavaScript animation effect for revealing each thumbnail.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/slideshow-of-data.html">Slideshow of Data</a><span class="arrow"> </span></div>
<div class="itemBody">Who says that a slideshow can only be used to display an image? See this demo - it uses a slideshow to display nutritional data for various fruits.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/slideshow-with-dissolve.html">Slideshow With Dissolve</a><span class="arrow"> </span></div>
<div class="itemBody">See a slideshow demo that transitions from image to image with a JavaScript animation effect and that also displays rating stars using a bar widget.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/slideshow-with-wipes.html">Slideshow With Wipes</a><span class="arrow"> </span></div>
<div class="itemBody">See an example of a JavaScript slideshow widget with stunning image wipe animation effects that you didn't believe were possible with just JavaScript.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/tabbed-interface-with-fade.html">Tabbed Interface With Fade</a><span class="arrow"> </span></div>
<div class="itemBody">Everyone's seen a basic tabbed interface. Why not add some pizazz to your tabs with a JavaScript animation cross-fade effect! This demo shows you how.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/image-wipe.html">Uize.Widget.ImageWipe</a><span class="arrow"> </span></div>
<div class="itemBody">See stunning image wipe animation effects you didn't believe possible with JavaScript. Choose from dozens of presets. Tweak values to make your own.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/swap-image.html">Uize.Widget.Swap.Image</a><span class="arrow"> </span></div>
<div class="itemBody">See some amazing possibilities for image transitions using lightweight JavaScript animation. Play with lots of effect presets, and even make your own.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/thumbzoom.html">Uize.Widget.ThumbZoom</a><span class="arrow"> </span></div>
<div class="itemBody">Astonish users with a slick animated image preview feature where a larger preview zooms out from a grid of thumbnail images. This demo shows you how.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/collection-item-zooming-with-image-switching.html">Zooming Collection Item with Image Switching</a><span class="arrow"> </span></div>
<div class="itemBody">See how the zooming collection item widget is used in combination with an image selector strip to provide an interface for previewing multiple images.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/collection-item-zooming.html">Zooming Collection Items</a><span class="arrow"> </span></div>
<div class="itemBody">Experience the zooming collection item widget. It gives you a lightweight and intuitive preview behavior, with a JavaScript animation zoom-in effect.</div>
</li>
</ul>
</div>
<script type="text/javascript">
Uize.module ({
required:[
'UizeDotCom.Page.Doc.library',
'UizeDotCom.Page.Index'
],
builder:function () {(window.page = new UizeDotCom.Page.Index).wireUi ()}
});
</script>
</body></html>