콘텐츠
- 01. 페이지 본문 태그에 코드 추가
- 02. 디스플레이 스타일링
- 03. 글리치 표시
- 04. 다 잡아
- 05. 글리치 실행
- 06. 정상으로 돌아 가기
- 지금 Generate New York 티켓 받기
주의를 끌고 유지하는 가장 좋은 방법은 외부에서 재능을 보여주는 웹 사이트 레이아웃을 만드는 것입니다 (괜찮은 웹 사이트 빌더가 빌드를 도울 수 있습니다). 우크라이나 웹 에이전시 Vintage의 사이트는 유리 입자로 만든 맥동하는 로고와 호버링시 활성화되는 멋진 글리치의 눈길을 사로 잡는 조합으로 VR 디자인 포트폴리오에 여러분을 끌어들이는 좋은 예입니다.
- 웹 애니메이션 : 코드 필요 없음
간헐적으로 사용되는 간단한 글리치 효과는 사이트에 시각적 인 흥미를 더할 수 있으며 놀랍도록 쉽게 구현할 수 있습니다. 방법은 다음과 같습니다.
복잡한 웹 사이트를 염두에두고 계십니까? 웹 호스팅이 작업에 맞는지 확인하십시오. 그리고 디자인 파일을 클라우드 스토리지에 안전하게 보관하십시오.
파일 다운로드 이 튜토리얼을 위해.
01. 페이지 본문 태그에 코드 추가
간단한 글리치 효과를 만드는 방법은 매우 다양합니다. 여기에서는 텍스트 상단에 애니메이션 GIF를 배치하여 디스플레이에서 켜고 끌 것입니다. 먼저이 코드를 페이지의 본문 태그에 추가합니다.
div id = "holder"onmouseover = "glitch ()"> div id = "glitch"> / div> 웹 br> 제품-br> ION / div>
02. 디스플레이 스타일링
콘텐츠는 Work Sans라는 Google Fonts의 특정 서체를 사용합니다. 거기에서 링크를 잡고 머리 부분에 배치하십시오. 그런 다음 스타일 태그 또는 별도의 CSS 파일에 CSS를 추가합니다. 페이지는 흰색 텍스트와 함께 검은 색으로 만들어지고 홀더는 텍스트에 맞게 스타일이 지정됩니다.
본문 {배경 : # 000; font-family :’Work Sans’, sans-serif; 색상 : #fff; } #holder {글꼴 크기 : 6em; 너비 : 500px; 높이 : 300px; 여백 : 0 자동; 위치 : 상대; }
03. 글리치 표시
글리치 효과는 텍스트 위에 직접 배치되는 배경 이미지가됩니다. 여기서 중요한 부분은 사용자가 텍스트와 상호 작용할 때까지 표시되지 않도록 불투명도를 0으로 줄여서 보이지 않게 만드는 것입니다.
#glitch {위치 : 절대; 상단 : 0; 왼쪽 : 0; Z- 색인 : 10; 너비 : 100 %; 높이 : 100 %; 배경 : url (glitch.gif); 불투명도 : 0; }
04. 다 잡아
본문 섹션 끝에 스크립트 태그를 추가하고 문서의 '글리치'div에 대한 캐시 된 참조를 만듭니다. 그런 다음 'over'라는 변수가 false로 설정됩니다. 사용자가 텍스트 위로 이동할 때 켜고 끕니다.
var gl = document.getElementById ( "glitch"); var over = false;
05. 글리치 실행
글리치 함수는 마우스가 텍스트 위로 이동할 때 호출됩니다. 글리치가 실행 중이 아니면 글리치 가시성이 켜지고 1.5 초 후에 꺼집니다.이를 실험하고 난수를 사용하여 예측 불가능하게 만들 수 있습니다.
function glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. 정상으로 돌아 가기
글리치 효과는 사용자에게 너무 귀찮을 수 있으므로 계속 유지되어서는 안되지만 상호 작용 요소로서 잘 작동합니다. 여기서 코드는 불투명도를 다시 0으로 재설정하여 텍스트 상단에 표시되지 않도록합니다.
function normal () {gl.style.opacity = "0"; }
지금 Generate New York 티켓 받기
3 일간의 웹 디자인 이벤트 Generate New York이 돌아 왔습니다. 2018 년 4 월 25 일부터 27 일까지 진행되는 헤드 라인 연사로는 SuperFriendly의 Dan Mall, 웹 애니메이션 컨설턴트 Val Head, 풀 스택 JavaScript 개발자 Wes Bos 등이 있습니다. 하루 종일 진행되는 워크숍과 소중한 네트워킹 기회도 있습니다. 놓치지 마세요. 지금 Generate 티켓을 받으세요.
이 기사는 원래 크리에이티브 웹 디자인 잡지 Web Designer의 270 호에 게시되었습니다. 여기서 270 호 구매 또는 여기에서 Web Designer 구독.
