콘텐츠
Love Lost by Canada의 Jam3은 잃어버린 사랑에 대한 지속적인 감정에 대한 진정한 마음을 담은 아름답고 어둡고 모바일 용 양방향시입니다. 웹 사이트 레이아웃은 애니메이션을 지원하는 GSAP 라이브러리와 함께 HTML5를 사용하여 제작되었습니다. 가장 시각적으로 눈에 띄는 기능 중 하나는 Love Lost의시를 생생하게 표현하는 애니메이션 3D 텍스트입니다.
- 인터랙티브 한 3D 타이포그래피 효과 만들기
정말 인상적이며 매력적인 사용자 경험을 만들기 위해 자신의 작업에 통합하는 것은 어렵지 않습니다. 방법은 다음과 같습니다.
나만의 매력적인 사이트를 만들고 싶습니까? 웹 사이트 빌더 도구를 사용 해보고 올바른 웹 호스팅 서비스를 선택하여 원활하게 운영하세요.
01. HTML 문서 시작
첫 번째 단계는 HTML 문서의 구조를 정의하는 것입니다. 여기에는 헤드 및 본문 섹션이 포함 된 문서를 시작하는 HTML 컨테이너가 포함됩니다. 헤드 섹션은 주로 외부 CSS 파일을로드하는 데 사용되지만 본문 섹션은 2 단계에서 만든 표시되는 페이지 콘텐츠를 저장합니다.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet"type = "text / css"href = "styles.css"/> / head> body> * * * STEP 2 여기 / body> / html>
02. 보이는 HTML 콘텐츠
보이는 HTML 콘텐츠는 보이는 텍스트를 포함하는 아티클 컨테이너로 구성됩니다. 기사 컨테이너의 중요한 부분은 시각 효과를 적용하기 위해 CSS에서 참조하는 '데이터 애니메이션'속성입니다. 기사 내부의 텍스트는 콘텐츠가 페이지의 기본 제목임을 나타 내기 위해 h1 태그로 만들어집니다.
article data-animate = "move in"> h1> 안녕하세요! / h1> / article>
03. CSS 시작
’styles.css’라는 새 파일을 만듭니다. 첫 번째 지침 세트는 페이지의 HTML 컨테이너와 본문에 검은 색 배경이 있고 테두리 간격이 보이지 않도록 설정합니다. 흰색은 상속 할 페이지의 모든 하위 요소에 대한 기본 텍스트 색상으로도 설정됩니다. 텍스트의 기본 검은 색을 피하면 콘텐츠가 보이지 않는 것처럼 보입니다.
html, body {배경 : # 000; 패딩 : 0; 여백 : 0; 색상 : #fff; }
04. 애니메이션 컨테이너
’data-animate’속성으로 참조되는 콘텐츠 컨테이너에는 특정 스타일이 적용됩니다. 크기는 vw 및 vh 측정 단위를 사용하여 화면의 전체 크기와 일치하도록 설정되고 약간 회전됩니다. 'moveIn'이라는 애니메이션이 적용되어 20 초 동안 지속되고 무한 반복됩니다.
[data-animate = "move in"] {position : relative; 폭 : 100vw; 높이 : 100vh; 불투명도 : 1; 애니메이션 : moveIn 20s infinite; 텍스트 정렬 : 가운데; 변환 : rotate (20deg); }
05. 애니메이션 시작
이전 단계에서 참조한 'moveIn'애니메이션에는 @keyframes를 사용한 정의가 필요합니다. 애니메이션의 0 %에서 시작하는 첫 번째 프레임은 기본 글꼴 크기, 텍스트 위치 및 보이는 그림자를 설정합니다. 또한 항목은 초기에 보이지 않도록 불투명도 0으로 설정됩니다. 보이지 않게 표시됩니다.
@keyframes moveIn {0 % {font-size : 1em; 왼쪽 : 0; 불투명도 : 0; 텍스트 그림자 : 없음; } * * * 여기 6 단계}
06.보기로 애니메이션
다음 프레임은 애니메이션을 통해 10 %에 배치됩니다. 이 프레임은 불투명도를 완전히 볼 수 있도록 설정하여 텍스트가 점차적으로 표시되도록합니다.또한 여러 그림자가 파란색과 감소하는 색상 값으로 추가되어 텍스트에 3D 깊이의 환상을 부여합니다.
10 % {불투명도 : 1; 텍스트 그림자 : .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * 7 단계 여기
07. 애니메이션 마무리
최종 프레임은 80 %와 애니메이션의 끝에서 발생합니다. 이들은 글꼴 크기를 늘리고 요소를 왼쪽으로 이동시키는 역할을합니다. 텍스트 그림자에 애니메이션 효과를 줄 수있는 새로운 설정도 적용되고 프레임 80 %에서 100 %로 텍스트가 페이드 아웃됩니다.
80 % {글꼴 크기 : 8em; 왼쪽 : -8em; 불투명도 : 1; } 100 % {글꼴 크기 : 10em; 왼쪽 : -10em; 불투명도 : 0; 텍스트 그림자 : .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
참고 : 어떤 프로젝트를 시작하든 대처할 수있는 클라우드 스토리지가 있어야합니다 (가이드가 도움이 될 것입니다).
이 기사는 원래 크리에이티브 웹 디자인 잡지 Web Designer 273 호에 게시되었습니다. 여기서 273 호 구매 또는 여기에서 Web Designer 구독.
