| <!-- |
| 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> |
| |
| <html> |
| |
| <div class="content"> |
| |
| <div id="animNum">3</div> |
| |
| <div class="heading subTitle">Parallel Animation Group</div> |
| |
| <div class="heading exercises">Exercise 1 - Make a Parallel Group</div> |
| |
| <p class="description">Groupings are important so let's |
| get started on the exercise</p> |
| |
| <p class="description">In this exercise, create a parallel group |
| of animation that has 3 different animations. Each children should run 300px, |
| 500px, 700px from top respectively for 5 seconds.</p> |
| |
| <p class="description">Hint: you should first create the children then |
| include the children into the group. You might also need to create |
| more animation divs in the html section and change their colour |
| depends on your preferences.</p> |
| |
| <div id="hideLabel" onclick="toggleSolution()">Show Solution</div> |
| <div id="toggleText" class="codeSamples"> |
| <code>var A = new Animation(document.querySelector("#a"), |
| {top: "300px"}, 5); <br /> |
| var B = new Animation(document.querySelector("#b"), |
| {top: "500px"}, 5); <br /> |
| var C = new Animation(document.querySelector("#c"), |
| {top: "700px"}, 5); <br /> |
| new AnimationGroup([A, B, C]); |
| </code> |
| </div> |
| |
| <div id="tryIt"></div> |
| |
| <div class="separator"></div> |
| |
| </div> <!-- content ending div --> |
