Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Horizontal line at top of webpage …which scrolls

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #257507
    drone4four
    Participant

    I previously asked and recieved some terrific help creating the effect of having an off colored line at the top of the webpage frame in your web browser: https://css-tricks.com/forums/topic/opera-com-home-page-single-red-line-effect/

    It’s a nice effect. I’ve seen a similar, more useful effect which involves the line (of any color) at the top of the webpage frame (like I have previously) but which increases in length from left to right as the user scroll down the page, typically of a long form article or essay? I raise this question because I am sure there is a proper name for the functionality I’m describing which I would need to use as a keyword to search Google to locate a doc either by Chris Coyier or by someone else like on Stackoverflow.

    Please advise.

    Thanks for your attention.

    #257511
    Beverleyh
    Participant

    “Scroll progress indicator” or “scroll progress bar” would seem like good terms to search on.

    Here’s a cool CSS-only demo https://codepen.io/MadeByMike/pen/ZOrEmr

    And here’s one I did last year with plain JavaScript http://fofwebdesign.co.uk/template/_testing/scroll-progress.htm

    #257634
    Shikkediel
    Participant

    Made me think of the sled with the Xmas story too…

    #259139
    drone4four
    Participant

    Hi @Beverleyh: I will play around with the CSS-only demo from the codepen you shared. Your plain JS demo is interesting too. I also noticed your other related blog postings involving the percent sign with the circle around it that changes color. I am not even at a beginner level when it comes to reading JavaScript. If I do jump in and begin playing with it, I’ll be sure to return here to troubleshoot my implementation. Thank you for your help, once again, Beverleyh.

    #259141
    Beverleyh
    Participant

    Happy to help @drone4four

    Made me think of the sled with the Xmas story too…

    Santa’s still lurking online http://fofwebdesign.co.uk/template/_writing/a-mince-pie-too-many/index.htm

    I’ve been toying with the idea of doing a revamp that involves CSS animation and changing panel background-color… a verse per panel, with a jingling bell here and a sprouting Xmas tree there http://fofwebdesign.co.uk/template/_testing/scroll-in-view/add-class-to-target-when-trigger-in-view.htm. It’s just finding the time to do it that’s the problem :/

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.