Homepage photo collage
About this component
The very top of the homepage has an animated photo collage, overlaid with an intro blurb and apply button. The goal is to give a quick intro to PCC through imagery, to show that PCC will meet people where they are (that they belong), and to give people a chance to apply if that is their goal.
Guidelines
The homepage committee will have a quarterly review of the collage images, and choose new images as needed. Images should:
- Be fun and inviting.
- Show a variety of subject matter (campuses, people, activities, etc.) with equal representation for all four campuses.
- Include at least one image of Poppie the Panther.
- Accurately represent our college community.
- Be high quality and use a variety of colors and compositions.
- Show timely and seasonal imagery if possible.
- Avoid triggering topics and stock photography.
Styling
Collage: The collage has columns of images that scroll at slightly different speeds, encouraging people to wait and see the rest of the images. The images themselves show campuses, people, and activities to help paint a general picture of what PCC is like. The collage has a slight dark overlay to make it less overwhelming behind the intro text and button.
Animation: The animation includes a pause button for those that need less motion. If you pause the animation, the images stop moving. If you then play the animation, the collage fades out and back in to prevent flashing images.
Intro text and apply button: The intro text is large and eye-catching. Both sentences should fit on one line on standard desktop screens. The button is green to draw attention to it and set it apart from the other buttons on the page.
Responsive behavior for Homepage photo collage
On large screens there are 4 columns of images, on medium screens there are 3 columns, and on small screens there are 2 columns.
How to use for Homepage photo collage
Editable in the HTML (see “development info”).
欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Homepage photo collage
Stylesheet location:
/_source/homepage/styles/_photo-collage.scss
Edit the root-level index.html file.
- Images: Strips of images that scroll together, reducing the total number of images the page has to load.
- The individual images don’t have alt text. Instead, the entire photo collage has a general description of what the images are supposed to convey: “Collage of photos from all around the college. Includes images of architecture, student groups, and events.”
- The strips should be 667px wide. On launch, strip 1 (the fastest) had five horizontal images, strip 2 had two vertical images, strip 3 (the slowest) had two horizontal images, and strip 4 had three horizontal images.
- Intro text and apply link: Hardcoded on the page.
Example of Homepage photo collage
Desktop view
Tablet view
Phone view
Animation
