IDM 241 Assignment 5

Triggers

• Hover over ANY Game Image
• Hover over ANY info button
• Hover over ANY game category tag
• Click on ANY info buttom
• Hover on ANY modal button
• Hover on ANY modal image
• Click on ANY modal X button

Loops & Modes

• Game name, info box, and modal info will change based on database values of the game being hovered on

Rules

INTERACTION 1. The Cursor Hovers In over a game image:

• Hovered image expands by 30%
• Game info textbox fades in towards bottom of hovered image

The Cursor Hovers Out of a Game image

• textbox with game info fades out
• Hovered image reverts back to previous size

INTERACTION 2. The Cursor Hovers In over a info button:

• Hovered button expands by 20%
• Button opacity increases by 25% and color changes to light blue

The Cursor Hovers Out of a info button:

• Hovered button contracts by 20%
• Button opacity decreases by 25% and color changes to white

INTERACTION 3. The Cursor Hovers In over a game category:

• Hovered category expands by 10%
• category opacity increases by 25% and color changes to white

The Cursor Hovers Out of a game category:

• Hovered category contracts by 10%
• Category opacity decreases by 25% and color changes to grey

INTERACTION 4. The Cursor clicks on an info button

• Modal with Game info fades in down from above, with opactiy at 95%

INTERACTION 5. The Cursor hovers on a modal button

• The button's opacity will brighten or dim by 15%
• The cursor will become a pointer

The Cursor hovers off a modal button

• The button's opacity will revert back to its normal state
• The pointer will become a cursor

INTERACTION 6. The Cursor hovers on a the modal image

• The image becomes a gif video

The Cursor hovers off the modal image

• The gif video reverts back to its image

INTERACTION 7. The cursor clicks on a modal X button

• The modal will fade out up
• The pointer will revert back to a cursor
• Game image text boxes fade out and game images revert back to their normal state.

Feedback

When the Cursor Hovers In over a game image:

• Hovered image expands by 30%
• Game info textbox fades in towards bottom of hovered image

When the Cursor Hovers Out of a Game image

• textbox with game info fades out
• Hovered image reverts back to previous size

when the Cursor Hovers In over a info button:

• Hovered button expands by 20%
• Button opacity increases by 25% and color changes to light blue

When the Cursor Hovers Out of a info button:

• Hovered button contracts by 20%
• Button opacity decreases by 25% and color changes to white

When Cursor Hovers In over a game category:

• Hovered category expands by 10%
• category opacity increases by 25% and color changes to white

The Cursor Hovers Out of a game category:

• Hovered category contracts by 10%
• Category opacity decreases by 25% and color changes to grey

When the Cursor clicks on an info button

• Modal with Game info fades in down from above, with opactiy at 95%

When the Cursor hovers on a modal button

• The button's opacity will brighten or dim by 15%
• The cursor will become a pointer

When the Cursor hovers off a modal button

• The button's opacity will revert back to its normal state
• The pointer will become a cursor

When the Cursor hovers on a modal image

• The image becomes a gif video

When the Cursor hovers off a modal image

• The gif video reverts back to its image

When the cursor clicks on a modal X button

• The modal will fade out up
• The pointer will revert back to a cursor
• Game image text boxes fade out and game images revert back to their normal state.