CSS에서 글리치 텍스트 및 이미지 효과를 만드는 방법

이 튜토리얼에서는 글리치 텍스트 효과를 만드는 방법을 보여줍니다. 특수 효과와 애니메이션은 웹 사이트를 돋보이게하여 사용자가 주요 콘텐츠를 읽기 전에 즉각적인 영향을 미칠 수 있습니다. 홈페이지 방문자를 놀라게해야한다면 CSS 만 사용하여 다양한 효과를 만들 수 있습니다.

여기서 글리치 텍스트를 만드는 과정은 실제로 애니메이션 소프트웨어로 작업하는 것과 매우 유사합니다. 특정 지점에 키 프레임을 배치하고이를 사용하여 동작을 제어합니다. CSS의 키 프레임과 다른 점은 코드에서 애니메이션 타임 라인에 대한 백분율로 작성된다는 것입니다. 이것은 들리는 것만 큼 어렵지 않습니다. 한번 시도해 보면 좋은 결과를 얻는 것이 비교적 간단합니다.



튜토리얼에서는 이미지가 페이지에로드되면 로딩 화면을 제거하기 위해 약간의 JavaScript가 사용됩니다. 그러나 여기서 주요 초점은 CSS 애니메이션 . 우리는 또한 사용할 것입니다 CSS 그리드 화면에 요소를 배치합니다.



01. 설정

시작하려면 스타트 폴더에서 프로젝트 파일 코드 편집기 내부. 열기 index.html 베어 본 스켈레톤 HTML 페이지 만 포함하는 페이지. 헤드 섹션에서는 디자인이 올바르게 표시되도록 글꼴을 연결해야합니다. 글꼴에 대한 스타일 링크를 추가하십시오.

CSS의 기본 레이아웃은 site.css 글리치 효과와 관련된 모든 중요한 부분은 나중에 추가 될 예정입니다. 문서의 헤드 섹션에서 CSS를 연결하여 페이지의 기본 디자인이 제자리에 있도록합니다.



03. 로딩 화면 설정

브랜드 아이콘이있는 검은 색 홈 화면

이 화면은 페이지가로드되는 동안 표시됩니다.

이제 페이지의 본문 섹션으로 이동하십시오. 여기에는 브라우저에 표시되는 페이지의 모든 보이는 요소가 포함됩니다. 여기에 페이지의 모든 것이로드 될 때까지 '프리 로더 화면'을 유지할 div를 추가합니다. 페이지 중앙에 로고가 표시됩니다.

04. 헤더 바 추가

제목과 간단한 설명이 표시된 검은 색 홈 화면



글리치 텍스트 효과가 추가되기 전 디자인의 기본 요소

화면 상단에는 왼쪽에 텍스트 제목과 함께 사이트의 SVG 로고가 포함 된 작은 헤더가 있습니다. 그런 다음 화면 오른쪽에 인라인 메뉴가 표시되어 쉽게 탐색 할 수 있습니다. 여기의 코드 구조는 페이지에 해당 요소를 추가합니다.

HackerCon

  • Home
  • News
  • Contact
  • About

05. 이미지 추가

이제 다음 섹션에는 동일한 이미지의 여러 버전이 포함되어 있습니다. 글리 치트 수업. 이것이 할 일은 글리치 효과를주기 위해 이러한 이미지의 다른 부분을 다른 시간에 켜고 끄는 것입니다. 다음은 이미지 상단에 표시되는 텍스트입니다.

HackerCon

Add a description



06. 글리치 텍스트 효과 트리거

본문 내용의 끝에 JavaScript 태그가 배치됩니다. 이 모든 작업은 페이지가로드되었는지 확인한 다음 로딩 화면을 제거하는 것입니다. 그러면 관련 글리치 섹션에 영향을주는 클래스를 본문에 추가하여 글리치 효과 애니메이션이 시작됩니다.



var loader = document.getElementById('loader'); window.addEventListener('load', function(event) { loader.classList. remove('loading'); loader.classList.add('loaded'); document.body.classList. add('imgloaded'); });

07. CSS 변수 설정

지금 페이지를 저장하고 site.css CSS 폴더의 파일. 여기에 이미 코드가 있지만 다른 코드 바로 위에 아래 표시된 변수를 추가합니다. 이러한 CSS 변수는 나중에 디자인에서 사용할 색상과 크기를 포함합니다.

body { --color-text: #fff; --color-bg: #000; --color-link: #555; --color-link-hover: #98fadf; --color-info: #f7cfb9; --glitch-width: 100vw; --glitch-height: 100vh; --gap-horizontal: 10px; --gap-vertical: 5px; --time-anim: 4s; --delay-anim: 2s;

08. 변수 설정 실험

보시다시피, 이러한 변수는 body 태그에 할당되어 본질적으로 모든 보이는 페이지 인 본문 내부 페이지의 모든 태그에서 사용할 수 있습니다. 여기에서 다른 이미지에 대한 투명도 및 혼합 모드가 설정됩니다. 5 개의 이미지가 있으며 이러한 설정을 실험하여 다른 결과를 얻을 수 있습니다.



huion inspiroy q11k 무선 그래픽 그리기 태블릿
--blend-mode-1: none; --blend-mode-2: overlay; --blend-mode-3: none; --blend-mode-4: none; --blend-mode-5: overlay; --blend-color-1: transparent; --blend-color-2: #7d948e; --blend-color-3: transparent; --blend-color-4: transparent; --blend-color-5: #af4949; }

09. 이미지로 화면 채우기

코드를 깔끔하게 유지하려면 CSS 파일에서 9 ~ 13 단계를 표시하는 주석으로 스크롤하여이 코드를 추가합니다. 여기서 글리치 코드는 div 전체 화면을 채우는 모든 이미지를 포함하고 화면의 왼쪽 상단에 절대 위치합니다. CSS 변수에서 너비와 높이를 가져옵니다.

.glitch { position: absolute; top: 0; left: 0; width: var(--glitch-width); height: var(--glitch-height); overflow: hidden; }

10. 이미지 위치 조정

전체 화면 사진이 추가 된 홈페이지

글리치 효과는 동일한 이미지의 재배치 된 사본을 사용합니다.

글리치 효과는 동일한 이미지의 복사본으로 구성되므로이 코드는 div 페이지에서 화면보다 약간 크게 만듭니다. 더 큰 크기를 고려하여 상단과 왼쪽에 배치 한 다음 이미지를 배경에 배치하여 이미지를 채 웁니다.

.glitchit { position: absolute; top: calc(-1 * var(--gap-vertical)); left: calc(-1 * var(--gap-horizontal)); width: calc(100% + var(--gap-horizontal) * 2); height: calc(100% + var(--gap-vertical) * 2); background: url(../img/main.jpg) no-repeat 50% 0; background-color: var(--blend-color-1); background-size: cover; transform: translate3d(0, 0, 0); background-blend-mode: var(--blend- mode-1); }

11. 이미지 선택

여기의 코드는 첫 번째 이미지를 제외한 모든 이미지를 선택합니다. 첫 번째 이미지는 페이지에 유지되고 다른 이미지는 키 프레임 애니메이션으로 상단에서 켜고 끌 수 있기 때문입니다. 이러한 상단 이미지는 불투명도가 0으로 설정되어 필요할 때까지 숨겨집니다.

.glitchit:nth-child(n+2) { opacity: 0; } .imgloaded .glitchit:nth-child(n+2) { animation-duration: var(--time-anim); animation-delay: var(--delay-anim); animation-timing-function: linear; animation-iteration-count: infinite; }

12. 이미지 2와 3 조정

두 번째 및 세 번째 이미지는이 코드에서 애니메이션으로 설정됩니다. 각각의 블렌드 및 색상 모드가 제공되므로 다르게 표시됩니다. 여기서 가장 큰 차이점은 혼합을 위해 따라야 할 다른 키 프레임 애니메이션이 제공된다는 것입니다.

up the effects. .imgloaded .glitchit:nth-child(2) { background-color: var(--blend-color-2); background-blend-mode: var(--blend- mode-2); animation-name: glitch-1; } .imgloaded .glitchit:nth-child(3) { background-color: var(--blend-color-3); background-blend-mode: var(--blend- mode-3); animation-name: glitch-2; }

13. 이미지 4와 5 조정

이번에는 다음 두 이미지가 다른 이미지와 매우 가깝게 설정되었지만 이번에도 이러한 이미지를 표시 할 다른 혼합 모드와 애니메이션이 있습니다. 이러한 애니메이션 중 일부에 대한 키 프레임은 아직 생성되지 않았으며 다음에 올 것입니다.

.imgloaded .glitchit:nth-child(4) { background-color: var(--blend-color-4); background-blend-mode: var(--blend- mode-4); animation-name: glitch-3; } .imgloaded .glitchit:nth-child(5) { background-color: var(--blend-color-5); background-blend-mode: var(--blend- mode-5); animation-name: glitch-flash; }

14. 첫 번째 키 프레임 세트 추가

키 프레임은 이미지의 다른 섹션을 잡고 잘라내어 해당 부분 만 표시되도록합니다. 불투명도는 다른 시간에 켜지고 꺼 지므로 이미지의 일부가 다른 애니메이션에 다른 시간에 표시되어 글리치 효과를 만듭니다. 이미지가 x 축에서 약간 이동합니다.

@keyframes glitch-1 { 0% { opacity: 1; transform: translate3d(var(--gap- horizontal), 0, 0); clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); } 2% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }

15. 클립 경로 사용

클립 경로는 직사각형을 취하므로 처음 두 숫자는 왼쪽 상단, 오른쪽 상단에 있습니다. 오른쪽 하단과 왼쪽 하단이 이어집니다. 이 숫자를 이동하면 이미지의 다른 부분이 다른 지점에서 표시됩니다.

4% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); } 6% { clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); } 8% { clip-path: polygon(0 33%, 100% 33%, 1 00% 33%, 0 33%); } 10% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }

16. 움직임을 가속화하십시오

여러 키 프레임에서 클립 경로를 너무 빨리 이동하면 효과가 쌓이고 이미지의 다른 부분이 불규칙하게 깜박이는 것처럼 보입니다. 더 많은 이미지 레이어도이 작업을 수행하고 있으며 효과는 그것이하는 일에서 매우 잘 작동합니다.

12% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 14% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }16% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }18% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }20% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }

17. 이미지 결함 마무리

22 % 후에는 애니메이션이 다시 재생 될 때까지 이미지가 꺼집니다. 이것으로 결함 -1 효과 결함 -2글리치 -3 이미 코드에 제공되고 있습니다. 다음 섹션에서는 이미지 상단에있는 텍스트도 글리치합니다.

21.9% { opacity: 1; transform: translate3d(var(--gap- horizontal), 0, 0); } 22%, 100% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0); } }

18. 글리치 텍스트를 만드는 방법

홈페이지에서 진행중인 글리치 효과를 표시하기 위해 잘린 텍스트

텍스트는 여전히 읽을 수 있도록 잠깐만 잘립니다.

이 코드는 텍스트를 거꾸로 뒤집은 다음 클립하여 극적으로 움직이는 점프 효과를 제공한다는 점을 제외하면 이전 코드와 매우 유사하게 작동합니다. 그 후 클립 경로는 키 프레임을 통한 빠른 이동과 함께 더 작은 섹션 만 표시합니다.

자신에 대한 콜라주 만드는 법
@keyframes glitch-text { 0% { transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); } 2% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); } 4% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }

19. 더 많은 클리핑

이 코드 섹션에서는 클리핑 패스의 모양을 빠르게 변경하여 효과가 계속됩니다. 그만큼 클립 경로 또한 함께 제공 -웹킷- 접두사이지만 간결함을 위해 여기에있는 코드에는 표시되지 않았습니다. 작성 당시 Clip Path는 현재 IE, Edge 또는 Opera Mini에서 지원되지 않지만 다른 모든 브라우저에서는 지원됩니다.

5% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 6% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); } 7% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); } 8% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }

20. 텍스트를 뒤로 뒤집기

최종 텍스트 글리치 애니메이션에서 텍스트는 원래 위치로 되돌아 가고 키 프레임이 다시 돌아올 때까지 기다립니다. 보시다시피 모든 애니메이션이 10 %에서 발생하고 90 %의 시간 동안 휴면 상태를 유지하므로 텍스트에 적절한 양의 고통을주고 읽을 수 있습니다.

9% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); } 9.9% { transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1); } 10%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } }

21. 빠른 플래시 만들기

글리치 효과가 진행중인 홈페이지

글리치 효과는 몇 초마다 실행되어 고민스러운 느낌을줍니다.

마지막 단계는 하나의 이미지에 글리치 플래시 애니메이션이 제공되고이 일련의 키 프레임은 원본의 오프셋을 제공하기 위해 짧은 기간 동안 20 %의 불투명도로 화면에 이미지를 배치하는 것입니다. 지금 CSS 파일을 저장하면 콘텐츠가 브라우저에로드되면 효과가 재생되기 시작합니다.

@keyframes glitch-flash { 0%, 5% { opacity: 0.2; transform: translate3d(var(--gap- horizontal), var(--gap-vertical), 0); } 5.5%, 100% { opacity: 0; transform: translate3d(0, 0, 0); } }

이 기사는 원래 크리에이티브 웹 디자인 잡지 인 Web Designer에 게재되었습니다. 281 호 구매 또는 구독 .

더 읽어보기 :