JCHS
Client: JCHS
Project Brief: The original brief was simply to “copy” the school’s existing site from an expensive and somewhat unwieldy platform over to WordPress, while possibly simplifying some of the content structure. Over the course of some months, the project gradually expanded into a full-blown redesign. Menus, page layouts, the school calendar, staff listings, news feeds: everything transformed into a cleaner and more modern look for the school. JCHS staff are still able to update all the sections and media they need to, but without the bloat that characterized the previous platform. The WordPress framework and theme will allow for significant improvements in SEO and accessibility going forward as well. Building out the new site involved Custom Post Types for athletic teams, drama productions, staff and board members, as well as custom layouts for curriculum pages, team pages, student activity pages, calendar pages, etc.
4166Note: The placeholder image sizes provided are examples only. You can use images as tall as you like.
To adjust the height of the visible space, edit the max-height value in each section’s structure settings in the advanced tab.
The images are defined in the background settings of the style tab in each section. You need to add the same image to the static and hover states. The static state should have a background position of: Left 50%, Top 0%. The hover state should have a background position of: Left 50%, Top 100%.
You can adjust the speed of the scroll by adjusting the CSS in the Custom CSS box of the parent row.
.bb-scroll-screen-1 .kt-inside-inner-col {
transition: background-position 1s linear;
}
Adjust the 1s value above to control the time the image takes to return to its static state (on mouseout)
.bb-scroll-screen-1 .kt-inside-inner-col:hover {
transition: background-position 10s linear;
}
Adjust the 10s value above to control the speed the image scrolls on hover (on mouseover)