---->First of all CLICK HERE
What happen ???
->You see that some portion of the page get highlight.
->Now if u want this type of effect than what to do ???
->Now if u want this type of effect than what to do ???
Solution :
->We can do this using two ways
-> Using CSS
-> Using Jquery
USing CSS
-> First of all give the unique id to the portion which u want to highlight
like... <div id="demo1">
<h2>Demo1</h2>
Hello....Hello....
Hello....Hello....
Hello....Hello....
</div>
<div id="demo2">
<h2>Demo2</h2>
Hello....Hello....
Hello....Hello....
Hello....Hello....
</div>
->now when we pass the URL like : www.anyone.com/demo.html#demo1
-then it shoud highlight demo1 part and if we pass demo2 then it will highlight demo2
part.
->So for that we have to get last "#demo1" part and then provide the animation.
-> To do that just add the following in your CSS
:target {
-webkit-animation: highlight 2s ease;
-moz-animation: highlight 2s ease;
}
@-webkit-keyframes highlight {
0% { background-color: red; }
100% { background-color: white; }
}
@-moz-keyframes highlight {
0% { background-color: red; }
100% { background-color: white; }
}
->When you pass that url , :target css automatically find the hash part and appy css so
portion get highlighted..
Note : For Example Click Here
Using JQuery
->For write the jquery at the bottom in document.ready function.
->In jquery we have to find the hash part using the following function
window.location.hash
-It will return the last #(hash) part from the URL
->Now we have to apply Jquery on that
like ......
$(window.location.hash).css({
"backgroundColor": "#dbed78",
"-webkit-transition":"all 2s"
});
setTimeout(function(){
$( "#demo1" ).css({
"backgroundColor": "#fff"
});
}, 2000);
->So it will highlight your portion.
-> For Exaple Click Here
$(window.location.hash).css({
"backgroundColor": "#dbed78",
"-webkit-transition":"all 2s"
});
setTimeout(function(){
$( "#demo1" ).css({
"backgroundColor": "#fff"
});
}, 2000);
->So it will highlight your portion.
-> For Exaple Click Here
Comments
Post a Comment