前端开发资源网站记录

不能没有奶茶

已于 2023-12-12 10:27:04 修改

阅读量82

点赞数

文章标签： css css3 动画

于 2023-04-19 15:01:58 首次发布

本文链接：https://blog.csdn.net/weixin_52869172/article/details/130243620

版权

文章目录

UI插件

amazeUI
http://amazeui.shopxo.net/javascript/slider/
elementUI
https://element.eleme.cn/#/zh-CN
Ant
https://1x.antdv.com/docs/vue/getting-started-cn/

特效素材网站

https://www.jq22.com/
http://www.htmleaf.com/
http://www.bootstrapmb.com/tag/jstexiao

scrollClass.js

滚动特效
待更新https://github.com/virgiliud/scrollClass.js?files=1

Animate.css

Animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，快速添加CSS动画，包括过渡、变换、弹跳、滚动等等。
https://animate.style/

wow.js

wow.js 就是一款帮助你实现滚动页面的时看到各式各样的元素动画效果的插件,可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。
https://wowjs.uk/官网链接
https://wowjs.uk/docs.html使用介绍

使用Animate.css + wow.js 制作页面特效

1.引入并初始化

<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.min.js"></script>
<script>
	new WOW().init();
</script>

2.在html添加css类

<div class="wow">
	Content to Reveal Here
</div>

3.在Animate.css中选择一个动画样式，添加到HTML元素中

<div class="wow bounceInUp">
        Content to Reveal Here
</div>

4.事件添加

data-wow-duration: 更改动画持续时间 data-wow-delay: 动画开始前的延迟 data-wow-offset:
开始动画的距离（与浏览器底部相关） data-wow-iteration: 动画重复的次数

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>

<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

boxClass: 用户滚动时显示隐藏框的类名。 animateClass:
触发CSS动画的类名（animate.css库默认为’animated’） offset:
定义浏览器视口底部与隐藏框顶部之间的距离。当用户滚动并到达该距离时，隐藏的框被显示出来。 mobile:
在移动设备上打开/关闭WOW.js。
live: 在页面上不断检查新的WOW元素。

wow = new WOW(
  {
	   boxClass:     'wow',      // default
	   animateClass: 'animated', // default
	   offset:       0,          // default
	   mobile:       true,       // default
	   live:         true        // default
   }
 )
wow.init();