Skip to content

Instantly share code, notes, and snippets.

@joshparkerj
Last active April 25, 2022 19:36
Show Gist options
  • Select an option

  • Save joshparkerj/a5981c6666b46bb0d51443608208d684 to your computer and use it in GitHub Desktop.

Select an option

Save joshparkerj/a5981c6666b46bb0d51443608208d684 to your computer and use it in GitHub Desktop.
add an animated wave effect to the text you select
// ==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==
// ==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