COAP:COAP-3000/week4: Difference between revisions

Latest revision as of 09:32, 11 April 2018

COAP:COAP-3000
◀▬▬▶
⚐	☸
⚒ 2018/04/11
Objectives
install JavaScript libraries use JavaScript libraries create animations with AniJs create animations with Greensocks

Objectives

install JavaScript libraries
use JavaScript libraries
create animations with AniJs
create animations with Greensocks

Week 4 topics - Some cool CSS

This week you will learn how to create animations with JavaScript libraries.

Monday lesson

CSS animations (again)
Using JavaScript libraries (principles)
Creating animations with AniJs

Introduction to AniJS

AniJS is an animation and interaction library. Animations are specified through html data- attributes using a simple language outlined just below.

AniJS language

AniJS uses the HTML data- 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

http://codepen.io/darielnoel/pen/trnzk

Element	Purpose	Examples	HTML Example
`if`	defines an event	Any standard user action event, for exemple: click, mouseover, focus, scroll	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 library. You furthermore can clone or remove HTML and add/remove CSS classes.	In animate.css: bounce, flash, pulse, rubberBand, shake, swing, tada, wobble, jello, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp, fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig, flip, flipInX, flipInY, flipOutX, flipOutY, lightSpeedIn, lightSpeedOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, slideInUp, slideInDown, slideInLeft, slideInRight, slideOutUp, slideOutDown, slideOutLeft, slideOutRight, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp, hinge, jackInTheBox, rollIn, rollOut. Important: Also add the animated class (or similar, see the CSS example below).	<div id="main" data-anijs="if: mouseover, do: zoomIn animated"> Now let's see. </div>
`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
http://anijs.github.io/
Click on squares at the bottom of the page.
Look at:
https://daneden.github.io/animate.css/

Example

This example shows how to add your own custom CSS code.

https://codepen.io/danielkschneider/pen/yKGeLG

<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8">
    <title>An AniJS thing</title>
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <!--Simple sentence - define in Custom CSS -->
    <header data-anijs="if: click, do: myPulse animated">
      header (Click here)
    </header>
    <div id="main" data-anijs="if: mouseover, do: zoomIn animated">
      Main (MouseOver)
      <p id="hi">Hello, you</p>
    </div>
    <footer data-anijs="if:click, do: fadeInLeft animated, to: #main">
      footer (Click here)
    </footer>
    <!-- AniJS core library -->

    <script src="https://anijs.github.io/lib/anijs/anijs-min.js"></script>
    <!-- Include to use $addClass, $toggleClass or $removeClass -->
    <script src="https://anijs.github.io/lib/anijs/helpers/dom/anijs-helper-dom-min.js"></script>
  </body>
</html>

CSS:

body: {
  font-size: 150%;
}
header {
  height: 45px;
  width: 100%;
  background-color: #2d3e50;
  color: white;
  font-size: 150%;
  margin-bottom: 10px;
}

#main {
  width: 100%;
  height: 200px;
  background: #1f8dd6;
  color: white;
  font-size: 150%;
}

footer {
  margin-top: 10px;
  height: 40px;
  background-color: #2d3e50;
  color: white;
  font-size: 150%;
}

/*animation code*/
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.animated.infinite {
  animation-iteration-count: infinite;
}
.animated.hinge {
  animation-duration: 2s;
}
/*the animation definition*/
@keyframes myPulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    -ms-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.myPulse {
  animation-name: myPulse;
}

Hands on

Do the following please:

Download the either the
full distribution of AniJS
or the QuickStartTemplate which will use online libraries (less recommended)
Create a new directory
Unzip the files within the new directory. Now clean it up:
- Remove all the files except the dist directory
- Rename the dist directory to js
- Create a CSS directory
Get the following CSS: animate.css library. Save the CSS (right-click and "save as") in the CSS directory of the AniJS directory)
Create an index.html file
Add the animate.css file
add your own HTML elements
Make these appear in various ways when the user mouses over the main section

We suggesting starting from the following template:

<head>
    <!-- AniCollection.css library -->
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/my.css">
</head>

<body>
    <header data-anijs="if: click, do: flipInY animated">
        header
    </header>
    <nav data-anijs="if: scroll, on: window, do: swing animated, to: footer">
        nav
    </nav>
    <div id="main" data-anijs="if: mouseover, on: body, do: swing animated">
        if: load, on: window, do: swing animated
    </div>
    <div id="main2" data-anijs="if: mouseover, on: body, do: fadeInLeft animated">
        if: load, on: window, do: fadeInLeft animated
    </div>
    <footer>
        footer
    </footer>
    <script src="js/anijs-min.js"></script>
</body>

CSS file:

body: {
  font-size: 150%;
}
header {
  height: 45px;
  width: 100%;
  background-color: #2d3e50;
  color: white;
  font-size: 150%;
  margin-bottom: 10px;
}

#main {
  width: 200px;
  height: 200px;
  background: #1f8dd6;
  color: white;
  font-size: 150%;
}
#main2 {
  width: 200px;
  height: 200px;
  background: #1f8dd6;
  color: white;
  font-size: 150%;
}

footer {
  margin-top: 10px;
  height: 40px;
  background-color: #2d3e50;
  color: white;
  font-size: 150%;
}

/*animation code*/
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.animated.infinite {
  animation-iteration-count: infinite;
}

Important resources

AniJS wiki!
AniJS sentence definitions
aniCollection. A web site with CSS animations that you could copy/paste.

Wednesday lesson

See Monday lesson.

Project 4

Task

(1) Create an HTML page that includes at least four CSS animations "programmed" with AniJS

Requirements:

Animate at least four objects
The HTML page should include all elements that required to understand what the animation is about (see usable and useful below)

A useful, usable and attractive page will get a better grade. "Useful" means that a defined target population will likely appreciate this page. "Usable" means that a typical user will figure out how to use the page and its controls. "Attractive" means that a typical user likes the visual aspects.

(2) Create a report as screen cast (Alternatively write a written report of 400 to 500 words plus screen captures)

The report should include objectives (what is it's purpose ? audience ?) of the video, a short discussion of your design and an auto-evaluation. You also can mention how you did it, problems encountered. etc. Make sure to keep down the file size.
Max. length of the screen cast= 2 minutes. Make sure to "dive in" directly. Do not waste time on less important stuff, e.g. your personal motivations, prior experience, etc.

Submission

Upload to the World classroom (Canevas):

A zip file for the HTML,CSS,video,JavaScript, etc. (must be functional after dezipping)
A report as screen cast file or written report.

Tip: Unzip the file somewhere in your own computer and test if it works (e.g. some files may be missing and the presentation will fail)

Due:

Wednesday week 5, before class

Tips

Make sure to include both the AniJS and a CSS animation library (unless you plan to create your own animations)
Double check file location and spelling.
Open a JavaScript console (F12 on either Firefox or Chrome) if something goes wrong.

Evaluation

Contents: Does the HTML page together its animations make an interesting "point" ?
Technical elements: Correct use of CSS, HTML (and JS code if needed)
Original work.
Quality of the visual design: Is the page visually appealing ?
Report: Does the report state the objectives, shortly present the design, include an auto-evaluation
In time: Was the project turned in before wed, week 4, 9h ?

Mid term

Week 5, Wednesday

Topic:

CSS animation (only!).
Likely, you will have to complete CSS code.

Preparation

Find all animation attributes (find a good tutorial, follow the links in the CSS animation tutorial
Study some examples
Do homework project 4

Links

CSS animations tutorials (this wiki)
CSS tutorial (this wiki, made in 2011). Includes positioning and boxing tutorials.
AniJS:
- full distribution
- AniJS wiki!
- AniJS sentence definitions
- aniCollection. A web site with CSS animations that you could copy/paste.
Animate.css library
anicollection