Hovers, Transitions & Interactions
Hover Interactions & Complex Grids

Platform: Editor X
​​​​​​​Effects Displayed: 2 Separate Hover Interactions on the 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 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 its place on the screen, while new content is introduced as the user scrolls 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.
The second example shows a new type of page transition I've been working on, as well an interesting way to add some jazz to your site menu.
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 screen's View Height) shows 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 its 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