Site logo

[Resolved] Adding an animated vertical line like in starter site

Home Forums Support [Resolved] Adding an animated vertical line like in starter site

Home Forums Support Adding an animated vertical line like in starter site

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2269589
    Jessica

    I’m using the Coach starter site template for a new site and love the line that comes down when you hover over each menu item. I see the CSS in the Customizer, but I’m wondering if there’s any way to create a line like this that appears/move as you scroll down through the site (like in the center of the page showing you’re moving down the page). Just thought I’d check here in case – thanks!

    #2269598
    Leo
    Staff
    Customer Support

    Hi there,

    Sorry but I can’t quite picture what you are after.

    Any chance you can provide an example?

    #2269613
    Jessica

    Sure! It’s used on the primary menu on my staging site: https://cairnproject.flywheelstaging.com/

    #2269629
    Leo
    Staff
    Customer Support

    Sorry – I was wondering if you can provide an example of this:

    but I’m wondering if there’s any way to create a line like this that appears/move as you scroll down through the site (like in the center of the page showing you’re moving down the page)

    #2269632
    Jessica

    Oh yes sorry! Like on this site: https://www.bluecompass.com/ A line (left and bottom) appears around the Taking Your Digital Presence to the Next Level section as you scroll down.

    #2269760
    Fernando
    Customer Support

    Hi Jessica,

    You would need custom Javascript Code for such an effect which would be out of our scope of support.

    Here’s an example of a set of codes that run an effect based on the scroll position: https://codepen.io/tateishi-e/pen/xaEJxw

    If you’re not familiar with JS, it would be best to hire a developer to do it for you.

    Something that doesn’t need JS which we can help you with are hover effects. For instance: https://share.getcloudapp.com/Z4uA1Jvz

    Hope this clarifies!

    #2276307
    Jessica

    Thanks so much for the update! Super helpful info. I forgot about Hover Effects, I’ll try that. Thanks again!

    #2276628
    Fernando
    Customer Support

    You’re welcome Jessica!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.