Scroll To And Highlight Div When Link Is Clicked

I'm trying to highlight a div that wraps a contact form so the user knows where to go to contact. my link will be something like this

<a href="#form" class="contacthighlight">Contact Us</a>

Going with a class since this will be used on the site in two places.

right now the current background for #form is #f5f5f5 so what I want to do is Flash a random color like #ff0000 and slowly fade it out back to #f5f5f5

Answers


demo on dabblet.com

Target pseudo­-class applied to element which you are scrolled to. Add this to your css:

CSS:

#form {
    background-color: #f5f5f5;
}

#form {
    background-color: #f5f5f5;
}

#form:target {
    animation: target-fade 1s 1;
}

@keyframes target-fade {
    0% { background-color: #ff0000; }
    100% { background-color: #f5f5f5; }
}

HTML markup:

<a href="#form"> link to target #form</a>
<form id="form">
    …
</form>

PS: Accordingly to caniuse.com CSS properties: animation and keyframes is needed vendor prefixes such this:

.box_animation:hover {
  -webkit-animation: myanim 1s infinite; /* value is demo only */
     -moz-animation: myanim 1s infinite;
       -o-animation: myanim 1s infinite;
          animation: myanim 1s infinite;
}

@-webkit-keyframes myanim {…}
@-moz-keyframes myanim {…}
@-o-keyframes myanim {…}
@keyframes myanim {…}

PPS: dabblet using prefix free JS library to paste all necessary prefixes. Later without this library you can see all you need prefix syntax on css3please


You can use the Ariel Flesler's ScrollTo jQuery Plugin to scroll with animation.

And for changing color with animation you use the jQuery Color Animation Plugin

example

$('selector').scrollTo( '520px', 800 )
.animate({backgroundColor:'#ff0000'}, {duration:5000,queue:false});
Edits

If you want to fade it back you can use toggle function.

   $('selector').scrollTo( '520px', 800 )
   .toggle(function() {
   $(this).animate({ 
     {backgroundColor:'#ff0000'}, {duration:5000,queue:false});
   },
   function() {
   $(this).animate({
     {backgroundColor:'#f5f5f5'}, {duration:5000,queue:false});
   });

Need Your Help

How to find the 4 coordinates (lat-long) of a pixel (cell) in a global file?

r geolocation raster gis

I am using a climate variable that can be downloaded from here:

How can I get longitude and latitude from address?

android google-maps geocoding

I have to implement my Google map where i entered any address it will automatically get the longitude and latitude.Here is the code i tried