Giter Site home page Giter Site logo

week7's Introduction

Homework 7 - Farm Party

Have some fun with animations!

Step 1 - Fork this repository.

From the assignment homepage (https://github.com/fewd05082017/week7), click the "Fork" link on the top right. This will create a copy of the assignment in YOUR github account.

Step 2 - Clone your forked repository.

From the repository homepage (which will be http://github.com/YOURUSERNAME/week7), click on green "Clone or Download" button and "Open in Desktop". This should open your Github Desktop App and prompt you to save the week7 folder on your computer.

Step 3 - Build!

Set clouds.gif as the background image. Create a div for the ground/grass with green background and appropriate height - position it at the bottom with position: fixed;;

Create an <h1> and display FARM PARTY!. For a bonus, use a fun custom font (like from Google Fonts).

For each of the characters you want to animate, via javascript:

  • Create an <img> for it on the page.
  • Position it with position: fixed; or position: absolute;
  • Animate it.
  • Do something with it after the animation finishes.

Be creative! Add events / clicks and utilize pageX and pageY. Use easings and callback functions, delays.

Step 4 - Commit and Sync

Work on your website locally and view it in the browser by opening your index.html file. When your site looks good, Commit and Sync with the Github App.

Step 5 - Pull Request

Send a Pull Request to submit your homework. From your week7 page on github.com (https://github.com/YOURUSERNAME/week7), click on the "New Pull Request" button and follow the prompts.

Step 6 - Publish with Gitbot! (optional)

Want to post your week7 project on your github.io url? Log into gitbot and click the week7 repository button and VOILA! It will (perhaps after a few minutes) be viewable online at http://YOURUSERNAME.github.io/week7

week7's People

Contributors

josephjbliss avatar

Watchers

 avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.