פיצול טקסט – מילים מרחף

יוצרים אפקטים אינטראקטיביים של מילים שמכבדים את העדפות התנועה של המשתמש.

מאמר מלא · סרטון ב-YouTube · מקור ב-GitHub

<h1 split-by="word" word-animation="hover">
  hover the words
</h1>

       
@media (prefers-reduced-motion:no-preference) {
 
[word-animation] {
   
display: inline-flex;
   
flex-wrap: wrap;
   
gap: 1ch
 
}
}

@media (prefers-reduced-motion:no-preference) and (hover) {
 
[word-animation=hover] {
   
overflow: hidden;
   
overflow: clip
 
}

 
[word-animation=hover]>span {
   
transition: transform .3s ease;
   
cursor: pointer
 
}

 
[word-animation=hover]>span:not(:hover) {
   
transform: translateY(50%)
 
}
}
       

       
const span = (text, index) => {
 
const node = document.createElement('span')

  node
.textContent = text
  node
.style.setProperty('--index', index)
 
 
return node
}

export const byWord = text =>
  text
.split(' ').map(span)

const {matches:motionOK} = window.matchMedia(
 
'(prefers-reduced-motion: no-preference)'
)

if (motionOK) {
 
const splitTargets = document.querySelectorAll('[split-by]')

  splitTargets
.forEach(node => {
    let nodes
= byWord(node.innerText)

   
if (nodes)
      node
.firstChild.replaceWith(...nodes)
 
})
}