| 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>
|
|
|