CSS3 애니메이션으로 고급 마키 (marquee)만들기
오늘 우리는 “큰 천막” 다시 한번. 우리는 이전에이 게시물에 대해 다루었습니다. -webkit-marquee 우리는이 주제를 조금 더 다룰 것입니다..
이 게시물에서 우리는 천막과 같은 효과는 CSS3 애니메이션을 사용합니다. 그렇게하면 우리가 얻을 수없는 더 많은 기능을 추가 할 수있게 될 것입니다. -webkit-marquee.
이미 CSS3 애니메이션 모듈에 익숙하지 않다면이 문서를 계속 진행하기 전에 다음 참고 자료를 살펴 보는 것이 좋습니다.
- CSS3 애니메이션 - W3School
- CSS 애니메이션 - Mozilla Dev. 회로망
또한 현재 CSS3 Animation은 Firefox 8 이상, Chrome 12 이상, Safari 5.0 이상에서만 작동하며-모즈- 과 -웹킷-). 그러나 W3C의 공식 버전을 접두어없이 사용하면 불필요한 코드로이 기사를 겹쳐 쓰는 것을 피할 수 있습니다..
마키 문제 해결
선택 윤곽의 문제 중 하나는 텍스트가 계속 움직이는 것입니다. 이 동작은 읽기에 지장이며 텍스트를 읽기가 어렵습니다. 이번에는 우리만의 차임새 버전을 만들어서 사용자 친화적 인 것으로 만들려고 노력할 것입니다. 예를 들어; 텍스트를 계속 움직이지 않고, 우리는 그것이 완전히 보일 때 그것을 멈출 것이고, 그래서 사용자는 잠시 동안 텍스트를 읽을 수있다..
스토리 보드 (일종의)
로고, 삽화 또는 웹 사이트와 같은 모든 창의적 디자인은 일반적으로 스케치로 시작합니다. 애니메이션 제작 분야에서는 스토리 보드를 사용합니다. 코딩을 시작하기 전에 먼저 일종의 스토리 보드, 우리가 애니메이션을 시각화하는 것을 돕기 위해.
위의 스토리 보드에서 볼 수 있듯이 두 줄의 텍스트 만 표시 할 예정이며 둘 다 오른쪽에서 왼쪽으로 순차적으로 이동합니다.
우리의 스토리 보드는 실제 애니메이션 영화의 스토리 보드만큼 복잡하지 않지만 핵심은 다음과 같습니다..
HTML 마크 업
우리의 애니메이션은 단순하기 때문에 HTML 마크 업은 다음과 같이 간단합니다.
플러그인없이 WordPress 관련 게시물을 추가하는 방법
작업으로 보관 용 파일 자동화하기
기본 스타일
애니메이션 작업을 시작하기 전에 기본 스타일을 추가해 보겠습니다. 먼저 배경색을 추가하여 HTML 요소.
html background : url ( '... /images/skewed_print.png');
다음으로 브라우저 창 중앙에 선택 윤곽을 배치하고 내부 그림자, 배경색 및 테두리와 같은 세부 정보를 추가합니다..
.선택 윤곽 width : 500px; 높이 : 50px; 여백 : 25px 자동; 오버플로 : 숨김; 위치 : 상대적; 국경 : 1px 고체 # 000; 여백 : 25px 자동; 배경색 : # 222; -webkit-border-radius : 5px; border-radius : 5px; -webkit-box-shadow : 삽입 0px 2px 2px rgba (0, 0, 0, 0.5), 0px 1px 0px rgba (250, 250, 250, .2); 상자 그림자 : 삽입 0px 2px 2px rgba (0, 0, 0, 0.5), 0px 1px 0px rgba (250, 250, 250, .2);
그런 다음 텍스트 (이 경우에는 단락 태그 안에 포함)를 배치합니다. 순수한 position은 요소가 붕괴되도록 할 것이고 width의 요소를 100 % 부모의 너비를 커버하기 위해.
.선택 윤곽 p 위치 : 절대; font-family : Tahoma, Arial, sans-serif; 너비 : 100 %; 높이 : 100 %; margin : 0; 선 높이 : 50px; 텍스트 정렬 : 가운데; color : #fff; 텍스트 그림자 : 1px 1px 0px # 000000; 필터 : dropshadow (color = # 000000, offx = 1, offy = 1);
잠시 동안 결과를 살펴 봅시다..
이 시점에서, 우리는 우리가 필요로하는 모든 기본 스타일을 완성했습니다. 당신은 자유롭게 스타일을 추가하거나 개인화 할 수 있습니다. 그러나 튜토리얼이 끝날 때까지 지정된 선택 윤곽 치수 (높이 및 너비)를 유지하는 것이 좋습니다..
애니메이션
즉, 애니메이션은 움직이는 물체를 표현한 것입니다. 각 이동은 시간 프레임에서 정의됩니다. 따라서 우리가 애니메이션 작업을 할 때, 우리는 주로 시각. 우리는 다음과 같은 문제를 고려합니다.
- 오브젝트가 언제 움직일 것인가??
- 객체가 한 지점에서 다른 지점으로 이동하는 데 얼마나 오래 걸립니까??
- 주어진 시점에서 물체가 언제 그리고 얼마나 오래 있어야 하는가??
CSS3 Animation에서 시각 에 정의 할 수 있습니다. @keyframe 통사론. 그러나이 섹션으로 넘어 가기 전에 먼저 선택 윤곽 텍스트의 시작 위치를 지정해 보겠습니다..
우리는 텍스트가 오른쪽에서부터 시작하여 오른쪽으로 옮길 것을 계획했습니다. 이제 CSS3 변환 속성을 사용하여 오른쪽에 배치합니다..
.marquee p transform : translateX (100 %);
기억하십시오. 100 % 우리가 단락 요소에 대해 정의한 것은 부모와 동일했다. 폭. 그래서, 같은 것이 또한 여기에 적용될 것입니다; 단락 요소는 번역 된 오른쪽에 100 % 이 예에서는 500px.
키 프레임
그만큼 @keyframe 문법은 일부 사람들에게는 다소 수수께끼 일 수 있으므로 여기서는 간단한 시각적 가이드를 작성하여 @keyframe 통사론.
더 큰 버전을 보려면 여기를 클릭하십시오..
전체 애니메이션은 20 초 지속되는 2 개의 시퀀스로 분할된다 10 초 마다.
첫 번째 순서에서 첫 번째 텍스트는 오른쪽에서 즉시 슬라이드 인 상태로 표시되며 사용자가 텍스트를 읽을 수 있도록 일시적으로 표시되며 두 번째 텍스트는 숨겨진 상태로 유지됩니다. 두 번째 시퀀스에서 첫 번째 문자 텍스트는 왼쪽으로 슬라이드 아웃되고 두 번째 텍스트는 오른쪽에서 오른쪽으로 슬라이드됩니다..
애니메이션 실행에 필요한 모든 키 프레임 코드는 다음과 같습니다..
@keyframes left-one 0 % transform : translateX (100 %); 10 % transform : translateX (0); 40 % transform : translateX (0); 50 % transform : translateX (-100 %); 100 % transform : translateX (-100 %); @keyframes left-two 0 % transform : translateX (100 %); 50 % transform : translateX (100 %); 60 % transform : translateX (0); 90 % transform : translateX (0); 100 % transform : translateX (-100 %);
그만큼 왼손잡이 키 프레임은 애니메이션의 첫 번째 시퀀스를 정의하고 왼쪽 두 키 프레임은 두 번째 시퀀스를 정의합니다..
애니메이션을 요소에 적용하기
애니메이션이 작동하려면 요소에 애니메이션을 적용하는 것을 잊지 마십시오. 첫 번째 시퀀스는 첫 번째 텍스트 또는이 경우 첫 번째 단락에 적용되고 두 번째 시퀀스는 두 번째 단락에도 적용됩니다.
.marquee p : nth-child (1) animation : left-one 20s ease 무한; .marquee p : nth-child (2) animation : left-two 20s ease infinite;
우리 모두는 우리의 애니메이션으로 끝난다. 브라우저에서 결과를 봅시다..
- 데모
- 소스 다운로드
보너스
이전 게시물에서했던 것처럼 텍스트를 위에서 아래로 또는 그 반대로 이동하도록 텍스트를 정의 할 수도 있습니다. 여기에 그것을하는 방법입니다; 위의 애니메이션 코드를 아래의 코드로 대체하십시오. 텍스트를 아래쪽으로 이동:
.marquee p 변형 : 번역 Y (-100 %); @ 키 프레임 아래쪽 0 % transform : translateY (-100 %); 10 % transform : translateY (0); 40 % transform : translateY (0); 50 % transform : translateY (100 %); 100 % 변형 : 번역 Y (100 %); @keyframes 아래로 두 0 % transform : translateY (-100 %); 50 % 변형 : 번역 Y (-100 %); 60 % transform : translateY (0); 90 % transform : translateY (0); 100 % 변형 : 번역 Y (100 %);
우리가 X 축 에 Y 축 모든 것을 뒤집어서 번역 음의 값을 양수로, 그 반대의 경우.
우리도 가지고있다 애니메이션으로 이름 변경 에 아래로 과 아래로 두, 우리는 단락 요소에 애니메이션 이름을 다시 적용해야합니다..
.marquee p : nth-child (1) 애니메이션 : 다운 -100 년대 무한대; .marquee p : nth-child (2) 애니메이션 : 아래쪽 두 20 초 무한;
또는 반대 방향으로 이동하려는 경우 아래에서 위로. 다음은 신청해야하는 모든 코드입니다.
.marquee.up p transform : 번역 Y (100 %); .marquee.up p : nth-child (1) 애니메이션 : up-one 20s ease 무한; .marquee.up p : nth-child (2) 애니메이션 : 최대 두 20s 무한; @keyframes up-one 0 % transform : translateY (100 %); 10 % transform : translateY (0); 40 % transform : translateY (0); 50 % 변형 : 번역 Y (-100 %); 100 % 변형 : 번역 Y (-100 %); @keyframes up-two 0 % transform : translateY (100 %); 50 % transform : translateY (100 %); 60 % transform : translateY (0); 90 % transform : translateY (0); 100 % 변형 : 번역 Y (-100 %);
- 데모
- 소스 다운로드
결론
현재의 브라우저 지원이 부족함에도 불구하고, CSS3 Animation이 제대로 수행된다면,이 예제에서와 같이 미래의 많은 유용성 문제를 의심 할 여지없이 해결할 수있을 것입니다. 최신 브라우저 용 짧은 애니메이션 만 필요한 경우 CSS3 Animation을 사용하면 jQuery 스크립트를로드하는 것보다 낫습니다..
마지막으로이 기사가 일부 사람들에게는 압도적 일 수 있음을 알고 있습니다.이 기사와 관련하여 질문이 있으면 아래 의견란에 자유롭게 게시하십시오..
