You do not have permission to edit this page, for the following reason:
Free text:
== Week 4 topics - Some cool CSS == This week you will learn how to create animations with JavaScript libraries. === Monday lesson === * [[CSS animations tutorial|CSS animations]] (again) * Using [[JavaScript libraries]] (principles) * Creating animations with [http://anijs.github.io/ 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 <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 * http://codepen.io/darielnoel/pen/trnzk {| class="wikitable" border="1" |- ! Element ! Purpose ! Examples ! HTML Example |- ! <code>if</code> | defines an event | Any standard user action event, for exemple: click, mouseover, focus, scroll | If user clicks on footer element, then header will swing. <source lang="HTML5"><header data-anijs="if: click, on: footer, do: swing"> </source> |- ! <code>On</code> | defines the owner with a CSS selector. If "on" is missing then it is the current element. | header, #my, .things | |- ! <code>Do </code> | Define an action. You either can define your own CSS classes, or take the [http://daneden.github.io/animate.css/ 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). | <nowiki><div id="main" data-anijs="if: mouseover, do: zoomIn animated"> Now let's see. </div></nowiki> |- ! <code>To</code> | Similar as "On", this defines the elements affected by the response action or animation. You can use a CSS selector. | | |} 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/}} * Click on squares at the bottom of the page. * Look at: {{goblock|https://daneden.github.io/animate.css/}} ==== Example ==== This example shows how to add your own custom CSS code. * https://codepen.io/danielkschneider/pen/yKGeLG <source lang="HTML5"> <!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> </source> CSS: <source lang="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; } </source> ==== Hands on ==== Do the following please: # Download the either the {{goblock|[https://github.com/anijs/anijs/archive/master.zip full distribution] of AniJS}} or the [http://codepen.io/darielnoel/share/zip/trnzk/ 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: [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) # 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: <source lang="HTML5"> <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> </source> CSS file: <source lang="CSS"> 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; } </source> '''Important resources''' * [https://github.com/anijs/anijs/wiki AniJS wiki!] * [https://github.com/anijs/anijs/wiki/Sentence-Definitions AniJS sentence definitions] * [http://anicollection.github.io/ 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 tutorial|CSS animations tutorials]] (this wiki) * [[CSS tutorial]] (this wiki, made in 2011). Includes positioning and boxing tutorials. * AniJS: ** [https://github.com/anijs/anijs/archive/master.zip full distribution] ** [https://github.com/anijs/anijs/wiki AniJS wiki!] ** [https://github.com/anijs/anijs/wiki/Sentence-Definitions AniJS sentence definitions] ** [http://anicollection.github.io/ aniCollection]. A web site with CSS animations that you could copy/paste. * [http://daneden.github.io/animate.css/ Animate.css library] * [http://anicollection.github.io/#/ anicollection]
Save page Show preview Show changes Cancel