Jonathan Dimmock

Client: Jonathan Dimmock

Project Brief:

Jonathan Dimmock is an internationally-recognised organist, playing in cathedrals around the world, and with major orchestras in the SF Bay Area. In addition to his concert performing, Jonathan acts as the Executive Director of The Resonance Project, and a certified Reiki practitioner. His website reflects his many interests and pursuits, while showcasing his work as a recitalist.

I’ve worked with Jonathan for more than a decade, creating several iterations of his site as his interests, tastes and experience broaden. He’s a touring concert organist, but also a reiki practitioner,  a choral director, a writer and photographer, a mindfulness coach, as well as an activist for music as a force for peace. This is his primary musician site, with a custom-built Gig Calendar, a blog with Facebook integration, and WooCommerce functionality for CD purchases and music downloads. I also built him a site for his concert ensemble: artistsvocalensemble.org

  • screen showing jonathandimmock.com home page
  • Jonathan Dimmock's Hands photo from his website
  • ave screencap
Visit Site Back to Portfolio

Note: 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)