Drexel University - Main Building
Drexel University - Westphal College of Media Arts & Design
Drexel University - Lebow College of Business
Microinteractions - IDM241
Final Build - Interaction
Drexel University
Located in Philadelphia, Drexel is known for it’s great co-op program that pushes students to do their best, as well as engineering and technology.
Final Build - Information
Triggers
- Hover over image
- Click gallery button
- Hover over gollary images
- Click image
- Click out of image
- Click X icon
- Click close button
Rules
- Text slides up from bottom of image on hover
- Background image blurs
- Cursor changes to pointer on hover on gallery button
- On gallery button click the button color fades from blue to red, and the button text changes from "Gallery" to "Close"
- 3 images appear in a grid format, fading in over .5 seconds
- Hovering over one of the appeared gallery images changes the cursor to a pointer
- Clicking one of the images causes it to fade in larger in the middle of the screen, appearing as a modal
- 50% black overlay covers entire page, except for enlarged image modal
- Scrolled becomes disabled once modal appears
- Clicking the X icon in the top right corner of the modal, or clicking out of the modal forces the modal to disappear, as well as the black overlay
- Clicking the red "Close" button on the original image forces all 3 of the images to disappear
- Button color fades from red to blue, and "Close" is replaced by "Gallery"
Feedback
- Text slides up from bottom of image on hover
- Background image blurs
- Cursor changes to pointer on hover on gallery button
- On gallery button click the button color fades from blue to red, and the button text changes from "Gallery" to "Close"
- 3 images appear in a grid format, fading in over .5 seconds
- Hovering over one of the appeared gallery images changes the cursor to a pointer
- Clicking one of the images causes it to fade in larger in the middle of the screen, appearing as a modal
- 50% black overlay covers entire page, except for enlarged image modal
- Scrolled becomes disabled once modal appears
- Clicking the X icon in the top right corner of the modal, or clicking out of the modal forces the modal to disappear, as well as the black overlay
- Clicking the red "Close" button on the original image forces all 3 of the images to disappear
- Button color fades from red to blue, and "Close" is replaced by "Gallery"
Loops and Modes
- While hovering over the image, extra information appears to describe the image (mode)
- Upon clicking the gallery button, images fade in to show a pop-up image gallery (mode)
- Clicking one of the images in the gallery opens a modal with extra information and a larger image in the middle of the page (mode)