이 조합을 사용하는 가장 간단한 예는 이 페이지에서 조금 더 아래에서 볼 수 있습니다. 가장 흥미로운 점은 이 아름다움(스크롤링 애니메이션)이 작동한다는 것입니다. jQuery 없이. 이 스크립트에 대한 모든 문이 열려 있음이 밝혀졌습니다... 그리고 예를 들어 아래로 스크롤... 더 대담하게...
이제 스크롤 애니메이션이 매우 인기를 얻고 있으며 성공적인 인터넷 기업가의 판매 사이트에서 이러한 효과를 자주 볼 수 있다는 것을 자신 있게 말할 수 있습니다. 이러한 "속임수"는 사이트에 활기를 불어넣고 방문자의 관심을 해당 사이트에 집중시키는 데 도움이 됩니다. 중요 포인트가장 먼저 보여주고 싶은 것.
스크롤 애니메이션: 조합
« WOW.js" 그리고 " 애니메이트.css» 워드프레스에서...
* 애니메이션을 반복하려면 페이지를 새로고침하세요.
어떻게 설정하나요?
1 단계 시작하려면 이 두 파일("WOW.js" 및 "Animate.css")을 다운로드하십시오.
업데이트됨(2019년 7월 25일): wow.min.js v1.2.1| animate.min.css v3.7.2 2 단계 사이트의 루트 폴더에 "wow-animation" 폴더를 배치합니다. 물론 파일에 대한 올바른 경로를 지정하는 한 아무 곳에나 넣을 수 있습니다. 여전히 이 폴더를 루트 폴더인 index.html에 두는 것이 좋습니다. WordPress 인 경우 원하는 위치에 폴더를 넣으십시오. (가장 중요한 것은 올바른 경로를 지정하는 것입니다).
3단계 우리는
이 라인:
"와우 애니메이션/animate.min.css">
* 당연히 파일의 올바른 경로를 지정합니다. WordPress에 설치하는 경우 다음을 지정하는 것이 좋습니다. 전체 경로, 즉. httpS://YourDomain 등으로 시작합니다. 파일이 올바르게 연결되었는지 확인하려면 URL을 복사하고 주소 표시줄에 입력한 다음 "Enter"를 누르십시오. 이해할 수 없는 코드가 있는 파일이 열리면 모든 것이 정상입니다 🙂
4단계 전에 페이지 맨 아래에 배치
이 줄:
<스크립트 src="wow-animation/wow.min.js" >
* 또한 파일의 올바른 경로를 지정하고 브라우저에서 확인하십시오.
<div 클래스 ="wow fadeInRight">특정 정보사업부 >
6단계 고급 설정. 기능 추가: 데이터 와우 기간: 애니메이션 지속 시간을 변경합니다. 데이터 와우 지연: 애니메이션 시작 전 지연; 데이터 와우 오프셋: 애니메이션이 시작되기 전의 거리(브라우저 창 하단 기준). 데이터 와우 반복: "너무 많이" 애니메이션을 반복합니다.
<div 클래스 ="와우 slideInLeft" 데이터 와우 기간 ="3.5초" 데이터 와우 지연 ="1초" 데이터 와우 오프셋 ="120" >특정 정보사업부 >
<h1 class ="wow slideInLeft" data-wow-duration ="3.5s" data-wow-delay ="1s" data-wow-offset ="120" >특정 정보h1 >
이 컬렉션에는 최고 품질의 CSS 칩이 포함되어 있습니다. 여기에서 순수 CSS로 거의 모든 것을 할 수 있음을 증명하려는 유명한 레이아웃 디자이너와 디자이너의 다양하고 놀라운 데모와 기술을 찾을 수 있습니다. 또한 여기에서 그러한 창작물을 만드는 방법을 자세히 설명하는 여러 레슨을 찾을 수 있습니다. 이 컬렉션이 도움이 되었기를 바랍니다.
CSS 3D 구름
이 데모에서는 다음을 만들고 편집할 수 있습니다. 기발한 구름 3D로. 이러한 CSS 클라우드는 웹 기술의 가능성이 거의 무한하다는 것을 우리에게 분명히 보여줍니다.
순수한 CSS 로고
순수 CSS로만 제작된 로고 예시입니다. 이미지는 창작에 사용되지 않았습니다. 그것은 단지 무언가입니다.
CSS 애니메이션이 있는 알파벳
알파벳에 CSS를 사용하는 훌륭하고 예술적인 예
사이트의 3D 탐색
웹 사이트를 위한 단순하지만 매우 스타일리시한 내비게이션 바는 물론 CSS3만으로 제작되었습니다. 이미지와 스크립트가 없습니다.
CSS에서 Google의 기념일 로고
CSS로 만든 Google 검색 엔진의 많은 기념일 로고 중 하나입니다. 이것은 CSS 애니메이션을 잘 사용한 좋은 예입니다.
슬라이더
잘 만들어진 고품질의 사진용 슬라이더입니다. 데모의 4가지 예.
이중 애니메이션 링
그다지 크지 않은 CSS 코드가 포함된 아름다운 애니메이션 및 다채로운 링
CSS로 흐리게 처리
특히 순수한 CSS로 만들어졌기 때문에 매우 필요한 필터인 것 같습니다. 흐리게 처리하면 특정 지점에 사용자의 주의를 끌 수 있습니다.
Flexbox에 대한 완벽한 가이드
이 문서는 반응형 Flexbox 상자에 관한 것입니다. 기사는 영어로 되어 있지만 이 블록에 대해 완전히 알려줍니다.
다채롭고 움직이는 CSS3 메뉴
아이콘이 있는 사이트의 아름다운 드롭다운 메뉴입니다. 큰 장점은 완전히 CSS로 만들어 졌다는 것입니다.
CSS 필터
이미지에 CSS 필터를 적용하는 방법에 대해 설명하는 영어로 된 고품질 자료입니다.
CSS 양식
수많은 예제와 함께 CSS 양식에 대한 게시
CSS 진행률 표시줄
순수한 CSS와 애니메이션으로 세련된 진행률 표시줄을 만드는 방법에 대한 자습서입니다. 예제를 보고 소스 코드를 다운로드할 수도 있습니다.
애니메이션 - Animate.css
오늘날 웹에서 가장 인기 있는 CSS 애니메이션 프로젝트입니다. 아마도 가장 단순하고 고품질이며 무료 일 것입니다.
여보세요. 내가 이미 썼다는 것을 상기시켜 드리겠습니다. 기본 원리들. 이제 하나의 animate.css 파일에 이미 만들어진 애니메이션 속성 세트에 익숙해질 것을 제안합니다. 이것은 생성기가 아니지만 널리 사용되는 모든 브라우저에서 제대로 작동하는 라이브러리입니다. 여기에서 이러한 예를 볼 수 있습니다.
Animate.css 연결
사이트의 그림, 텍스트 또는 버튼의 CSS 애니메이션을 만들고 Javascript를 사용하지 않고 이 모든 것을 구현하려면 위에서 이미 언급한 파일 하나를 표준 방식으로 포함하기만 하면 됩니다. 헤드 태그 사이.
이것이 개체의 애니메이션 속성이 작성되는 방식입니다. , 애니메이션이 필요하며 tada는 효과 중 하나입니다. 그러나 우리는 주기 자체가 필요하며 이제 우리는 그것을 할 것입니다. 이것은 새 클래스를 생성하고 해당 클래스 또는 기존 클래스에 특수 속성을 할당하여 수행할 수 있습니다.
루프 애니메이션 Animate.css
.new ( animation-iteration-count : 무한 ; )
New(애니메이션 반복 횟수: 무한;)
여기서 설명하려는 내용을 더 명확하게 하기 위해 실제 예제와 함께 어떻게 작동하는지 명확하게 보여 주는 이 비디오를 시청하고 스타일 자체를 다운로드하십시오.
점점 더 많은 랜딩 페이지 또는 프로모션 페이지에서 다양한 애니메이션 효과를 찾을 수 있습니다. 결국 그들은 페이지를 더 흥미롭고 매력적으로 만듭니다.
기본적으로 이러한 효과는 일부 이벤트(요소를 클릭하거나 가리키기) 또는 페이지를 스크롤하는 순간에 설정됩니다. 페이지를 스크롤 할 때 이러한 사이트를 본 것 같습니다. 다양한 요소부드럽고 아름답게 나타납니다.
이전에는 이러한 효과를 구현하려면 JS만 사용해야 했지만 개발이 멈추지 않고 CSS3가 출시되면서 이러한 모든 효과를 JS에서 구현할 수 있습니다.
이 수업에서 우리는 매우 흥미로운 도구에 대해 알게 될 것입니다. animate.css. 이것은 기성품 CSS 스타일 시트로 50가지 이상의 다양한 효과가 있으며 이러한 모든 효과는 CSS3에서 구현됩니다.
이를 사용하려면 필요한 요소에 대해 특정 클래스를 설정하기만 하면 이 요소에 애니메이션 효과가 적용됩니다. 앞서 말했듯이 이 애니메이션은 CSS3에서 구현되므로 이러한 효과는 모든 최신 브라우저에서 작동합니다.
이제 자세히 살펴 보겠습니다. animate.css.
기본 HTML 마크업
비디오 튜토리얼 보기
되튐
플래시
맥박
고무줄
떨림
그네
동요
바운스인
바운스인다운
바운스 인 레프트
오른쪽으로 바운스
바운스인업
바운스 아웃
바운스 아웃 다운
바운스아웃왼쪽
바운스 아웃 오른쪽
바운스아웃업
점점 뚜렷해지다
페이드인다운
fadeInDown큰
페이드 인 레프트
fadeInLeftBig
페이드인라이트
페이드인오른쪽큰
페이드인업
페이드인업빅
사라지다
페이드아웃다운
fadeOutDownBig
페이드아웃왼쪽
fadeOutLeftBig
페이드 아웃 오른쪽
페이드아웃오른쪽큰
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
플립아웃Y
lightSpeedIn
lightSpeedOut
회전
왼쪽 아래로 회전
오른쪽 아래로 회전
왼쪽으로 회전
오른쪽으로 회전
회전
왼쪽 아래로 회전
회전아래쪽오른쪽
회전아웃업왼쪽
RotateOutUpRight
돌쩌귀
롤인
발표
줌인
줌인다운
확대/축소
확대 오른쪽
줌인업
축소
확대 축소
확대/축소 왼쪽
확대/축소 오른쪽
줌아웃업
슬라이드인다운
왼쪽으로 슬라이드
오른쪽으로 슬라이드
슬라이드인업
슬라이드아웃다운
왼쪽으로 슬라이드
슬라이드아웃오른쪽
슬라이드아웃업
끝없는 애니메이션
위에서 설명한대로 모든 작업을 수행했다면 페이지가로드되는 순간이 효과가 요소에 적용되고 그게 다이고 애니메이션이 종료됩니다.
그러나 애니메이션을 멈추지 않고 계속하려면 어떻게 해야 합니까?
이렇게 하려면 애니메이션 요소에 대해 다른 클래스를 추가하기만 하면 됩니다. 이 수업은 무한.
헤더
요소 위로 마우스를 가져갈 때 애니메이션 설정
비디오 튜토리얼 보기
앞에서 설명한 모든 예제는 페이지가 로드된 직후에 애니메이션을 설정하지만 실제로는 거의 필요하지 않습니다. 실제로 요소 위로 마우스를 가져갈 때 애니메이션을 설정해야 하는 경우가 매우 많으므로 아래에 이 구현을 위한 기성 코드를 제공했습니다.
HTML
HTML마크업이 약간 변경되었으므로 이제 특정 애니메이션을 담당하는 클래스를 설정할 필요가 없습니다. 특수 속성에 이 값을 지정해야 합니다. 데이터 효과. 이것은 매우 중요합니다.
헤더
다음은 다음을 위한 작은 코드입니다. jQuery, 요소 위로 마우스 커서를 가져가는 이벤트를 추적하고 이 이벤트가 발생하는 경우 스크립트는 속성에 값이 지정된 클래스를 추가합니다. 데이터 효과. 이 클래스를 추가하면 애니메이션이 적용됩니다.
당연히 이 스크립트를 원하는 대로 변경할 수 있습니다. 예를 들어 이벤트를 변경할 수 있습니다. 마우스엔터에 딸깍 하는 소리. 그러면 이 경우 요소 위로 마우스를 가져가는 순간이 아니라 클릭하는 순간 애니메이션이 발생합니다.
페이지를 스크롤할 때 애니메이션 만들기
비디오 튜토리얼 보기
마지막으로 쉽게 적용할 수 있는 다른 예를 살펴보겠습니다. animate.css.
즉, 페이지를 스크롤할 때 요소에 대해 다른 효과를 설정할 수 있습니다. 이러한 목적에 더하여 animate.css, 우리는 또 다른 특별한 스크립트가 필요합니다 wow.js.
오늘 우리는 두 개의 스크립트를 사용하여 사이트 개체를 빠르고 쉽게 애니메이션하는 방법을 배웁니다. 이 기사의 제목에서 위에서 볼 수 있는 이름입니다. 하지만 먼저 각각의 목적을 말씀드리겠습니다.
WOW.js페이지 스크롤의 특정 단계에서 애니메이션을 활성화할 수 있는 작은 라이브러리입니다. 무게가 매우 적고 완전히 독립적입니다. 즉, jQuery 또는 다른 괴물을 연결할 필요가 없습니다.
애니메이트.CSS- 애니메이션 자체를 직접 담당하는 스크립트. 사실 wow.js는 이것에서 애니메이션을 가져옵니다. 그리고 수십 개가 있습니다.
animate.css의 단점은 단순한 애니메이션 기반 CSS 규칙 집합이라는 것입니다. 즉, 페이지가 로드된 직후에 재생됩니다. 애니메이션 요소가 "첫 번째" 화면에 표시되지 않으면 방문자는 이 모든 아름다움을 볼 수 없습니다. 결국 페이지를 올바른 위치로 되감기 전에 재생됩니다.
그리고 첫 번째 노트(다음 단락의 링크)에서는 이런 일이 발생하지 않도록 페이지 스크롤의 특정 단계에서 애니메이션이 재생되도록 js 코드를 작성하는 방법과 위치를 보여 주었습니다. 매우 불편했지만 강타로 작동했습니다.
따라서 시작하기 전에 ""강의를 시청하는 것이 좋습니다. 이미 사이트에서 애니메이션을 사용하는 방법을 알고 있음을 암시하기 때문입니다. 동시에 방법을 즉시 이해할 것입니다. wow.js는 일을 쉽게 만듭니다. 결국, 이제 js 코드를 작성하고 조사할 필요가 없습니다. 연결하고 잊기
이렇게 소개가 끝났습니다. 이제 "몸"에 더 가까이 가자. 이 주제에 대한 비디오 레슨을 녹화했지만 시청하기 전에 실제로 레슨을 끝까지 진행하면 무엇을 얻을 수 있는지 보여주고 싶습니다. 말하자면 더 많은 동기 부여를 위해
자, 보셨나요? 이것은 당신 자신의 손으로 "zababahat"입니다. 이제 영상을 보기 위해 달려갑니다.
레슨: WOW.js 및 Animate.CSS - 함께하면 더 재미있습니다!
도전!
WOW.js 설정
다운로드 및 연결 방법.
1단계.공식 사이트(비디오 아래 위의 링크 참조)에서 wow.js 및 animate.css 스크립트를 다운로드하여 프로젝트 폴더에 넣습니다.
2단계.태그의 페이지에 있는 간단한 HTML 코드와 스크립트를 연결합니다.
:
Master-CSS 채널 구독자의 참고 사항:
스크립트 태그는 항상 본문 끝에 추가해야 합니다. 이는 페이지 로딩 속도를 높이기 위해 수행됩니다. 브라우저가 스크립트 태그에 도달할 때마다 전체 사이트는 스크립트가 로드될 때까지 로드 및 렌더링을 중지합니다. 이것에서 우리는 종종 사이트를 봅니다. 오랫동안그냥 하얀 시트. 또한 스크립트가 본문 끝에 배치되면 본문이 준비되고 스크립트가 확실히 작동한다는 보장이 있습니다. 사이트의 스크립트 연결에 대한 자세한 설명은 Roman Belyaev에게 감사합니다.
3단계스크립트를 연결한 직후에 다음 코드를 추가하여 스크립트를 초기화해야 합니다.
이것으로 연결이 완료되고 두 번째 단계입니다.
wow.js 사용
1 단계.애니메이션을 적용하려는 요소를 선택하고 여기에 class="wow" 클래스를 추가합니다. 아래 코드에서 예제 그림과 함께 이것을 보여주었습니다.
2 단계애니메이션을 선택하고 강아지에게 추가 클래스로 추가합니다.
3단계필요한 경우 특수 데이터 속성을 사용하여 애니메이션 설정을 추가합니다.
위의 코드에서 이미지가 화면 하단에서 200픽셀을 지날 때 애니메이션이 실행되도록 지정했습니다. 그러나 동시에 0.5초의 지연이 발생하고 애니메이션 자체는 정확히 2초가 소요됩니다.
속성을 통한 WOW.js 애니메이션 설정
data-wow-duration - 애니메이션 재생 시간 지정 data-wow-delay - 애니메이션 재생 전 지연 설정 data-wow-offset - 요소가 화면 하단에서 일정 수의 픽셀을 통과할 때 애니메이션 켜기 데이터 -wow-iteration - 애니메이션 반복 횟수
이러한 속성은 선택 사항입니다. 지정하지 않으면 브라우저 창을 스크롤할 때 요소가 화면에 나타나자마자 애니메이션이 기본적으로 재생됩니다.
