Describes the Inktober event, displays a daily prompt for artists to use, and displays an updating feed of art submitted via instagram hashtag #inktober.
| Behavior | Input | Output |
|---|---|---|
| It will display informaiton about inktober | NA | NA |
| It will display images of artwork from selected artists | NA | NA |
| It will link to relevant inktober site and feeds | NA | NA |
| It will display artist name under image | user hovers over image | Drawing by... |
| It will show images gathered from instagram using the inktober feed | ||
| It will contain a table of contents for navigating sections of the page | user clicks on rules | user is taken to rules section |
| It will have a sticky button that will take you back to the top of the page | user click button | taken back to top |
| It will have a tracked pen image that moves along as user scrolls through the page | user scrolls down | pen moves right to left |
| It will display the current date along with the prompt of the day based on that date | Today's Date | Prompt |
| It will animate all the listed prompts up until the current date as the user scrolls through the page | Day 1, 2, 3.. | Swift, Divided, Poison |
| It will animate ink spots on the page as the user scrolls down the page | user scrolls | ink spots fade in |
| It will animate an ink spill on the footer once the user has reached the bottom of the page | user reaches bottom | ink animation fades in |
- Clone inktober-storyboard project from Github.
- Open index.html in your preferred browser to view the page and checkout the working funtionality and design.
- Open index.html, styles.css, and scripts.js in your preferred text editor to view the code.
- N/A
- HTML
- CSS
- Bootstrap
- Javascript
- JQuery
- Juicer plugin https://www.juicer.io/
- Animate CSS https://github.com/daneden/animate.css
This software is licensed under the MIT license.
Copyright (c) 2017 Kyle Ebersole, Emily Wells-Jimenez, Kimberly Bordon, Valia Dempsey, Brandon Kudo