The Bicentennial Scholars/Professors pages are two interactive and highly engaging pages for the new initiatives from the University of Virginia. Based on Alderman Core, these pages are the primary online presence for the combined $375M fundraising effort of these programs.
Both pages use centralized modular elements in addition to page-specific elements. Customized elements, such as animating circles, a field of parallax images that move as the user scrolls, and an odometer that shows the fundraising progress give the page its own distinct personality.
These pages were engineered with quality in mind. Animated circles and parallelograms were coded instead of using images. Although using images for a variety of shapes is easier, having them coded gives us more flexibility with animations and is much clearer on high-resolution displays. Another example of this attention to quality is regarding the animations, which are triggered using the IntersectionObserver API to execute scroll-based animations as the user scrolls down the page. This has a performance boost instead of the traditional approach of binding scroll events on the entire document. Despite the time-consuming considerations, both of these pages were engineered in under a week.