Created
March 30, 2022 19:32
-
-
Save nfreear/05395131570b6c97690cc854481f23e7 to your computer and use it in GitHub Desktop.
Animated glow on focus - CSS + Javascript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> <title> Animated Glow </title> | |
| <style> | |
| @keyframes glowing { | |
| 0% { | |
| X-background-color: #2ba805; | |
| X-box-shadow: 0 0 5px #2ba805; | |
| outline-width: 0; | |
| } | |
| 50% { | |
| X-background-color: #49e819; | |
| X-box-shadow: 0 0 20px #49e819; | |
| box-shadow: 0 0 .2rem .2rem darkorange; | |
| outline-width: 0; | |
| } | |
| 75% { | |
| outline-width: 1px; | |
| } | |
| 100% { | |
| X-background-color: #2ba805; | |
| X-box-shadow: 0 0 5px #2ba805; | |
| outline-width: 2px; | |
| } | |
| } | |
| [ tabindex ][ id ] { | |
| padding: .2rem; | |
| } | |
| [ href ]:focus { | |
| outline-offset: .2rem; | |
| } | |
| [ tabindex ]:focus { | |
| animation: glowing 1500ms linear 0ms 2; | |
| X-animation: glowing 2400ms linear 0ms 1; | |
| border-radius: .1rem; | |
| outline: 2px solid darkorange; | |
| X-outline-offset: .1rem; | |
| } | |
| </style> | |
| <my-page> | |
| <h1> Animated Glow </h1> | |
| <p> <a href="#section-2">Skip to section 2</a>. </p> | |
| <my-lorem-ipsum></my-lorem-ipsum> | |
| <section tabindex="-1" id="section-2"> | |
| <h2> Section 2 </h2> | |
| <p> <a href="#_link"> Link A </a> </p> | |
| </section> | |
| </my-page> | |
| <script> | |
| const IN_PAGE = document.querySelectorAll('a[ href ^= "#" ]'); | |
| IN_PAGE.forEach(link => { | |
| link.addEventListener('click', ev => { | |
| ev.preventDefault(); | |
| const HREF = ev.target.href; | |
| const url = new URL(HREF); | |
| const HASH = url.hash; | |
| const DEST = document.querySelector(HASH); | |
| if (!DEST) { return console.debug('Click B:', HASH, DEST, ev); } | |
| DEST.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| setTimeout(() => { | |
| DEST.focus() | |
| window.history.pushState({ hash: HASH }, '', url); | |
| }, | |
| 900); | |
| console.debug('Click:', HASH, DEST, ev); | |
| }); | |
| }); | |
| console.debug('In-page links:', IN_PAGE); | |
| window.onpopstate = function(event) { | |
| console.debug('onpopstate:', event); | |
| // alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`) | |
| } | |
| </script> | |
| <my-options template-host="github.io" use="my-lorem-ipsum, my-page"></my-options> | |
| <script type="module" src="https://nfreear.github.io/web-components/custom.js" > | |
| /* import { customImport } from 'https://nfreear.github.io/web-components/custom.js'; | |
| customImport('my-lorem-ipsum, my-page'); | |
| */ | |
| </script> | |
| <pre> | |
| NDF, 28-March-2022. | |
| * https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView, | |
| * https://www.w3docs.com/snippets/css/how-to-create-flashing-glowing-button-using-animation-in-css3.html | |
| </pre> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment