步骤
1.引入相关文件
<!-- css -->
<!-- 1.1 fullpage 相关css文件 -->
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<!-- 1.1 自定义相关css文件 -->
<!-- js -->
<!-- 先引jq，再引fullpage -->
<script src="js/jquery.min.js"></script>
<!-- 动画效果插件 -->
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<!-- 自定义js文件 -->
2.写骨架 就按既定规则写骨架
<body>
<div id="fullpage">
<div class="section">
第一屏
</div>
<div class="section">
第二屏
</div>
<div class="section">
第三屏
</div>
<div class="section">
第四屏
</div>
</div>
</body>
3.自定义js文件，调用fullpage方法
$(function() {
$('#fullpage').fullpage({
});
})
背景效果的实现
分析 小圆滚动 游离在全屏滚动以外
1.写骨架 定义样式
2.小球动画
第一屏效果实现
分析 指定两个状态 初始状态(大，翻转) 结束状态(正常)
大小通过视距实现
1.写两个状态
2.触发一定条件 加上样式 可以实现两个状态的切换
插件
1.autoFileName
1.ctrl+shift+p 输入pc 找到package control : install package
2.输入插件名称 autoFileName 回车
82
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
