문서 작성의 필요성에 대한 문제를 이해하려면...
작업복 또는 특수 개인 보호 복은 특수 의류 및...
이 페이지에서 이 조합을 사용하는 가장 간단한 예를 조금 더 아래에서 볼 수 있습니다. 가장 흥미로운 점은 이 아름다운(스크롤 애니메이션)이 jQuery 없이 작동한다는 것입니다. 이 스크립트에는 모든 문이 열려 있는 것으로 나타났습니다... 그리고 예를 들어 아래로 스크롤하십시오... 더 대담하게...
이제 스크롤링 애니메이션이 매우 인기를 얻고 있으며 성공적인 인터넷 기업가의 판매 사이트에서 이러한 효과를 자주 볼 수 있다는 것을 자신있게 말씀드릴 수 있습니다. 이러한 "트릭"은 사이트에 매우 활기를 불어넣고 방문자의 관심을 해당 사이트에 집중하는 데 도움이 됩니다. 중요한 점, 가장 먼저 주목받고 싶은 것.
스크롤 애니메이션: 조합"WOW.js" 및 "Animate.css"
워드프레스에서...
* 애니메이션을 반복하려면 페이지를 새로고침하세요.
설정하는 방법?1 단계
시작하려면 이 두 파일(“WOW.js” 및 “Animate.css”)을 다운로드하세요.
업데이트됨(2019년 7월 25일):
와우.min.js v1.2.1 | animate.min.css v3.7.2
2 단계
사이트의 루트 폴더에 “wow-animation” 폴더를 넣으세요. 물론 파일의 올바른 경로를 지정하기만 하면 어디에나 배치할 수 있습니다. 이 폴더를 루트 폴더인 index.html에 배치하는 것이 좋습니다. WordPress인 경우 원하는 위치에 폴더를 배치하세요. (가장 중요한 것은 올바른 경로를 나타내는 것입니다).
3단계
우리는 다음 줄을 넣었습니다:
* 당연히 파일의 올바른 경로를 나타냅니다. WordPress에 설치하는 경우 다음을 지정하는 것이 좋습니다. 전체 경로, 즉. httpS://YourDomain 등으로 시작합니다. 파일이 올바르게 연결되었는지 확인하려면 URL을 복사하여 주소 표시줄에 입력하고 "Enter"를 누르세요. 이해할 수 없는 코드가 포함된 파일이 열리면 모든 것이 정상입니다 :)
4단계
페이지 맨 아래에 다음 줄을 배치하세요.
* 또한 파일의 올바른 경로를 지정하고 브라우저에서 확인하십시오.
특정 정보6단계
고급 설정. 기능 추가:
data-wow-duration : 애니메이션 지속 시간을 변경합니다.
data-wow-delay : 애니메이션이 시작되기 전 지연;
data-wow-offset : 애니메이션이 시작되기 전의 거리(브라우저 창 하단 기준)
data-wow-iteration : 애니메이션을 "너무나 많이" 반복합니다.
안녕하세요. 제가 이미 글을 썼다는 점을 상기시켜 드리겠습니다. 하지만 이것들은 단지 기본 원리들. 이제 하나의 animate.css 파일에 미리 만들어진 애니메이션 속성 세트에 익숙해지는 것이 좋습니다. 이것은 생성기가 아니라 널리 사용되는 모든 브라우저에서 매우 올바르게 작동하는 라이브러리입니다. 그리고 이러한 예를 볼 수 있습니다.
Animate.css 연결웹 사이트의 이미지, 텍스트 또는 버튼의 CSS 애니메이션을 만들고 Javascript를 사용하지 않고 이 모든 것을 구현하려면 위에서 이미 언급한 파일 하나를 표준 방식으로 연결하기만 하면 됩니다. head 태그 사이에.
이것이 객체의 애니메이션 속성이 작성되는 방식입니다. , 애니메이션이 필수이며 타다는 효과 중 하나입니다. 하지만 우리에게는 주기 자체가 필요하며 이제 그렇게 할 것입니다. 이는 새 클래스를 생성하고 해당 클래스 또는 기존 클래스에 특수 속성을 할당하여 수행할 수 있습니다.
반복 애니메이션 Animate.css| .new ( 애니메이션 반복 횟수 : 무한 ; ) |
New(애니메이션 반복 횟수: 무한;)
제가 여기서 설명하려는 내용을 더욱 명확하게 설명하기 위해 실제 예를 통해 어떻게 작동하는지 명확하게 보여주는 이 비디오를 시청하고 스타일 자체도 다운로드하세요.
점점 더 많은 랜딩 페이지나 프로모션 페이지에서 다양한 애니메이션 효과를 찾을 수 있습니다. 결국 그들은 페이지를 더 흥미롭고 매력적으로 만듭니다.
기본적으로 이러한 효과는 일부 이벤트(요소를 클릭하거나 마우스로 가리키기) 또는 페이지를 스크롤하는 순간에 설정됩니다. 페이지를 스크롤하는 동안 이러한 사이트를 접한 적이 있을 것 같습니다. 다양한 요소부드럽고 아름답게 나타납니다.
이전에는 이러한 효과를 구현하려면 JS만 사용해야 했지만 개발이 멈추지 않고 CSS3가 출시되면서 이러한 효과를 모두 구현할 수 있게 되었습니다.
이번 강의에서는 animate.css라는 매우 흥미로운 도구를 소개하겠습니다. 이것은 이미 만들어진 CSS 스타일 시트로, 50가지가 넘는 다양한 효과를 갖고 있으며 이러한 모든 효과는 CSS3에서 구현됩니다.
이를 사용하려면 필요한 요소에 대해 특정 클래스를 설정하기만 하면 이 요소에 애니메이션 효과가 적용됩니다. 앞서 말했듯이 이 애니메이션은 CSS3에서 구현되므로 이러한 효과는 모든 최신 브라우저에서 작동합니다.
이제 animate.css를 자세히 살펴보겠습니다.
기본 HTML 마크업비디오 튜토리얼 보기
- 되튐
- 플래시
- 맥박
- 고무줄
- 떨림
- 그네
- 동요
- 바운스인
- 바운스인다운
- 왼쪽으로 바운스
- 오른쪽으로 바운스
- 바운스인업
- 바운스아웃
- 바운스아웃다운
- 바운스아웃왼쪽
- 바운스아웃오른쪽
- 바운스아웃업
- 점점 뚜렷해지다
- 페이드인다운
- 페이드인다운빅
- 페이드인왼쪽
- 페이드인왼쪽큰
- 페이드인오른쪽
- 페이드인오른쪽큰
- 페이드인업
- 페이드인업빅
- 사라지다
- 페이드아웃다운
- fadeOut아래로큰
- 페이드아웃왼쪽
- 페이드아웃왼쪽큰
- 페이드아웃오른쪽
- fadeOut오른쪽큰
- 페이드아웃업
- fadeOutUp큰
- 플립인X
- 플립인Y
- 플립아웃X
- 플립아웃Y
- 라이트스피드인
- lightSpeedOut
- 회전
- 회전아래로왼쪽으로
- 회전아래로오른쪽
- 왼쪽으로 회전
- 회전위로오른쪽
- 회전아웃
- 회전밖으로아래로왼쪽
- 회전밖으로아래로오른쪽
- 회전밖위로왼쪽
- 회전밖위로오른쪽
- 돌쩌귀
- 롤인
- 발표
- 확대
- 확대/축소
- 확대왼쪽
- 확대/축소오른쪽
- 확대/축소
- 축소
- 축소 축소
- 확대/축소왼쪽
- 확대/축소오른쪽
- 줌아웃업
- 슬라이드인다운
- 슬라이드인왼쪽
- 슬라이드인오른쪽
- 슬라이드인업
- 슬라이드아웃다운
- 슬라이드아웃왼쪽
- 슬라이드아웃오른쪽
- 슬라이드아웃업
위에서 설명한 대로 모든 작업을 수행했다면 페이지가 로드될 때 이 효과가 요소에 적용되고 그게 전부이며 애니메이션은 거기서 끝납니다.
하지만 애니메이션을 멈추지 않고 계속하려면 어떻게 해야 할까요?
이렇게 하려면 애니메이션 요소에 다른 클래스를 추가하면 됩니다. 이 수업은 무한합니다.
표제
요소 위로 마우스를 가져갈 때 애니메이션 설정
비디오 튜토리얼 보기
이전에 설명한 모든 예제에서는 페이지가 로드된 직후에 애니메이션을 설정했지만 실제로는 이것이 거의 필요하지 않습니다. 실제로 요소 위로 마우스를 가져갈 때 애니메이션을 설정해야 하는 경우가 매우 많으므로 아래에서는 이 구현을 위해 미리 만들어진 코드를 제공했습니다.
HTMLHTML 마크업이 약간 변경되었으므로 이제 특정 애니메이션을 담당하는 클래스를 지정할 필요가 없습니다. 특수한 데이터 효과 속성에 이 값을 지정해야 합니다. 이것에 주의를 기울이십시오. 이것은 매우 중요합니다.
표제
다음은 마우스 오버 이벤트를 모니터링하는 작은 jQuery 코드입니다. 이 이벤트가 발생하면 스크립트는 해당 클래스에 클래스를 추가합니다. 해당 값은 데이터 효과 속성에 지정됩니다. 이 클래스를 추가하면 애니메이션이 적용됩니다.
함수 animate(elem)( var effect = elem.data("효과"); if(!효과 || elem.hasClass(효과)) return false; elem.addClass(효과); setTimeout(function())( elem. RemoveClass (효과); ), 1000); ) $(".animated").mouseenter(function() ( animate($(this)); ));
당연히 이 스크립트를 원하는 대로 변경할 수 있습니다. 예를 들어 마우스 입력 이벤트를 클릭하여 변경할 수 있습니다. 그러면 이 경우 요소 위에 마우스를 올려놓는 순간이 아니라 클릭하는 순간 애니메이션이 발생합니다.
페이지를 스크롤할 때 애니메이션 만들기비디오 튜토리얼 보기
마지막으로 animate.css 를 쉽게 사용할 수 있는 또 다른 예를 살펴보겠습니다.
즉, 페이지를 스크롤할 때 요소에 대해 다양한 효과를 설정할 수 있습니다. 이러한 목적을 위해서는 animate.css 외에도 특별한 wow.js 스크립트도 필요합니다.
CSS3 애니메이션은 웹사이트를 동적으로 만듭니다. 웹페이지에 생기를 불어넣어 사용자 경험을 향상시킵니다. CSS3 전환과 달리 애니메이션 생성은 키프레임을 기반으로 하므로 지정된 시간 동안 효과를 자동으로 재생 및 반복할 수 있을 뿐만 아니라 루프 내에서 애니메이션을 중지할 수도 있습니다.
CSS3 애니메이션은 거의 모든 HTML 요소뿐만 아니라:before 및:after 의사 요소에 사용할 수 있습니다. 애니메이션 속성 목록이 페이지에 제공됩니다. 애니메이션을 만들 때 잊지 마세요. 가능한 문제일부 속성을 변경하려면 많은 리소스가 필요하기 때문에 성능이 저하됩니다.
CSS 애니메이션 소개 브라우저 지원즉: 10.0
파이어폭스: 16.0, 5.0 -moz-
크롬: 43.0, 4.0 -웹킷-
사파리: 4.0 -웹킷-
오페라: 12.1, 12.0 -o-
iOS 사파리: 9, 7.1 -webkit-
오페라 미니: -
안드로이드 브라우저: 44, 4.1 -webkit-
Android용 Chrome: 44
키프레임은 애니메이션의 다양한 지점에서 애니메이션 속성 값을 지정하는 데 사용됩니다. 키프레임은 하나의 애니메이션 주기 동작을 정의합니다. 애니메이션은 0번 이상 반복될 수 있습니다.
키프레임은 다음과 같이 정의된 @keyframes 규칙을 사용하여 지정됩니다.
@keyframes 애니메이션 이름(규칙 목록)
애니메이션 만들기는 @keyframes 규칙의 키프레임 설정으로 시작됩니다. 프레임은 어떤 단계에서 어떤 속성이 애니메이션화될지 결정합니다. 각 프레임에는 하나 이상의 속성 및 값 쌍에 대한 하나 이상의 선언 블록이 포함될 수 있습니다. @keyframes 규칙에는 규칙과 요소의 선언 블록을 연결하는 요소의 애니메이션 이름이 포함됩니다.
@keyframes 그림자( (text-shadow: 0 0 3px black;) 50% (text-shadow: 0 0 30px black;) ~ (text-shadow: 0 0 3px black;) )
키프레임은 from 및 to 키워드(0% 및 100% 값에 해당)를 사용하거나 원하는 만큼 지정할 수 있는 백분율을 사용하여 생성됩니다. 키워드와 백분율 포인트를 결합할 수도 있습니다. 프레임의 속성과 값이 동일한 경우 하나의 선언으로 결합할 수 있습니다.
@keyframes move ( from, to ( 위쪽: 0; 왼쪽: 0; ) 25%, 75% (상단: 100%;) 50% (상단: 50%;) )
0% 또는 100% 프레임이 지정되지 않은 경우 사용자의 브라우저는 애니메이션 속성의 계산된(원래 설정된) 값을 사용하여 해당 프레임을 생성합니다.
동일한 이름으로 여러 개의 @keyframes 규칙이 정의된 경우 문서 순서의 마지막 규칙이 실행되고 이전 규칙은 모두 무시됩니다.
@keyframes 규칙을 선언한 후 애니메이션 속성에서 이를 참조할 수 있습니다.
H1(글꼴 크기: 3.5em; 색상: darkmagenta; 애니메이션: 섀도우 2s 무한이지아웃; )
브라우저의 결과를 예측할 수 없으므로 숫자가 아닌 값에 애니메이션을 적용하는 것은 권장되지 않습니다(드물게 예외 있음). 또한 속성 값 color: pink 및 color: #ffffff , width: auto 및 width: 100px 또는 border-radius: 0 및 border-와 같이 중간점이 없는 속성 값에 대해 키프레임을 생성해서는 안 됩니다. radius: 50%(이 경우 border-radius: 0%를 지정하는 것이 정확합니다).
1.1. 키프레임의 타이밍 기능키프레임 스타일 규칙은 애니메이션이 다음 키프레임으로 이동할 때 사용해야 하는 임시 기능을 선언할 수도 있습니다.
예
@keyframes 바운스( from ( top: 100px; animation-timing-function: easy-out; ) 25% ( top: 50px; animation-timing-function: easy-in; ) 50% ( top: 100px; animation-timing- 기능: 이즈 아웃; ) 75%( 상단: 75px; 애니메이션 타이밍 기능: 이즈 인; ) ~ ( 상단: 100px; ) )
"bounce"라는 애니메이션에 대해 5개의 키프레임이 지정됩니다. 첫 번째와 두 번째 키프레임 사이(즉, 0%에서 25% 사이)에는 여유 기능이 사용됩니다. 두 번째와 세 번째 키프레임 사이(즉, 25%~50%)에는 부드러운 가속 기능이 사용됩니다. 등등. 요소는 페이지에서 50px 위로 이동하며, 페이지에 도달하면 속도가 느려집니다. 최고점, 그리고 100px로 떨어지면서 가속됩니다. 애니메이션의 후반부도 비슷하게 동작하지만 요소가 페이지 위로 25px만 이동합니다.
~ 또는 100% 키프레임에 지정된 시간 함수는 무시됩니다.
2. 애니메이션 이름 : animation-name 속성animation-name 속성은 요소에 적용할 애니메이션 목록을 지정합니다. 각 이름은 애니메이션의 속성 값을 제공하는 규칙에서 키프레임을 선택하는 데 사용됩니다. 이름이 규칙의 키프레임과 일치하지 않거나 애니메이션을 적용할 속성이 없거나 애니메이션 이름이 없으면 애니메이션이 실행되지 않습니다.
여러 애니메이션이 동일한 속성을 변경하려고 하면 이름 목록 끝에 가장 가까운 애니메이션이 실행됩니다.
애니메이션 이름은 대소문자를 구분하며 허용되지 않습니다. 예어없음 . 애니메이션의 본질을 반영한 이름을 사용하는 것이 좋으며, 하이픈 - 또는 밑줄 문자 _ 와 함께 나열된 단어를 하나 이상 사용할 수 있습니다.
재산은 상속되지 않습니다.
통사론
애니메이션 이름: 없음; 애니메이션 이름: test-01; 애니메이션 이름: -sliding; 애니메이션 이름: 수직으로 이동; 애니메이션 이름: test2; 애니메이션 이름: test3, move4; 애니메이션 이름: 초기; 애니메이션 이름: 상속;
3. 애니메이션 기간: animation-duration 속성animation-duration 속성은 하나의 애니메이션 주기의 지속 시간을 지정합니다. 초 s 또는 밀리초 ms 단위로 지정됩니다. 요소에 대해 둘 이상의 애니메이션이 지정된 경우 다음을 설정할 수 있습니다. 다른 시간각각에 대해 쉼표로 구분된 값을 나열합니다.
재산은 상속되지 않습니다.
통사론
애니메이션 지속 시간: 0.5초; 애니메이션 지속 시간: 200ms; 애니메이션 지속 시간: 2초, 10초; 애니메이션 지속 시간: 15초, 30초, 200ms;
4. 타이밍 함수: animation-timing-function 속성animation-timing-function 속성은 각 키프레임 쌍 사이에서 애니메이션이 진행되는 방식을 설명합니다. 애니메이션 지연 시간 동안에는 기능이 적용되지 않습니다.
재산은 상속되지 않습니다.
| 값: | |
| 선의 | 선형 기능, 애니메이션은 속도 변동 없이 전체 시간 동안 균일하게 발생합니다. |
| 쉬움 | 기본 기능은 애니메이션이 느리게 시작하고, 빠르게 가속되고, 마지막에는 느려지는 것입니다. 큐빅 베지어(0.25,0.1,0.25,1) 과 일치합니다. |
| 이지인 | 애니메이션이 천천히 시작되었다가 마지막에는 부드럽게 속도가 빨라집니다. 큐빅-베지어(0.42,0,1,1) 과 일치합니다. |
| 완화 | 애니메이션이 빠르게 시작되고 마지막에는 천천히 느려집니다. 큐빅-베지어(0,0,0.58,1) 에 해당합니다. |
| 쉽게 꺼낼 수 있다 | 애니메이션은 천천히 시작해서 천천히 끝납니다. 큐빅 베지어(0.42,0,0.58,1) 과 일치합니다. |
| 3차 베지어(x1, y1, x2, y2) | 0에서 1까지 값을 수동으로 설정할 수 있습니다. 애니메이션 변경 속도의 궤적을 만들 수 있습니다. |
| 단계적으로 시작하다 | 단계별 애니메이션을 설정하여 애니메이션을 세그먼트로 나누고 각 단계가 시작될 때 변경 사항이 발생합니다. steps(1, start) 에서 평가됩니다. |
| 단계 끝 | 단계별 애니메이션으로, 각 단계가 끝날 때마다 변경 사항이 발생합니다. steps(1, end) 에서 평가됩니다. |
| steps(단계수, 단계 위치) | 두 개의 매개변수를 취하는 단계 시간 함수입니다. 첫 번째 매개변수는 함수의 간격 수를 지정합니다. 두 번째 인수가 점프 없음이 아닌 경우 이는 0보다 큰 양의 정수여야 하며, 이 경우 1보다 큰 양의 정수여야 합니다. 선택적인 두 번째 매개변수는 다음 값 중 하나를 사용하여 애니메이션이 시작되는 지점인 단계 위치를 지정합니다.
start 값을 사용하면 애니메이션이 각 단계의 시작 부분에서 시작되고 end 값은 지연과 함께 각 단계가 끝날 때 시작됩니다. 지연 시간은 애니메이션 시간을 단계 수로 나누어 계산합니다. 두 번째 매개변수를 지정하지 않으면 기본값인 end가 사용됩니다. |
| 초기의 | |
| 상속하다 |
통사론
애니메이션 타이밍 기능: 용이성; 애니메이션 타이밍 기능: easy-in; 애니메이션 타이밍 기능: 완화; 애니메이션 타이밍 기능: easy-in-out; 애니메이션 타이밍 기능: 선형; 애니메이션 타이밍 기능: 단계 시작; 애니메이션 타이밍 기능: 단계 종료; 애니메이션 타이밍 기능: 입방 베지어(0.1, 0.7, 1.0, 0.1); 애니메이션 타이밍 기능: 단계(4, 끝); 애니메이션 타이밍 기능: 용이함, 단계 시작, 3차 베지어(0.1, 0.7, 1.0, 0.1); 애니메이션 타이밍 기능: 초기; 애니메이션 타이밍 기능: 상속;
단계별 애니메이션을 사용하여 인쇄되는 텍스트나 로딩 표시 등의 흥미로운 효과를 만들 수 있습니다.
5. 애니메이션 반복: animation-iteration-count 속성animation-iteration-count 속성은 애니메이션 루프가 재생되는 횟수를 지정합니다. 시작 값이 1이면 애니메이션이 처음부터 끝까지 한 번 재생된다는 의미입니다. 이 속성은 애니메이션 방향 속성의 대체 값과 함께 사용되는 경우가 많습니다. 역순으로대체주기에서.
재산은 상속되지 않습니다.
통사론
애니메이션 반복 횟수: 무한; 애니메이션 반복 횟수: 3; 애니메이션 반복 횟수: 2.5; 애니메이션 반복 횟수: 2, 0, 무한;
6. 애니메이션 방향 : animation-direction 속성animation-direction 속성은 애니메이션이 일부 또는 전체 루프에서 역순으로 재생되어야 하는지 여부를 결정합니다. 애니메이션이 역순으로 재생되면 타이밍 기능도 반전됩니다. 예를 들어, 역순으로 재생되면 easy-in 함수는easing-out처럼 동작합니다.
재산은 상속되지 않습니다.
| 값: | |
| 정상 | 모든 애니메이션은 지정된 대로 재생을 반복합니다. 기본값. |
| 뒤집다 | 모든 애니메이션은 정의된 방향과 반대 방향으로 재생을 반복합니다. |
| 번갈아 하는 | 애니메이션 루프의 각 홀수 반복은 정상 방향으로 재생되고, 각 짝수 반복은 반대 방향으로 재생됩니다. |
| 대체-역방향 | 애니메이션 루프의 모든 홀수 반복은 반대 방향으로 재생되고, 모든 짝수 반복은 정상 방향으로 재생됩니다. |
| 초기의 | 속성 값을 기본값으로 설정합니다. |
| 상속하다 | 상위 요소의 속성 값을 상속합니다. |
애니메이션 루프 반복이 짝수인지 홀수인지 확인하려면 반복 횟수가 1부터 시작됩니다.
통사론
애니메이션 방향: 정상; 애니메이션 방향: 역방향; 애니메이션 방향: 대체; 애니메이션 방향: 대체-역방향; 애니메이션 방향: 정상, 역방향; 애니메이션 방향: 대체, 역방향, 일반; 애니메이션 방향: 초기; 애니메이션 방향: 상속;
7. 애니메이션 재생: animation-play-state 속성animation-play-state 속성은 애니메이션이 시작될지 일시정지할지를 결정합니다. JavaScript 스크립트에서 이 속성을 사용하면 루프 내에서 애니메이션을 중지할 수 있습니다. 객체 위로 마우스를 가져가면 애니메이션을 중지할 수도 있습니다(state:hover ).
재산은 상속되지 않습니다.
통사론
애니메이션 재생 상태: 실행 중; 애니메이션 재생 상태: 일시 중지됨; 애니메이션 재생 상태: 일시 중지됨, 실행 중, 실행 중; 애니메이션 재생 상태: 초기; 애니메이션 재생 상태: 상속;
8. 애니메이션 지연: animation-delay 속성animation-delay 속성은 애니메이션이 시작되는 시기를 결정합니다. 초 s 또는 밀리초 ms 단위로 지정됩니다.
재산은 상속되지 않습니다.
통사론
애니메이션 지연: 5초; 애니메이션 지연: 3초, 10ms;
9. 애니메이션 재생 전후의 요소 상태 : animation-fill-mode 속성animation-fill-mode 속성은 실행 시간 외에 애니메이션이 적용할 값을 결정합니다. 애니메이션이 완료되면 요소는 원래 스타일로 돌아갑니다. 기본적으로 애니메이션은 animation-name 및 animation-delay 요소에 애니메이션이 적용될 때 속성 값에 영향을 미치지 않습니다. 또한 기본적으로 애니메이션은 완료된 후 animation-duration 및 animation-iteration-count 속성 값에 영향을 주지 않습니다. animation-fill-mode 속성은 이 동작을 재정의할 수 있습니다.
재산은 상속되지 않습니다.
| 값: | |
| 없음 | 기본값. 요소의 상태는 애니메이션 재생 전후에 변경되지 않습니다. |
| 앞으로 | 애니메이션이 종료되면(animation-iteration-count 값에 따라 결정됨) 애니메이션은 애니메이션이 종료되는 시점의 속성 값을 적용합니다. animation-iteration-count가 0보다 큰 경우 마지막으로 완료된 애니메이션 반복의 끝 값이 적용됩니다(다음 반복 시작 값이 아님). animation-iteration-count가 0이면 적용되는 값은 첫 번째 반복을 시작하는 값이 됩니다(animation-fill-mode:backs;와 동일). |
| 뒤로 | animation-delay 로 정의된 기간 동안 애니메이션은 키프레임에 정의된 속성 값을 적용하여 애니메이션의 첫 번째 반복을 시작합니다. 이는 from 키프레임 값(애니메이션 방향: 일반 또는 애니메이션 방향: 대체인 경우) 또는 to 키프레임 값(애니메이션 방향: 역방향 또는 애니메이션 방향: 대체인 경우)입니다. |
| 둘 다 | 애니메이션이 시작되기 전에 첫 번째 키프레임에 요소를 남겨두고(양수 지연 값 무시) 마지막 애니메이션이 끝날 때까지 마지막 프레임에서 지연할 수 있습니다. |
통사론
애니메이션 채우기 모드: 없음; 애니메이션 채우기 모드: 앞으로; 애니메이션 채우기 모드: 뒤로; 애니메이션 채우기 모드: 둘 다; animation-fill-mode: 없음, 뒤로; animation-fill-mode: 둘 다, 앞으로, 없음;
10. 애니메이션 약어: 애니메이션 속성모든 애니메이션 재생 매개변수는 animation이라는 하나의 속성으로 결합할 수 있으며 공백으로 구분하여 나열합니다.
애니메이션: 애니메이션 이름 애니메이션 지속 시간 애니메이션 타이밍 기능 애니메이션 지연 애니메이션 반복 횟수 애니메이션 방향;
애니메이션을 재생하려면 animation-name 및 animation-duration 두 가지 속성만 지정하면 충분하며 나머지 속성은 기본값을 사용합니다. 속성이 나열되는 순서는 중요하지 않습니다. 유일한 점은 애니메이션 기간의 실행 시간이 애니메이션 지연 지연보다 먼저 와야 한다는 것입니다.
11. 다양한 애니메이션하나의 요소에 대해 여러 애니메이션을 설정하고 해당 이름을 쉼표로 구분하여 나열할 수 있습니다.
Div(애니메이션: 섀도우 1s easy-in-out 0.5s 교대로 이동, 5s 선형 2s 이동;)
오늘은 두 개의 스크립트를 사용하여 웹 사이트 개체를 쉽고 빠르게 애니메이션하는 방법을 알아 보겠습니다. 이 기사의 제목에서 위에서 볼 수 있는 이름입니다. 하지만 먼저 각각의 용도를 말씀드리겠습니다.
WOW.js는 페이지 스크롤의 특정 단계에서 애니메이션을 활성화할 수 있는 작은 라이브러리입니다. 무게가 매우 가볍고 완전히 독립적입니다. 즉, jQuery나 다른 몬스터를 연결할 필요가 없습니다.
Animate.CSS는 애니메이션 자체를 직접 담당하는 스크립트입니다. 사실 wow.js는 바로 이 것에서 애니메이션을 가져옵니다. 그리고 수십 개가 있습니다.
animate.css의 단점은 애니메이션과 관련된 일반적인 CSS 규칙 세트일 뿐이라는 것입니다. 즉, 페이지가 로드된 직후에 재생됩니다. 그리고 애니메이션 요소가 "첫 번째" 화면에 표시되지 않으면 방문자는 이 모든 아름다움을 볼 수 없습니다. 결국 페이지를 올바른 위치로 되감기 전에 재생될 것입니다.
그리고 첫 번째 노트(다음 단락의 링크)에서는 이러한 일이 발생하지 않도록 하기 위해 페이지 스크롤의 특정 단계에서 애니메이션이 재생되도록 js 코드를 작성하는 방법과 위치를 보여 주었습니다. 굉장히 불편했지만 매력이 있었어요
따라서 시작하기 전에 ""강의를 시청하는 것이 좋습니다. 나는 이미 당신이 사이트에서 애니메이션을 사용하는 방법을 알고 있다고 가정할 것이기 때문입니다. 동시에, 당신은 즉시 어떻게 이해하게 될 것입니다. Wow.js를 사용하면 작업이 더 쉬워집니다. 결국, 이제 우리는 js 코드를 작성하고 탐구할 필요가 없습니다. 플러그를 꽂고 잊어버리세요
이상으로 소개가 끝났습니다. 이제 "몸"에 더 가까이 다가가 보겠습니다. 이 주제에 대한 비디오 강의를 녹화했지만 시청하기 전에 실제로 강의를 끝까지 완료하면 무엇을 얻을 수 있는지 보여주고 싶습니다. 말하자면, 더 많은 동기 부여를 위해
글쎄, 봤어? 이것이 바로 당신이 자신의 손으로 "놀리는" 것입니다. 이제 비디오를 보러 달려가세요.
강의: WOW.js와 Animate.CSS - 함께하면 더욱 재미있습니다!도전!
WOW.js 설정 다운로드 및 연결 방법.1단계. 공식 사이트에서 wow.js 및 animate.css 스크립트를 다운로드하고(위 동영상 아래 링크 참조) 프로젝트 폴더에 배치하세요.
2 단계. 태그의 페이지에 있는 간단한 HTML 코드로 스크립트를 연결합니다.
Master-CSS 채널 구독자의 참고 사항:
스크립트 태그는 항상 본문 끝에 추가되어야 합니다. 이는 페이지를 빠르게 로드하기 위해 수행됩니다. 브라우저가 스크립트 태그에 도달할 때마다 스크립트가 로드될 때까지 전체 사이트의 로드 및 렌더링이 정지됩니다. 그렇기 때문에 우리는 종종 다음과 같은 사이트를 보게 됩니다. 오랫동안그냥 하얀 시트. 또한 스크립트를 본문의 끝에 배치하면 본문이 준비되어 스크립트가 확실히 작동한다는 것을 보장할 수 있습니다.사이트의 스크립트 연결에 대한 자세한 설명을 제공한 Roman Belyaev에게 감사드립니다.
3단계. 연결 후 즉시 다음 코드를 추가하여 스크립트를 초기화해야 합니다.
새로운 WOW().init();
이 시점에서 연결이 종료되고 두 번째 단계가 시작됩니다.
WOW.js 사용1단계. 애니메이션을 적용할 요소를 선택하고 class="wow"를 추가합니다. 아래 코드에서는 예제 이미지를 사용하여 이를 보여주었습니다.
2단계. 애니메이션을 선택하고 이를 개에 추가 클래스와 함께 추가합니다.
3단계. 필요한 경우 특수 데이터 속성을 사용하여 애니메이션 설정을 추가합니다.
위 코드에서는 이미지가 화면 하단에서 200픽셀을 지나갈 때 애니메이션이 트리거되도록 지정했습니다. 그러나 동시에 0.5초의 지연이 발생하고 애니메이션 자체에는 정확히 2초가 소요됩니다.
속성을 통한 WOW.js 애니메이션 설정 data-wow-duration – 애니메이션 재생 시간 지정 data-wow-delay – 애니메이션 재생 전 지연 설정 data-wow-offset – 요소가 특정 수의 픽셀을 통과할 때 애니메이션 활성화 화면 하단 data-wow-iteration – 애니메이션 반복 횟수이러한 속성은 필수가 아닙니다. 지정하지 않으면 브라우저 창을 스크롤하는 동안 요소가 화면에 나타나는 즉시 기본적으로 애니메이션이 재생됩니다.
글쎄요. 아마 그게 전부일 것입니다. 궁금한 점은 댓글로 질문해주세요;)
