Last active
April 25, 2022 19:36
-
-
Save joshparkerj/a5981c6666b46bb0d51443608208d684 to your computer and use it in GitHub Desktop.
add an animated wave effect to the text you select
This file contains hidden or 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
| // ==UserScript== | |
| // @name Wavify | |
| // @namespace http://tampermonkey.net/ | |
| // @version 0.1 | |
| // @description add an animated wave effect to the text you select | |
| // @author Josh Parker | |
| // @source https://github.com/joshparkerj/silly-internet-tricks/blob/main/text-effect/wavify.user.js | |
| // @downloadURL https://gist.github.com/joshparkerj/a5981c6666b46bb0d51443608208d684/raw/wavify.user.js | |
| // @updateURL https://gist.github.com/joshparkerj/a5981c6666b46bb0d51443608208d684/raw/wavify.meta.js | |
| // @match https://www.washingtonpost.com/* | |
| // @match https://www.google.com/* | |
| // @match https://en.wikipedia.org/wiki/* | |
| // @match https://www.tampermonkey.net/* | |
| // @match https://slate.com/* | |
| // @icon https://www.google.com/s2/favicons?domain=washingtonpost.com | |
| // @grant none | |
| // ==/UserScript== |
This file contains hidden or 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
| // ==UserScript== | |
| // @name Wavify | |
| // @namespace http://tampermonkey.net/ | |
| // @version 0.1 | |
| // @description add an animated wave effect to the text you select | |
| // @author Josh Parker | |
| // @source https://github.com/joshparkerj/silly-internet-tricks/blob/main/text-effect/wavify.user.js | |
| // @downloadURL https://gist.github.com/joshparkerj/a5981c6666b46bb0d51443608208d684/raw/wavify.user.js | |
| // @updateURL https://gist.github.com/joshparkerj/a5981c6666b46bb0d51443608208d684/raw/wavify.meta.js | |
| // @match https://www.washingtonpost.com/* | |
| // @match https://www.google.com/* | |
| // @match https://en.wikipedia.org/wiki/* | |
| // @match https://www.tampermonkey.net/* | |
| // @match https://slate.com/* | |
| // @icon https://www.google.com/s2/favicons?domain=washingtonpost.com | |
| // @grant none | |
| // ==/UserScript== | |
| (()=>{"use strict";function e(e){const t=document.createElement("style");t.textContent=e,document.querySelector("head").appendChild(t)}function t(e,t,n){e.classList.add("josh-wave"),e.style.setProperty("animation-delay",t/n*3e3+"ms")," "===e.textContent&&e.style.setProperty("padding","0 .25em")}!function(e,t,n){const o=document.querySelector("body > div.josh-text-manips"),s=o||document.createElement("div");s.className="josh-text-manips",s.appendChild(function(e,t,n){const o=document.querySelector("body"),s=document.createElement("button");s.innerText=e;const a=function e({target:a}){const d=a;o.removeEventListener("mousedown",e);const i=d.textContent.split("").map((e=>{const t=document.createElement("span");return t.textContent=e,t}));d.textContent="",i.forEach((e=>d.appendChild(e)));const r=({target:e})=>{"SPAN"===e.tagName&&e.classList.add("selected")};d.addEventListener("mouseover",r);const c=()=>{d.removeEventListener("mouseup",c),d.removeEventListener("mouseover",r);const e=d.textContent,o=[...d.childNodes].map((e=>e.className)),a=o.indexOf("selected"),i=o.lastIndexOf("selected")+1;d.innerHTML="",d.appendChild(new Text(e.slice(0,a)));const l=document.createElement("span");l.className=t,l.appendChild(new Text(e.slice(a,i))),d.appendChild(l),d.appendChild(new Text(e.slice(i))),n(d.querySelector(`span.${t}`)),s.removeAttribute("disabled")};d.addEventListener("mouseup",c)};return s.addEventListener("click",(()=>{s.setAttribute("disabled",!0),o.addEventListener("mousedown",a)})),s}(e,t,n)),o||document.querySelector("body").appendChild(s),document.styleSheets[0].insertRule(".josh-text-manips {position: fixed;background-color: lightgrey;padding: 5px 10px;top: 62px;right: 10px;border-radius: 16px;box-shadow: 2px 2px 1px black;}")}("wavify","wave-text",(function(n){e("@keyframes wave {from {transform: translateY(0);} 25% {transform: translateY(-100%);} 50% {transform: translateY(0);} to {transform: translateY(0);}}"),e("span.josh-wave {animation-duration: 3s; animation-name: wave; animation-iteration-count: infinite; display: inline-block;}"),function(e,t){const n=e,o=n.textContent.length,s=n.textContent.split("").map(((e,n)=>{const s=document.createElement("span");return s.textContent=e,t(s,n,o),s}));n.textContent="",s.forEach((e=>n.appendChild(e)))}(n,t)}))})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment