分割文字 - 懸停字母

建立尊重使用者動作偏好設定的互動式字母效果。

完整文章 · YouTube 影片 · GitHub 上的資料來源

<h1 split-by="letter" letter-animation="hover">
  hover-me letters
</h1>

       
@media (prefers-reduced-motion:no-preference) {
 
[letter-animation=hover]:hover>span {
   
transform: scale(.75) perspective(1px)
 
}

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

 
[letter-animation=hover]>span:hover {
   
transform: scale(1.25) perspective(1px)
 
}
}
       

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

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

const byLetter = text =>
 
[...text].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
= byLetter(node.innerText)

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