Index: pkg/polymer/lib/elements/web-animations-js/tutorial/parallel/parallel.html |
diff --git a/pkg/polymer/lib/elements/web-animations-js/tutorial/parallel/parallel.html b/pkg/polymer/lib/elements/web-animations-js/tutorial/parallel/parallel.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..5abb0adcd7bf6c286d76cb12f9ceb193681a1416 |
--- /dev/null |
+++ b/pkg/polymer/lib/elements/web-animations-js/tutorial/parallel/parallel.html |
@@ -0,0 +1,101 @@ |
+<!-- |
+Copyright 2013 Google Inc. All Rights Reserved. |
+ |
+Licensed under the Apache License, Version 2.0 (the "License"); |
+you may not use this file except in compliance with the License. |
+You may obtain a copy of the License at |
+ |
+ http://www.apache.org/licenses/LICENSE-2.0 |
+ |
+Unless required by applicable law or agreed to in writing, software |
+distributed under the License is distributed on an "AS IS" BASIS, |
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
+See the License for the specific language governing permissions and |
+limitations under the License. |
+ |
+--> |
+ |
+<!DOCTYPE html> |
+ |
+<link rel="author" title="Sandy Phan, Sarah Heimlich", |
+ href="mailto:sandyphan@google.com, sarahheimlich@google.com"> |
+<title>Parallel Animation</title> |
+<meta name="flags" content="dom"> |
+<meta name="tutorial" content="Web Animations tutorials"> |
+<link rel="stylesheet" type="text/css" href="../tutorial-style.css"> |
+<script type="text/javascript" src="../jquery.js"></script> |
+<script type="text/javascript" src="../page-load.js"></script> |
+ |
+<ul class="topMenu"> |
+ <li><a href="../home-page.html">Home</a></li> |
+ <li><a href="#">Tutorials</a> |
+ <ul class="subMenu"> |
+ <li><a href="../basic-animations/basic-animation.html"> |
+ Basic Animations</a></li> |
+ <li><a href="parallel.html">Parallel Animations</a></li> |
+ <li><a href="../sequence/sequence.html">Sequence Animations |
+ </a></li> |
+ <li><a href="../timing-dictionary/timing-dictionary.html"> |
+ Timing Dictionary</a></li> |
+ <li><a href="../timing-functions/timing-function.html"> |
+ Timing Functions</a></li> |
+ </ul> |
+ </li> |
+ <li><a href="../references/references.html">References</a></li> |
+ <li><a href="../about.html">About</a></li> |
+</ul> |
+<div id="main"> |
+ |
+ <div id="title">Web Animations Tutorial</div> |
+ |
+ <div class="line-separator"></div> |
+ |
+ <div class="content"> |
+ <p class="description">Web animations is to have a flash or GIF animation |
+ intergrated onto the web page. Normal web animations still require |
+ the use of plugins such as Java Applets, Shockwave, Adobe Flash. In this |
+ tutorial, we will be showing you how to create animations using |
+ javascript without the need of installing plugins.</p> |
+ |
+ <br /> |
+ |
+ <div class="heading subTitle">Parallel Animation Group</div> |
+ |
+ <p class="description">There certainly are times when you want to |
+ group items together such that they have the same features and effects. |
+ There are 2 types of groupings: parallel and sequential. In this |
+ section you will learn about parallel groups and what kind of |
+ feature does it have to help you write less code.</p> |
+ |
+ <p class="description">Just as what the name of the group means, all |
+ the children being grouped in a parallel group will run in parallel, |
+ that is they will start together and of course they will end at |
+ different time depends on their durations.</p> |
+ |
+ <p class="description">The following is the interface for creating |
+ a parallel animation group.</p> |
+ |
+ <code class="codeSamples">new ParGroup([children], |
+ {timing/timing dictionary});</code> |
+ |
+ <p class="description note">Note that both children and timing are |
+ nullable (i.e. you can leave children as [] if you don't want to |
+ specify a child). Though only timing is optional</p> |
+ |
+ <div class="separator"></div> |
+ |
+ </div> <!-- content ending div --> |
+ <div class="line-separator"></div> |
+</div> <!-- main ending div --> |
+ |
+<ul class="sideMenu"> |
+ <li id="menuLabel">Parallel Animation Group</li> |
+ <li>Basic Info</li> |
+ <li>Exercise 1</li> |
+ <li>Exercise 2</li> |
+ <li>Exercise 3</li> |
+</ul> |
+ |
+<div class="separator"></div> |
+ |
+<script type="text/javascript" src="../try-it-yourself.js"></script> |