Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
HTML
<h1 split-by="word" word-animation="hover">
hover the words
</h1>
CSS
@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%)
}
}
JS
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)
})
}
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2023-10-25 (UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Falta la información que necesito"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Muy complicado o demasiados pasos"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Desactualizado"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problema de traducción"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problema con las muestras o los códigos"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Otro"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Fácil de comprender"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Resolvió mi problema"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Otro"
}]
{
"lastModified": "Última actualización: 2023-10-25 (UTC)",
"confidential": False
}