| OLD | NEW |
| (Empty) |
| 1 <!-- | |
| 2 Copyright 2013 Google Inc. All Rights Reserved. | |
| 3 | |
| 4 Licensed under the Apache License, Version 2.0 (the "License"); | |
| 5 you may not use this file except in compliance with the License. | |
| 6 You may obtain a copy of the License at | |
| 7 | |
| 8 http://www.apache.org/licenses/LICENSE-2.0 | |
| 9 | |
| 10 Unless required by applicable law or agreed to in writing, software | |
| 11 distributed under the License is distributed on an "AS IS" BASIS, | |
| 12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| 13 See the License for the specific language governing permissions and | |
| 14 limitations under the License. | |
| 15 | |
| 16 --> | |
| 17 | |
| 18 <!DOCTYPE html> | |
| 19 | |
| 20 <link rel="author" title="Sandy Phan, Sarah Heimlich" | |
| 21 href="mailto:sandyphan@google.com, sarahheimlich@google.com"> | |
| 22 <title>Parallel Animation</title> | |
| 23 <meta name="flags" content="dom"> | |
| 24 <meta name="tutorial" content="Web Animations tutorials"> | |
| 25 <link rel="stylesheet" type="text/css" href="../tutorial-style.css"> | |
| 26 <script type="text/javascript" src="../jquery.js"></script> | |
| 27 <script type="text/javascript" src="../page-load.js"></script> | |
| 28 | |
| 29 <ul class="topMenu"> | |
| 30 <li><a href="../home-page.html">Home</a></li> | |
| 31 <li><a href="#">Tutorials</a> | |
| 32 <ul class="subMenu"> | |
| 33 <li><a href="../basic-animations/basic-animation.html"> | |
| 34 Basic Animations</a></li> | |
| 35 <li><a href="parallel.html">Parallel Animations</a></li> | |
| 36 <li><a href="../sequence/sequence.html">Sequence Animations | |
| 37 </a></li> | |
| 38 <li><a href="../timing-dictionary/timing-dictionary.html"> | |
| 39 Timing Dictionary</a></li> | |
| 40 <li><a href="../timing-functions/timing-function.html"> | |
| 41 Timing Functions</a></li> | |
| 42 </ul> | |
| 43 </li> | |
| 44 <li><a href="../references/references.html">References</a></li> | |
| 45 <li><a href="../about.html">About</a></li> | |
| 46 </ul> | |
| 47 <div id="main"> | |
| 48 | |
| 49 <div id="title">Web Animations Tutorial</div> | |
| 50 | |
| 51 <div class="line-separator"></div> | |
| 52 | |
| 53 <div class="content"> | |
| 54 <p class="description">Web animations is to have a flash or GIF animation | |
| 55 intergrated onto the web page. Normal web animations still require | |
| 56 the use of plugins such as Java Applets, Shockwave, Adobe Flash. In this | |
| 57 tutorial, we will be showing you how to create animations using | |
| 58 javascript without the need of installing plugins.</p> | |
| 59 | |
| 60 <br /> | |
| 61 | |
| 62 <div class="heading subTitle">Parallel Animation Group</div> | |
| 63 | |
| 64 <p class="description">There certainly are times when you want to | |
| 65 group items together such that they have the same features and effects. | |
| 66 There are 2 types of groupings: parallel and sequential. In this | |
| 67 section you will learn about parallel groups and what kind of | |
| 68 feature does it have to help you write less code.</p> | |
| 69 | |
| 70 <p class="description">Just as what the name of the group means, all | |
| 71 the children being grouped in a parallel group will run in parallel, | |
| 72 that is they will start together and of course they will end at | |
| 73 different time depends on their durations.</p> | |
| 74 | |
| 75 <p class="description">The following is the interface for creating | |
| 76 a parallel animation group.</p> | |
| 77 | |
| 78 <code class="codeSamples">new AnimationGroup([children], | |
| 79 {timing/timing dictionary});</code> | |
| 80 | |
| 81 <p class="description note">Note that both children and timing are | |
| 82 nullable (i.e. you can leave children as [] if you don't want to | |
| 83 specify a child). Though only timing is optional</p> | |
| 84 | |
| 85 <div class="separator"></div> | |
| 86 | |
| 87 </div> <!-- content ending div --> | |
| 88 <div class="line-separator"></div> | |
| 89 </div> <!-- main ending div --> | |
| 90 | |
| 91 <ul class="sideMenu"> | |
| 92 <li id="menuLabel">Parallel Animation Group</li> | |
| 93 <li>Basic Info</li> | |
| 94 <li>Exercise 1</li> | |
| 95 <li>Exercise 2</li> | |
| 96 <li>Exercise 3</li> | |
| 97 </ul> | |
| 98 | |
| 99 <div class="separator"></div> | |
| 100 | |
| 101 <script type="text/javascript" src="../try-it-yourself.js"></script> | |
| OLD | NEW |