The Bicentennial Scholars/Professors (BSF/BPF) 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 of the combined $375M fundraising effort for these programs.
Both pages use centralized modular elements from Alderman Core 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 these particular variety of shapes is easier, coding them 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 to the window. Despite these time-consuming considerations, both pages were engineered and production-ready in under a week.