This one's pretty niche but I think you might love it!

I was working on a site this week and needed to display a lengthy graphic. I had seen a hover-to-scroll feature on someone else's site and thought it would be a great way to display my graphic and add a fun interactive feature.

It's easier to show you than tell you about it. Click here for a preview (only available on desktop).

​

Want to do it yourself? This one's pretty easy — a great way to dip your toe in custom code.

​

Step 1: Create your graphic on Canva

You can place whatever you'd like onto this canvas. You can also make it taller by clicking "resize" and adding pixels to the height. It can be as tall as you'd like.

​

Step 2: Get the image URL

The easiest way to do this is to upload the image to your website's media library. Copy the image URL (this should end in .jpg or .png).

​

Step 3: Edit the code

Change two things:

1. Select how many seconds you'd like your scroll to take. It's written for 10 seconds. Fewer seconds will mean the scroll happens more quickly, additional seconds will slow it down.
2. Replace YOUR IMAGE URL HERE with your image URL.

​

Step 4: Create an embed code block on your site. Copy the entire section of code and paste it. Voila!

*There's no such thing as hover on mobile, so you'll want to disable or hide this code block on mobile.

​

How could you use this feature? Here are a few ideas!

• Create an event recap full of images from your last event & use it on your landing page for the next one.
• Preview all of the weekly themes for a given sermon series alongside the most recent sermon embedded from Youtube.
• Create a timeline for school choice/school voucher application process near a how-to guide from the principal.
• Show milestones for a fundraising campaign alongside ways to give.

This should work on any site builder, but let me know if you run into any issues!

Until next week,