CSS 전용 타자기 효과

CSS를 사용한 타이핑 애니메이션에 대한 Stokry의 글을 읽은 후 저는 이 효과를 사용하고 개선할 기회를 가졌습니다.

아이디어

Mr. Henry에서 우리는 현재 클라이언트theAddresses의 전체 웹사이트에서 작업하고 있습니다. 우리의 디자이너는 포르투갈어 단어를 문장으로 표시하는 아이디어를 내놓았습니다. 클릭하면 설명이 나타납니다.


사용자가 구성 요소와 상호 작용하기 전에


사용자가 구성 요소와 상호 작용한 후

목표

우리는 가능한 한 a11y 규칙을 존중하기 위해 최선을 다하므로 이 구성 요소에 대해 예외를 두지 않습니다.

구성요소는 다음을 충족해야 합니다.

스크린 리더가 이해할 수 있습니다.

움직임 감소에 대한 사용자의 선호도를 존중합니다.

은 키보드 사용자가 사용할 수 있습니다.

이 구성 요소는 CMS 편집기에서 유연해야 하며 JavaScript 없이 작동하도록 하면 좋을 것입니다.

코드: HTML

먼저 모든 html에서 우리는 twig로 작업하고 있습니다.

{% set explainer_id = function('uniqid', 'explainer-', false) %}

<span
    aria-label="'{{ text }}' which means '{{ explanation }}'"
    class="explainer"
>
    <input
        aria-hidden="true"
        class="explainer__checkbox"
        id="{{ explainer_id }}"
        name="{{ explainer_id }}"
        type="checkbox"
    >

    <label
        aria-hidden="true"
        class="explainer__label"
        data-text="{{ text }}"
        data-explanation="{{ explanation }}"
        for="{{ explainer_id }}"
    >
        <span class="explainer__text">
            {{ text }}
        </span>

        <span class="explainer__explanation">
            {{ explanation }}
        </span>
    </label>
</span>

HTML — 상호작용
HTML/CSS의 매우 간단하면서도 강력한 핵은 체크박스를 사용하고 CSS에서 상태:checked를 들어 한 줄의 JS 없이 구성 요소를 상호 작용하도록 만드는 것입니다.

HTML — A11y
사본에 aria-레이블을 추가하여 화면 판독기에서 이를 명확하고 간단하게 만들었습니다.

'a Portuguese word' which means 'the explanation'

우리의 자식 요소에는 aria-hidden 속성이 있으므로 사용자가 다른 콘텐츠와 혼동하거나 귀찮게 할 수 없습니다.
체크박스를 사용하고 있기 때문에 키보드 사용자가 이 요소에 액세스할 수 있습니다.

HTML — ID
ID는 HTML 문서에서 항상 고유해야 합니다. 이것이 우리가 PHP 함수를 사용하는 이유입니다uniqid.
나중에 css로 특정 구성 요소를 선택하는 데 유용합니다.

코드: 인라인 스타일

두 번째로 twig 코드에 인라인 스타일을 추가할 것입니다.

{% set msPerChar = 32 %}
{% set msExtraDelay = 320 %}

<style>
    @media (prefers-reduced-motion: no-preference) {
        #{{ explainer_id }} ~ .explainer__label::after,
        #{{ explainer_id }} ~ .explainer__label::before {
            transition: max-width 0s linear {{ msPerChar * explanation|length }}ms;
        }

        #{{ explainer_id }}:checked ~ .explainer__label::after,
        #{{ explainer_id }}:checked ~ .explainer__label::before {
            transition: max-width 0s linear {{ msPerChar * text|length }}ms;
        }

        #{{ explainer_id }} ~ .explainer__label .explainer__text {
            transition: width {{ msPerChar * text|length }}ms steps({{ text|length }});
            transition-delay: {{ (msPerChar * explanation|length) + msExtraDelay }}ms;
        }

        #{{ explainer_id }} ~ .explainer__label .explainer__explanation {
            transition: width {{ msPerChar * explanation|length }}ms steps({{ explanation|length }});
            transition-delay: 0s;
        }

        #{{ explainer_id }}:checked ~ .explainer__label .explainer__text {
            transition-delay: 0s;
        }

        #{{ explainer_id }}:checked ~ .explainer__label .explainer__explanation {
            transition-delay: {{ (msPerChar * text|length) + msExtraDelay }}ms;
        }
    }
</style>

나뭇가지 — msPerChar & msExtraDelay애니메이션을 최대한 일관되게 만들기 위해 twig 변수를 사용하고 문자열 길이와 함께 지연을 계산합니다.

CSS — 애니메이션
보시다시피 이전 및 이후 요소를 사용하고 있으며 이 게시물에서 더 자세히 설명합니다.
텍스트 및 설명 너비는 문자열 길이에 해당하는 단계로 애니메이션됩니다.

코드: CSS

.explainer {
    border-bottom: 2px dashed;
    display: inline-block;
    white-space: nowrap;

    &:hover {
        border-bottom-style: solid;
    }
}

.explainer__checkbox {
    height: 0;
    left: 0;
    outline: none;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 0;
}

.explainer__label {
    cursor: help;
}

.explainer__text,
.explainer__explanation {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.explainer__checkbox:checked ~ .explainer__label .explainer__text,
.explainer__checkbox:not(:checked) ~ .explainer__label .explainer__explanation {
    /* Visually hide elements on older browsers or for users who prefer no animations. */
    width: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .explainer__label {
        position: relative;
    }

    /* Before and After pseudo element will be used as placeholders of the text */
    .explainer__label::after,
    .explainer__label::before {
        display: inline-block;
        opacity: 0;
        overflow: hidden;
        width: auto;
    }

    .explainer__label::before {
        content: attr(data-text);
        max-width: 420px;

        .explainer__checkbox:checked ~ & {
            /* Hide original placeholder text */
            max-width: 0;
        }
    }

    .explainer__label::after {
        content: attr(data-explanation);
        max-width: 0;

        .explainer__checkbox:checked ~ & {
            /* Show explanation placeholder text */
            max-width: 420px;
        }
    }

    .explainer__text,
    .explainer__explanation {
        /* Position the actual text absolute */
        left: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) translateZ(0);
        width: 100%;
    }

    .explainer__text::after,
    .explainer__explanation::after {
        /* To add a more typing look we're adding a cursor here */
        background-color: transparent;
        content: "";
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 2px;

        .explainer:focus &,
        .explainer:hover &,
        .explainer__checkbox:focus ~ .explainer__label & {
            animation: BLINKING 320ms step-end infinite alternate;
        }
    }
}

@keyframes BLINKING {
    50% {
        background-color: currentColor;
    }
}

CSS — prefers-reduced-motion: no-preference움직임 감소를 선호하는 사용자를 존중하기 위해 전환 없이 텍스트와 설명을 표시하거나 숨길 것입니다.
기본 설정이 no-preference로 설정된 경우에만 일부 애니메이션과 전환을 추가합니다.

CSS — 데이터 속성이 있는 의사 요소
애니메이션을 빠르고 매끄럽게 만들기 위해 텍스트와 설명이 있는 의사 요소를 추가할 것입니다. 이렇게 하면 너비를 전환하고 텍스트의 너비를 부드럽게 애니메이션화할 수 있으며 설명 범위는 0에서 100%까지입니다.

CSS — :hover, :focus & :checked 애니메이션
호버 상태로 테두리 스타일을 dashed에서 solid로 변경합니다. 보너스: 더 많은 타자기 모양과 느낌을 주기 위해 깜박이는 애니메이션을 추가했습니다.
키보드 사용자가 체크박스에 집중하면 깜박입니다. 공간에 도달하면 확인란이 선택됨으로 설정되고 애니메이션이 시작됩니다.
확인란이 :checked인 경우 텍스트의 너비와 설명 범위를 변경합니다.

CSS — 함정
요소에는 white-space: nowrap 및 최대 너비가 필요합니다. 즉, 요소는 한 줄의 짧은 문장에만 사용할 수 있습니다.

코드펜 예제

애니메이션

사이드노트

또한 모노 서체를 사용하고 Lea Verou did come up with 과 같은 ch 단위를 사용할 때 이 애니메이션이 더 정확할 수 있었다는 점을 지적하고 싶습니다.