COAP:COAP-3000/week4: Difference between revisions
Jump to navigation
Jump to search
m (→Monday lesson) |
m (→Monday lesson) |
||
| Line 18: | Line 18: | ||
* Using [[JavaScript libraries]] (principles) | * Using [[JavaScript libraries]] (principles) | ||
* Creating animations with [http://anijs.github.io/ AniJs] | * Creating animations with [http://anijs.github.io/ AniJs] | ||
==== Introduction to AniJS ==== | |||
'''AniJS language''' | '''AniJS language''' | ||
| Line 26: | Line 28: | ||
'''If:''' ''Event(click, scroll, mouseover and more)'' , '''On:''' ''Html element (css selector)'' , '''Do:''' ''Actions or Animations (Rotate animation)'' , '''To:''' ''Html element to modify'' | '''If:''' ''Event(click, scroll, mouseover and more)'' , '''On:''' ''Html element (css selector)'' , '''Do:''' ''Actions or Animations (Rotate animation)'' , '''To:''' ''Html element to modify'' | ||
Example on code pen | |||
* http://codepen.io/darielnoel/pen/trnzk | |||
{| class="wikitable" border="1" | {| class="wikitable" border="1" | ||
| Line 54: | Line 59: | ||
| | | | ||
|} | |} | ||
In addition, <code>Before</code>, <code>After | In addition, <code>Before</code>, <code>After</code> and <code>Helper</code> can be used. See [https://github.com/anijs/anijs/wiki/Sentence-Definitions Sentence Definitions] | ||
* Go to {{goblock|http://anijs.github.io/}} | * Go to {{goblock|http://anijs.github.io/}} | ||
| Line 60: | Line 65: | ||
* Look at: {{goblock|https://daneden.github.io/animate.css/}} | * Look at: {{goblock|https://daneden.github.io/animate.css/}} | ||
==== Hands on ==== | |||
Do the following and do not miss a step: | |||
* Download {{goblock|[http://codepen.io/darielnoel/share/zip/trnzk/ QuickStartTemplate]. This template will link to an online library. If you plan to work without Internet connection, take the [https://github.com/anijs/anijs/archive/master.zip full distribution] | |||
* Create a new directory | |||
* Unzip the files within the new directory. | |||
* Goto {{[http://daneden.github.io/animate.css/ animate.css library]. Save the CSS (right-click and "save as") in the CSS directory of the AniJS directory) | |||
* Open the index.html file. Add the animate.css library. | |||
'''Important resources''' | '''Important resources''' | ||
* [https://github.com/anijs/anijs/wiki AniJS wiki!] | |||
* [https://github.com/anijs/anijs/wiki/Sentence-Definitions AniJS sentence definitions] | * [https://github.com/anijs/anijs/wiki/Sentence-Definitions AniJS sentence definitions] | ||
Revision as of 19:56, 8 April 2018
Week 3 topics - Some cool CSS
This week you will learn how to create animations with JavaScript libraries.
Monday lesson
- Using JavaScript libraries (principles)
- Creating animations with AniJs
Introduction to AniJS
AniJS language
AniJS uses the HTML <code>data-</code> attribute to define a simple language to create interface elements and animations.
You can compose sentences with the following logic:
If: Event(click, scroll, mouseover and more) , On: Html element (css selector) , Do: Actions or Animations (Rotate animation) , To: Html element to modify
Example on code pen
| Element | Purpose | Examples | HTML Example |
|---|---|---|---|
if
|
defines an event | click, | If user clicks on footer element, then header will swing. <header data-anijs="if: click, on: footer, do: swing">
|
On
|
defines the owner with a CSS selector. If "on" is missing then it is the current element. | header, #my, .things | |
Do
|
Define an action. You either can define your own CSS classes, or take the Animate.css Youlibrary. You furthermore can clone or remove HTML and add/remove CSS classes.] | ||
To
|
Similar as "On", this defines the elements affected by the response action or animation. You can use a CSS selector. |
In addition, Before, After and Helper can be used. See Sentence Definitions
- Go to
- Click on squares at the bottom of the page.
- Look at:
Hands on
Do the following and do not miss a step:
- Download {{goblock|QuickStartTemplate. This template will link to an online library. If you plan to work without Internet connection, take the full distribution
- Create a new directory
- Unzip the files within the new directory.
- Goto {{animate.css library. Save the CSS (right-click and "save as") in the CSS directory of the AniJS directory)
- Open the index.html file. Add the animate.css library.
Important resources
Wednesday lesson
(TBA, probably use of the Greensocks library)