diff --git a/content/notes/css-waving-hand-emoji/index.md b/content/notes/css-waving-hand-emoji/index.md new file mode 100644 index 00000000..dc5eb17f --- /dev/null +++ b/content/notes/css-waving-hand-emoji/index.md @@ -0,0 +1,51 @@ +--- +title: "Animated Waving Hand Emoji πŸ‘‹ Using CSS" +date: 2019-04-22T09:20:10-04:00 +description: "How to make the πŸ‘‹ waving hand emoji actually wave using pure CSS animation!" +tags: + - CSS + - Animation + - Emoji + - Keyframes + - Cool Tricks +draft: false +--- + +If you examine [my homepage](https://jarv.is/) long enough, you might notice the πŸ‘‹ hand emoji at the top subtly waving at you. This was easily accomplished using a few lines of CSS with a feature called [`@keyframes`](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) -- no bulky GIFs involved, and no messy JS or jQuery overkill required. + +Below are the code snippets you can grab and customize to make your own +["waving hand" πŸ‘‹](https://emojipedia.org/waving-hand-sign/) emojis ***actually wave***, and a [CodePen playground](https://codepen.io/jakejarvis/pen/pBZWZw) for live testing. + + + +### CSS: + +``` +span#wave { + animation-name: wave-animation; /* refers to the name of your @keyframes element below */ + animation-duration: 2.5s; /* change to speed up or slow down */ + animation-iteration-count: infinite; /* never stop waving! */ + transform-origin: 70% 70%; + display: inline-block; +} + +@keyframes wave-animation { + 0% { transform: rotate( 0.0deg); } + 10% { transform: rotate(-10.0deg); } /* these three values can be played with to make the waving more or less extreme */ + 20% { transform: rotate( 12.0deg); } + 30% { transform: rotate(-10.0deg); } + 40% { transform: rotate( 9.0deg); } + 50% { transform: rotate( 0.0deg); } /* reset for 50% of the time to pause */ + 100% { transform: rotate( 0.0deg); } +} +``` + +### HTML: + +``` +πŸ‘‹ +``` + +That's it! Different hand variations and skin tones can be [found on πŸ“•Emojipedia](https://emojipedia.org/search/?q=waving+hand). + +πŸ‘‹πŸΌ Toodles! \ No newline at end of file diff --git a/worker.js b/worker.js index 421c4602..5bb16f44 100644 --- a/worker.js +++ b/worker.js @@ -1,5 +1,5 @@ let newHeaders = { - "Content-Security-Policy": "default-src 'none'; script-src 'self' 'unsafe-inline' stats.jarv.is comments.jarv.is; style-src 'self' 'unsafe-inline' comments.jarv.is; img-src 'self' data: https:; font-src 'self' comments.jarv.is; object-src 'self'; media-src 'self'; base-uri 'none'; form-action 'self'; frame-src 'self' www.youtube.com www.youtube-nocookie.com; frame-ancestors 'self'; worker-src 'none'; connect-src 'self' jarvis.report-uri.com stats.jarv.is comments.jarv.is; upgrade-insecure-requests; report-uri https://jarvis.report-uri.com/r/d/csp/enforce; report-to default", + "Content-Security-Policy": "default-src 'none'; script-src 'self' 'unsafe-inline' stats.jarv.is comments.jarv.is; style-src 'self' 'unsafe-inline' comments.jarv.is; img-src 'self' data: https:; font-src 'self' comments.jarv.is; object-src 'self'; media-src 'self'; base-uri 'none'; form-action 'self'; frame-src 'self' www.youtube.com www.youtube-nocookie.com codepen.io; frame-ancestors 'self'; worker-src 'none'; connect-src 'self' jarvis.report-uri.com stats.jarv.is comments.jarv.is; upgrade-insecure-requests; report-uri https://jarvis.report-uri.com/r/d/csp/enforce; report-to default", "Report-To": "{\"group\":\"default\",\"max_age\":604800,\"endpoints\":[{\"url\":\"https://jarvis.report-uri.com/a/d/g\"}]}", "NEL": "{\"report_to\":\"default\",\"max_age\":604800}", // "Strict-Transport-Security" : "max-age=1000",