Skip to content

Instantly share code, notes, and snippets.

@kcclemo

kcclemo/highlight-anchor.html

Created April 24, 2017 14:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kcclemo/f210f3983c89a0b527a85efe5065e043 to your computer and use it in GitHub Desktop.
Save kcclemo/f210f3983c89a0b527a85efe5065e043 to your computer and use it in GitHub Desktop.
Download ZIP
Highlight element based on anchor(StackOverflow Effect)
Raw
highlight-anchor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Highlight element based on URL hash example</title>
<style>
/*
Custom class to be applied to our element.
*/
.focused {
padding: 5px;
border-radius: 30px;
box-shadow: 0px 0px 30px #9FC43E;
animation: fade-out-in 5s;
animation-fill-mode: forwards;
}
/*
Add keyframes to our fade out effect
*/
@keyframes fade-out-in {
0% {
border-radius: 30px;
box-shadow: 0px 0px 30px #9FC43E;
}
100% {
border-radius: 0px;
box-shadow: 0px 0px 0px transparent;
}
}
</style>
</head>
<body>
<section style="max-width: 768px">
<div id="target">
This element will be highlighted on load.
</div>
</section>
<script>
// Highlight the target based on the URL
var anchor_id = window.location.href.split('#');
var target = document.getElementById(anchor_id['1']);
target.className += ' focused';
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment