SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot samg914's Avatar
    Join Date
    Nov 2009
    Location
    Boston, MA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Autoscroll Div Background-color Change

    I have a menu that links to different divs on a single page using hash tags after the page name (i.e. my-page.html#section1).

    After the user scrolls to whatever section of the page they selected how can I briefly change the background color of that div? Something like a 2 second flash.

    The reason for this is that I want the user's eyes to immediately go to the section they selected. The reason this may not happen sometimes is that there will be 2 section within the screen space.

    Thanks for reading!

    Sam

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    You can do this with some CSS3 (as well as JS, of course). Here is a CSS example, courtesy of Snook:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>Target Fade</title>
    	
    <style type="text/css" media="all">
    :target {
        -webkit-animation: target-fade 3s 1;
        -moz-animation: target-fade 3s 1;
    }
    
    @-webkit-keyframes target-fade {
        0% { background-color: rgba(0,0,0,.1); }
        100% { background-color: rgba(0,0,0,0); }
    }
    @-moz-keyframes target-fade {
        0% { background-color: rgba(0,0,0,.1); }
        100% { background-color: rgba(0,0,0,0); }
    }</style>
    
    <script type="text/javascript" src=""> </script>
    	
    </head>
    
    <body>
    <p>Click the link to <a href="#goal">target the div</a>. </p>
    <p>Code courtesy of <a href="http://snook.ca/archives/html_and_css/yellow-fade-technique-css-animations">Snook</a></p>
    
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    
    <div id="goal">This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. This is the div. </div>
    
    </body>
    
    </html>

  3. #3
    SitePoint Zealot samg914's Avatar
    Join Date
    Nov 2009
    Location
    Boston, MA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works perfectly! Thanks Ralph!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •