Skip to content

Text wraps all files, updated codes in page-load.js according to the changes made in try-it-yourself.js #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sandyphan wants to merge 20 commits into
base: master
Choose a base branch
from
Open

Text wraps all files, updated codes in page-load.js according to the changes made in try-it-yourself.js #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
aa719d8
removed unnecessary contents, fixed links due to renaming, word wrapp…
zx-zx Feb 8, 2013
4cbdd43
renamed pageLoad.js to page-load.js and modified loadContent function…
sandyphan Feb 10, 2013
8a05582
word wrapped contents into 80 chars, fixed indentations
sandyphan Feb 10, 2013
3e529cf
moved files into correct directory
zx-zx Feb 10, 2013
8bf6e63
added more checkpoint tests for sequence exercise
zx-zx Feb 10, 2013
3061336
removed unused try-it-yourself.js from certain pages, fixed css link
zx-zx Feb 11, 2013
815aa71
edit some contents such that animation divs now display
zx-zx Feb 11, 2013
1351e89
updated page-load.js with updated version from code review
sandyphan Feb 11, 2013
e2359fe
made items in references to load dynamically as well
zx-zx Feb 11, 2013
713fb29
making an invisible div to state how many animation divs will there b…
zx-zx Feb 11, 2013
5c4f487
put properties of new Animation() into a table
zx-zx Feb 11, 2013
105268d
clean up of codes
sandyphan Feb 11, 2013
1a65f4d
made side bar menu smaller in size to fit better in chromebook
sandyphan Feb 11, 2013
2a9d333
fixed link to css style
zx-zx Feb 11, 2013
ee31754
fixed indentations and consistency with quotations
zx-zx Feb 11, 2013
a8eb78f
changes from Steph
zx-zx Feb 11, 2013
d5ecdfc
Merge remote-tracking branch 'upstream/master'
sandyphan Feb 11, 2013
34cc2bd
merge from steph
zx-zx Feb 12, 2013
6508785
Merge remote-tracking branch 'upstream/master'
sandyphan Feb 12, 2013
25a9981
Merge remote-tracking branch 'upstream/master'
sandyphan Feb 13, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 animation-test-style.css → tests/animation-test-style.css
View file
Open in desktop
File renamed without changes.
0 extra-asserts.js → tests/extra-asserts.js
View file
Open in desktop
File renamed without changes.
66 changes: 31 additions & 35 deletions tutorial/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,39 +16,35 @@
-->

<!DOCTYPE html>
<html>
<head>
<link rel="author" title="Sandy Phan, Sarah Heimlich", href="mailto:sandyphan@google.com, sarahheimlich@google.com">
<title>About</title>
<meta name="flags" content="dom">
<meta name="tutorial" content="Web Animations tutorials">
<link rel="stylesheet" type="text/css" href="tutorialStyle.css">
</head>
<body>
<ul class="topMenu">
<li><a href="homePage.html">Home</a></li>
<li><a href="#">Tutorials</a>
<ul class="subMenu">
<li><a href="basicAnimations/basicAnim.html">Basic Animations</a></li>
<li><a href="parallel/parallel.html">Parallel Animations</a></li>
<li><a href="sequence/sequence.html">Sequence Animations</a></li>
<li><a href="timing-dictionary/timeDict.html">Timing Dictionary</a></li>
<li><a href="timing-functions/timeFunc.html">Timing Functions</a></li>
</ul>
</li>
<li><a href="references/references.html">References</a></li>
<li><a href="about.html">About</a></li>

<link rel="author" title="Sandy Phan, Sarah Heimlich", href="mailto:sandyphan@google.com, sarahheimlich@google.com">
<title>About</title>
<meta name="flags" content="dom">
<meta name="tutorial" content="Web Animations tutorials">
<link rel="stylesheet" type="text/css" href="tutorial-style.css">

<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/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>
<div id="main">
<div id="title">Web Animations Tutorial</div>

<div class="line-separator"></div>

<div class="content">
<p class="description">This site was created by Sarah Heimlich, Steph McArthur and Sandy Phan</p>
<p class="description">All information in this site were extracted from <a href="https://dvcs.w3.org/hg/FXTF/raw-file/tip/web-anim/index.html" target="_blank"><u>Web Animation Specs</u></a></p>.
</div>
<div class="line-separator"></div>
</div>
</body>
</html>
</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">This site was created by Sarah Heimlich, Steph McArthur and Sandy Phan</p>
<p class="description">All information in this site were extracted from <a href="https://dvcs.w3.org/hg/FXTF/raw-file/tip/web-anim/index.html" target="_blank"><u>Web Animation Specs</u></a></p>.
</div>
<div class="line-separator"></div>
</div>
16 changes: 10 additions & 6 deletions tutorial/basic-animations/basic-animation-exercise-1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@

<div class="content">

<div id="animNum">1</div>

<div class="heading subTitle">Create a new basic animation</div>

<div class="heading exercises">Exercise 1 - Moving Right</div>
Expand All @@ -34,25 +36,27 @@
"300px"}, 2);</code>

<div id="hideLabel" onclick="toggleSolution()">Show Solution</div>
<div <id="toggleText" class="codeSamples">
<div id="toggleText" class="codeSamples">
<code>new Animation(document.querySelector("#a"), {left: "300px"}, 2);</code>
</div>

<div id="tryIt"></div>

<ol class="description">
<li><code>'new Animation()'</code> creates a new animation object.</li>
<li><code>'document.querySelector("#a")'</code> is a DOM method which
<li>
<code>'document.querySelector("#a")'</code> is a DOM method which
gets the element with id equals to 'a' from the HTML file. You
can always use <code>'document.getElementById("a")'</code> which
would result the same thing. Since we have defined its class
name as well, we can also select it using
<code>'document.querySelector(".test")'.</code></li>
<code>'document.querySelector(".test")'.</code>
</li>
<li><code>'{left: "300px"}'</code> is the effects of the animation.
In this case we are letting it move to 300px from left.</li>
In this case we are letting it move to 300px from left.</li>
<li><code>'2'</code> will set the duration of the animation to
2 seconds. The bigger the number, the slower the animation
speed and vice versa.</li>
2 seconds. The bigger the number, the slower the animation
speed and vice versa.</li>
</ol>

</div> <!-- content ending div -->
2 changes: 2 additions & 0 deletions tutorial/basic-animations/basic-animation-exercise-2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@

<div class="content">

<div id="animNum">1</div>

<div class="heading subTitle">Create a new basic animation</div>

<div class="heading exercises">Exercise 2 - Moving Down</div>
Expand Down
2 changes: 2 additions & 0 deletions tutorial/basic-animations/basic-animation-exercise-3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@

<div class="content">

<div id="animNum">1</div>

<div class="heading subTitle">Create a new basic animation</div>

<div class="heading exercises">Exercise 3 - Moving Diagonally</div>
Expand Down
2 changes: 2 additions & 0 deletions tutorial/basic-animations/basic-animation-exercise-4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@

<div class="content">

<div id="animNum">1</div>

<div class="heading subTitle">Create a new basic animation</div>

<div class="heading exercises">Exercise 4 - Moving in rectangle
Expand Down
2 changes: 2 additions & 0 deletions tutorial/basic-animations/basic-animation-exercise-5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@

<div class="content">

<div id="animNum">1</div>

<div class="heading subTitle">Create a new basic animation</div>

<div class="heading exercises">Exercise 5 - Changing Colours</div>
Expand Down
65 changes: 33 additions & 32 deletions tutorial/basic-animations/basic-animation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,14 @@
<title>Create Basic Animation</title>
<meta name="flags" content="dom">
<meta name="tutorial" content="Web Animations tutorials">
<link rel="stylesheet" type="text/css" href="../tutorialStyle.css">
<link rel="stylesheet" type="text/css" href="../tutorial-style.css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../loadXMLDoc.js"></script>
<script type="text/javascript" src="../pageLoad.js"></script>
<script type="text/javascript" src="../page-load.js"></script>



<ul class="topMenu">
<li><a href="../homePage.html">Home</a></li>
<li><a href="../home-page.html">Home</a></li>
<li><a href="#">Tutorials</a>
<ul class="subMenu">
<li><a href="basic-animation.html">Basic Animations</a></li>
Expand Down Expand Up @@ -59,45 +58,47 @@
<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>
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">Create a new basic animation</div>

<p class="description">To create animations on objects such
as moving left, right, up, down, change colours, etc, use
the following interface:</p>
as moving left, right, up, down, change colours, etc, use
the following interface:</p>

<code class="codeSamples">new Animation(element,
{effect(s)}, {optional: timed items});</code>
{effect(s)}, {optional: timed items});</code>

<ul>
<li><p class="description">'new Animation' creates an animation object,
'element' is the DOM object or animation target that we want to
animate and it is a compulsory component and can be nullable.
For instance, 'element' can be a 'div' with, a 'p' (paragraph).</p>
</li>

<li><p class="description">'effects' defines the types of effects
in animation such as move left, or right, or change colours, or
change opacity, etc. 'effects' is also a compulsory component as
well as nullable. This parameter can be of AnimationEffect object
or CustomAnimationEffect object. These effects will be shared with
any other animation objects referring to the same AnimationEffect
or CustomAnimationEffect object. In the case this component being
null, the animation will have a null effect.</p></li>
<li><p class="description">'new Animation' creates an animation object,
'element' is the DOM object or animation target that we want to
animate and it is a compulsory component and can be nullable.
For instance, 'element' can be a 'div' with, a 'p' (paragraph).</p>
</li>

<li><p class="description">'effects' defines the types of effects
in animation such as move left, or right, or change colours, or
change opacity, etc. 'effects' is also a compulsory component as
well as nullable. This parameter can be of AnimationEffect object
or CustomAnimationEffect object. These effects will be shared with
any other animation objects referring to the same AnimationEffect
or CustomAnimationEffect object. In the case this component being
null, the animation will have a null effect.</p>
</li>

<li><p class="description">'timed items' can be of type double or
timing dictionary and is nullable and optional component. When
this parameter is double, then it specifies the duartion of a
single iteration of the animation. If it is null, then the default
value for iteration duration would be zero is specified in the
Timing Dictionary.</p></li>
timing dictionary and is nullable and optional component. When
this parameter is double, then it specifies the duartion of a
single iteration of the animation. If it is null, then the default
value for iteration duration would be zero is specified in the
Timing Dictionary.</p>
</li>

</ul>

Expand All @@ -116,4 +117,4 @@
<li>Exercise 5</li>
</ul>

<script type="text/javascript" src="../tryItYourself.js"></script>
<script type="text/javascript" src="../try-it-yourself.js"></script>
97 changes: 55 additions & 42 deletions tutorial/home-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,46 +16,59 @@
-->

<!DOCTYPE html>
<html>
<head>
<link rel="author" title="Sandy Phan, Sarah Heimlich", href="mailto:sandyphan@google.com, sarahheimlich@google.com">
<title>Web Animations Tutorial</title>
<meta name="flags" content="dom">
<meta name="tutorial" content="Web Animations tutorials">
<link rel="stylesheet" type="text/css" href="tutorialStyle.css">
</head>
<body>
<ul class="topMenu">
<li><a href="homePage.html">Home</a></li>
<li><a href="#">Tutorials</a>
<ul class="subMenu">
<li><a href="basicAnimations/basicAnim.html">Basic Animations</a></li>
<li><a href="parallel/parallel.html">Parallel Animations</a></li>
<li><a href="sequence/sequence.html">Sequence Animations</a></li>
<li><a href="timing-dictionary/timeDict.html">Timing Dictionary</a></li>
<li><a href="timing-functions/timeFunc.html">Timing Functions</a></li>
</ul>
</li>
<li><a href="references/references.html">References</a></li>
<li><a href="about.html">About</a></li>

<link rel="author" title="Sandy Phan, Sarah Heimlich",
href="mailto:sandyphan@google.com, sarahheimlich@google.com">
<title>Web Animations Tutorial</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/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">This site has the following tutorials:</p>
<ul class="description">
<a href="basic-animations/basic-animation.html">
<li>Create basic animation</li>
</a>
<a href="parallel/parallel.html"><li>Parallel animation groups</li></a>
<a href="sequence/sequence.html"><li>Sequential animation groups</li></a>
<a href="timing-dictionary/timing-dictionary.html">
<li>Adding timing dictionary</li>
</a>
<a href="timing-functions/timing-function.html">
<li>Adding timing functions</li>
</a>
</ul>
<div id="main">
<div id="title">Web Animations Tutorial</div>

<div class="line-separator"></div>

<div class="content">
<p class="description">This site has the following tutorials:</p>
<ul class="description">
<a href="basicAnimations/basicAnim.html"><li>Create basic animation</li></a>
<a href="parallel/parallel.html"><li>Parallel animation groups</li></a>
<a href="sequence/sequence.html"><li>Sequential animation groups</li></a>
<a href="timing-dictionary/timeDict.html"><li>Adding timing dictionary</li></a>
<a href="timing-functions/timeFunc.html"><li>Adding timing functions</li></a>
</ul>
<iframe class="demos" src="../../web-animations-js/test-harness.html">Your browser does not support iframes</iframe>
</div> <!-- content div ending -->
<div class="line-separator"></div>
</div> <!-- main div ending -->
</body>
</html>
<iframe class="demos" src="../../web-animations-js/test-harness.html">
Your browser does not support iframes
</iframe>
</div> <!-- content div ending -->
<div class="line-separator"></div>
</div> <!-- main div ending -->
5 changes: 5 additions & 0 deletions tutorial/iframe-contents.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,12 @@
<script src='tutorial-testing.js'></script>
<script src='../../web-animations-js/web-animation.js'></script>
<script src='try-it-yourself.js'></script>
<<<<<<< HEAD
<script src='../tests/extra-asserts.js'></script>
<link href='../tests/animation-test-style.css'>
=======
<script src='../extra-asserts.js'></script>
<link href='../test/animation-test-style.css'>
>>>>>>> upstream/master
</body>
</html>
Loading