WEB EFFECTS
Hover Interactions & Complex Grids
Platform: Editor X

Effects Displayed
2 Separate Hover Interactions on Home Page
Additional Features 
Complex Grid
Sticky Sections
Hover Effect (Video Start / Stop)
Reveal Content

Acknowledgements
Complex Grid - I Love Editor X - Video
Hover Interactions - I Love Editor X - Video


Page Transitions & Scroll Effects
Platform: Editor X

Effects Displayed
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).
Additional Features 
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
Platform: Editor X

Effects Displayed
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’.

You may also like

Back to Top