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 <html> | |
21 | |
22 <div class="content"> | |
23 | |
24 <div id="animNum">3</div> | |
25 | |
26 <div class="heading subTitle">Parallel Animation Group</div> | |
27 | |
28 <div class="heading exercises">Exercise 1 - Make a Parallel Group</div> | |
29 | |
30 <p class="description">Groupings are important so let's | |
31 get started on the exercise</p> | |
32 | |
33 <p class="description">In this exercise, create a parallel group | |
34 of animation that has 3 different animations. Each children should run 300px, | |
35 500px, 700px from top respectively for 5 seconds.</p> | |
36 | |
37 <p class="description">Hint: you should first create the children then | |
38 include the children into the group. You might also need to create | |
39 more animation divs in the html section and change their colour | |
40 depends on your preferences.</p> | |
41 | |
42 <div id="hideLabel" onclick="toggleSolution()">Show Solution</div> | |
43 <div id="toggleText" class="codeSamples"> | |
44 <code>var A = new Animation(document.querySelector("#a"), | |
45 {top: "300px"}, 5); <br /> | |
46 var B = new Animation(document.querySelector("#b"), | |
47 {top: "500px"}, 5); <br /> | |
48 var C = new Animation(document.querySelector("#c"), | |
49 {top: "700px"}, 5); <br /> | |
50 new AnimationGroup([A, B, C]); | |
51 </code> | |
52 </div> | |
53 | |
54 <div id="tryIt"></div> | |
55 | |
56 <div class="separator"></div> | |
57 | |
58 </div> <!-- content ending div --> | |
OLD | NEW |