COAP:COAP-3000/week4

The educational technology and digital learning wiki
Jump to navigation Jump to search
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

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

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

Example

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

<!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:

  1. Download the either the
    full distribution of AniJS
    or the QuickStartTemplate which will use online libraries (less recommended)
  2. Create a new directory
  3. 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
  4. Get the following CSS: animate.css library. Save the CSS (right-click and "save as") in the CSS directory of the AniJS directory)
  5. Create an index.html file
  6. Add the animate.css file
  7. add your own HTML elements
  8. 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">
</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

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 ?

Links

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3000/week4&oldid=67478"