1. (페이지를 아래로 스크롤하면 일부 요소가 작은 애니메이션 효과를 생성합니다. 애니메이션이 상대적으로 작지만 관심을 끌 수 있습니다.)
저는 그냥 wow.js 플러그인에 대해 알게 되었는데, 예전에는 다른 웹사이트를 방문하여 다양한 효과를 보기 위해 스크롤바를 내리곤 했는데, 이제 이 효과를 혼자서도 얻을 수 있게 되었습니다.
효과는 나왔지만 인터넷상에는 각종 특수효과에 해당하는 정리된 클래스명이 없기 때문에 모두가 참고하고 공부할 수 있도록 알기 쉬운(적어도 저는 이해할 수 있는) 글을 썼습니다. (^_^)
둘째, 먼저 이 플러그인을 사용하는 방법을 설명하세요:
1. wow.js는 animate.css에 의존하며, 먼저 머리에서 animate.css 또는 animate.min.css를 참조합니다.
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
2. 하단에 wow.js 또는 wow.min.js를 인용하고, 아래에 자바스크립트 코드를 한 줄 더 작성합니다. (jQuery를 인용할 필요가 없습니다.)
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
new WOW().init();
</script> new WOW().init()의 WOW는 대문자로 시작해야 합니다. 그렇지 않으면 아무런 효과가 없습니다.
2. 하단에 wow.js 또는 wow.min.js를 인용한 후 아래에 자바스크립트 코드를 한 줄 더 작성합니다. (jQuery를 인용할 필요는 없습니다.) 3. CSS 아래, js 위에 애니메이션이 필요한 요소를 작성합니다. (블록 또는 인라인 블록으로 설정해야 합니다! 블록 또는 인라인 블록으로 설정해야 합니다! 블록 또는 인라인 블록으로 설정해야 합니다! ), 클래스 이름을 추가합니다.
<p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></p>
모든 애니메이션 요소에는 클래스 이름 앞의 wow를 추가해야 하며, SlideInLeft는 애니메이션 스타일을 설명합니다. 다음
data-wow-duration(애니메이션 기간),
data-wow-delay(애니메이션 지연 시간),
data-wow-offset(노출된 후 요소 위치 하단에서 몇 픽셀까지)
data -wow-iteration (애니메이션 실행 횟수)
이 네 가지 속성은 선택 사항입니다.4. 기사를 작성하기 위해 data-wow-offset과 data-wow-iteration 두 가지 속성을 구체적으로 테스트했습니다. data-wow-offset="value"의 값은 요소와 요소 사이의 거리입니다. 애니메이션이 완료된 후 디스플레이 하단의 위치로, 브라우저 창 하단으로부터의 거리가 아닙니다.
3. 다양한 클래스 이름의 애니메이션 효과를 차례로 테스트해 보겠습니다. (이해하기 쉽게 노력하세요)
| 와우 RollIn | 왼쪽에서 오른쪽으로 시계방향으로 스크롤하면 투명도가 100%에서 설정값으로 변경됩니다 |
| bounceIn | 이 원래 위치에서 나타나고, 작은 것에서 변경됩니다. 작게 설정값을 크게 초과했다가 점점 작아지고 설정값보다 작아지고 다시 설정값으로 돌아오며 투명도가 100%에서 설정값으로 변경됩니다 |
| 와우 바운스인업 | 아래에서 위로, 이후 위로 점프하면 일정부분을 넘어갔다가 다시 튕겨나오면 투명도는 설정값 그대로 유지 |
| 와우 boomInDown | 위에서 아래로 내려간 후 일정부분 아래로 내려갔다가 튕겨나가는 투명도 설정값으로 유지 |
| 왼쪽에서 오른쪽으로 넘어간 후 오른쪽 부분을 넘어 왼쪽으로 튕겨나가면 투명도가 설정값으로 한 번 유지됩니다. 투명도는 설정값 그대로 유지됩니다 | |
| wow SlideInUp | 아래에서 위로 설정한 위치에 고정되고 투명도는 설정값으로 유지됩니다. 아래에서 위로) (요소가 아래에 있으면 상자 높이가 확장됩니다)|
| 위에서 아래로 올라온 후 설정된 위치에 고정되고 투명도는 에서 변경되지 않습니다. 설정값 | |
| 왼쪽에서 오른쪽으로 올라와서 설정한 위치에 고정 투명도는 설정값 그대로 유지됩니다.(왼쪽은 왼쪽에서 오른쪽으로) | |
| 오른쪽에서 왼쪽으로 올라와서 설정된 위치로 고정 고정된 위치와 투명도는 설정된 값에서 변함없이 유지됩니다 | |
| wow lightSpeedIn | 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值 |
| wow pulse | 原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳） |
| wow flipInX | 原位置后仰前栽、透明度从100%变化至设定值 |
| wow flipInY | 原位置左右旋动、透明度从100%变化至设定值 |
| wow bounce | 上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） |
| wow shake | 左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） |
| wow swing | 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变 |
| wow bounceInU | 原位置不变、直接从不显示到显示（无过过渡效果） |
| wow wobble | 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 |
测试了这么多终于摸到窍门了，打开引用的animate.css或者animate.min.css，里面@keyframes定义了各种动画，将wow后面的类名替换一下测试效果就可以了。
****************************************************************
https://daneden.github.io/animate.css/ 也可以在这个地方看各种演示
****************************************************************四、配合data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可以完成很多效果，主要还是多实践。
五、IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。
위 내용은 wow.js의 다양한 특수 효과에 해당하는 클래스 이름에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
