Forums

Give help. Get help.

  • # August 9, 2017 at 5:02 am

    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.

    # August 9, 2017 at 5:46 am

    “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

    # August 11, 2017 at 12:53 pm

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

    # August 11, 2017 at 4:56 pm

    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.

    # August 11, 2017 at 11:28 pm

    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)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag