文字と画像がブルブルするJavaScript
I wrote a script to make texts and images dance (or just oscillate😂).
as you know, it's not useful at all :)
文字と画像をわちゃわちゃさせてみました。お暇な方はお試しください🕺
code:oscillateText.js
const cname = "movearound-text-domdom-enjoy"
addClassToTextsAndImagesRecursively(document.body)
const targets = Array.from(document.getElementsByClassName(cname))
setInterval(() => oscillateElements(targets), 100)
function addClassToTextsAndImagesRecursively(root) {
if (root.tagName === "HEAD" || root.tagName === "SCRIPT" || root.tagName === "STYLE") return
const extendedChildNode = (node) => node.firstChild || node.shadowRoot || node.contentDocument
let child = extendedChildNode(root)
while (child) {
if (isEffectiveTextNode(child)) {
const charSpans = Array.from(child.nodeValue).map((c)=>{
const s = document.createElement('span')
s.classList.add(cname)
s.textContent = c
return s
})
child.replaceWith(...charSpans)
} else if (child.tagName === 'IMG') {
child.classList.add(cname)
child = child.nextSibling
} else {
addClassToTextsAndImagesRecursively(child)
child = child.nextSibling
}
}
}
function oscillateElements(elements) {
elements.forEach((e) => {
Object.assign(e.style, {
display: 'inline-block',
transform: translate(${Math.random() * 10}px, ${Math.random() * 10}px)
})
})
}
function isEffectiveTextNode(node) {
return node.nodeType === 3 && node.nodeValue.replace(/\u200b/g, '').trim().replace(/(\s|\n|\t)+/g, '') !== ""
}