Golden Gate Bird Alliance
Client: Golden Gate Bird Alliance
Project Brief: UPDATE: In 2023, the membership voted to change the name of the organization to the Golden Gate Bird Alliance. We took the opportunity to do a light refresh of the site, especially the home page and the blog layouts. The site still functions as well as the day it was launched! In 2019, I took on a small-ish job to do a light refresh of the GGAS site, mostly in order to bring it up to modern standards and make sure it was responsive for mobile screens. A few years later, we took on a complete overhaul of the design and UX/UI. The site included an extensive calendar for members and volunteers, registrations, many custom content types like an ongoing Speaker Series, Field Trips and Travel Trips, Classes, a blog, the yearly Birdathon events and fundraising, and an archive for storing lots of birdwatching data. Like most larger sites, there’s always something growing and evolving on the site.
4920Note: 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)