brunch

매거진 워드프레스 활용 이야기

라이킷 14 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Feb 04. 2023

CSS로 텍스트 교체 효과 적용하기

워드프레스 활용 이야기

웹사이트 메인 페이지에 문장을 나눠서 교체되는 효과를 적용하는 방법을 소개해 보려고 합니다.

왼쪽 상단에 이어지는 텍스트를 교체 효과를 적용해서 표시하려면 어떻게 해야 할까요?

이 경우 보통 쉬운 방법으로 슬라이드 플러그인을 선택할 수 있습니다. 메인 페이지 첫 섹션을 슬라이드 형태로 만드는 거죠.(fadeIn 전환 효과) 그런데 슬라이드 기능을 사이트 전체 페이지에서 쓸 것도 아니고 이 한 군데에 글자 효과를 적용하는 것에 다양한 기능이 있는 플러그인을 추가하면 그만큼 사이트에 불필요한 리소스가 추가가 되는 것이라 좋은 방법은 아닐 듯합니다. (~~특히 레볼루션 슬라이더는 기능이 어마어마한 만큼 무겁습니다. 간단한 슬라이드 하나 추가하는 용도로는 부디 쓰지 마세요.~~)

혹 테마에 따라 개발자가 화면 요소 중 하나로 글자가 교체되는 것을 미리 만들어 놓은 경우도 있습니다. (html + css + jQuery 조합) 이때에는 이런 요소를 활용하면 좋겠지요.

> 예: https://impreza.us-themes.com/elements/interactive-text/

이용하는 테마 내에 만들어진 화면 요소는 없고 굳이 다른 플러그인을 추가하지 않고 글자가 바뀌는 걸 표시하고 싶을 때에는, 문장을 html로 나눠 적을 수 있고 css의 animation 효과를 정의하는 것만 이해를 하면 의외로 간단하게 해결이 될 수 있습니다.

이에 필요한 기본적으로 알아야 할 부분들에 대해 소개해 봅니다.

1. 화면에 내용 표시

웹 화면에 표시될 텍스트들을 우선 원하는 곳에 놓습니다. 저는 Impreza 테마의 페이지 빌더를 써서 테스트용 페이지에 이렇게 구성을 했습니다.

텍스트를 감쌀 wrapper 요소를 하나 두고, 그 안에 두 문장을 차례대로 놓았습니다. (wrapper를 만들고 문장을 넣는 이유는 잠시 후 설명하겠습니다.)

이렇게 구성하고 페이지를 열어 보면 아래와 같이 표시됩니다. 화면 요소들을 둔 순서대로 공간을 가지고 표시됩니다.

2. 글자를 같은 위치에 놓기

1,2번 글자가 같은 위치에 있도록 하려면 css의 position 속성을 이용하면 됩니다.

두 번째 문장이 담긴 text 요소에 css 스타일을 아래와 같이 적으면 두 문장이 겹쳐집니다.

position: absolute;
left: 0;
top: 0;

이때 위, 왼쪽 0의 위치를 어디로 잡을지 기준이 있어야겠지요. 이를 위해서 텍스트들을 감싸는 wrapper 요소를 두었던 것으로 여기에는 아래와 같이 위치의 기준점이 되는 css 정의를 합니다. (wrapper의 공간을 기준점으로 설정)

position: relative;

Impreza 테마의 경우 요소의 css를 디자인 옵션에서 대부분 편집할 수 있어서 이렇게 설정하면 되고, 혹 이런 게 없다면 따로 위의 css를 직접 적어서 적용해도 됩니다.

wrapper가 그 안에 있는 요소들의 기준이 되고, 거기서 위에서 그리고 왼쪽에서 0이 되는 지점에 글자를 위치시키면 이제 이렇게 표시가 됩니다.

3. 글자가 깜빡이는 애니메이션 만들기

css로도 애니메이션을 만들 수 있습니다.

주요 방법은 이렇습니다.

@keyframes animation-name { ... }

우선 키프레임 정의를 통해 원하는 동작을 만든 다음,

.element { animation: animation-name; }

element라는 이름의 클래스를 가진 요소에 애니메이션으로 키프레임으로 정의한 동작을 표시하도록 함.

글자가 등장했다가 숨겨지는 애니메이션을 저는 이렇게 정의했습니다.

@keyframes flickerAnimation {
    0%   { opacity:0; }
    5%   { opacity:1; }
    45% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:0; }
}

50%가 될 때까지 투명 -> 불투명 -> 투명으로 바뀌고, 50%에서 100%까지는 투명을 유지합니다. 이걸 영구적으로 동작시키면 글자가 계속 보였다 안 보였다를 반복할 겁니다. 지금은 문장이 2개이므로 50%를 기준으로 했지만 개수가 늘어나면 보이는 구간을 조정하면 되겠습니다.

끝으로 각 문장에 총 10초간 애니메이션을 작동시키는데 하나는 바로 시작하고, 하나는 5초 지연했다가 시작을 하면 서로 전환되는 효과가 나올 수 있겠습니다. 두번째 글자들은 처음에는 투명 상태여야 하므로 초기 상태 opacity를 0으로 설정합니다.

#main-title-1 {
    animation: flickerAnimation 10s infinite;
}
#main-title-2 {opacity:0;}
#main-title-2 {
    animation: flickerAnimation 10s infinite;
    animation-delay: 5s;
}

적용한 모습 > https://gsap.oksdev.tk/simple-text-replacement-effect-with-css/