Change background color of DIV after autoscroll

Question

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 is there a way to briefly change the background color of that div?

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!

Sam

A similar topic on SO with an accepted answer: http://stackoverflow.com/questions/8755887/jquery-change-background-color-user-scroll — JerryHuang.me, Mar 07 '13 at 17:19
Thanks for the link, but this doesn't really apply to what I'm trying to accomplish. — Wolf Cat, Mar 08 '13 at 23:03

score 1 · Accepted Answer · answered Mar 14 '13 at 15:53

SOLUTION

Simply add this to your style sheet:

:target {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}
@-webkit-keyframes target-fade {
    0% { background-color: rgba(228,201,128,.3); }
    100% { background-color: rgba(228,201,128,0); }
}
@-moz-keyframes target-fade {
    0% { background-color: rgba(228,201,128,.3); }
    100% { background-color: rgba(228,201,128,0); }
}

Change background color of DIV after autoscroll

1 Answers1