Hover Interactions & Complex Grids
2 Separate Hover Interactions on Home Page
Page Transitions & Scroll Effects
Page Transitions which add a bit of flare to the site. The Page Names are also clearly displayed during the transition. Both elements improve the overall User Experience (UX).
Scroll Effects - Sticky Position - When a piece of content is held in it's place on the screen, while new content is introduced as the user continues to scroll down the page.
Scroll Effects - Reveal Effect - Content is revealed as the user scrolls down and subsequently covered up as the user scrolls up the page.
* Both of the above effects are introduced when browsing to the Projects - 'A Seasoned Plate' page in the video.
Micro Animation - Triggered by Hovering over an Element - when hovering over the 'X' to close out the Lightbox on the 'My Info.' Page.
Micro Animation - Triggered Based on Elapsed Time after Page Load - Multiple instances whereby content is displayed in a specific order utilizing animations such as to Reveal or Fade In.
Reveal Effect - 100VH Sections
Smooth Reveal of Colors as the site visitor navigates down the page.
HOW TO CREATE THE EFFECT
As the site visitor scrolls down the page each section (100 VH or 100% of the screens View Height) show a different color while the focal point, in this case the droplet, remains constant. It appears as though the colors change by way of some sort of layering, when in fact each section has it's very own image with a different color and the same droplet in each image for continuity.
The end effect of what appears to be only the color changing is done by setting the scroll effect to 'reveal'. The image below shows the 8 unique background images, one for each section as the site visitor navigates down the page. Note the droplet is identical in each image to create the effect upon ‘reveal’.