全屏滚动fullpage.js

目前很多网站都会有全屏滚动的效果，比如京东的楼梯效果，很多网页我们看到的可以通过点击导航定位到具体的一屏的这样的效果，很多官网也会有这样的效果出现，最近我也做了一个需要全屏滚动效果的官网

1：当鼠标滑动到具体一屏的时候对应的导航显示，整屏滑动，给每一屏有需要的添加动画效果~

2：下面就介绍一下fullpage.js这个插件啦，

<script src="js/jquery.js"></script>
// fullpage.js是基于jq 插件所以要放在jq的后面
<script src="js/fullpage.js">
具体使用方法，很多属性更具需求来添加
$(function(){
$('#fullpage').fullpage({navigation:'true',scrollingSpeed:'700',navigationPosition:'left',navigationColor:'#ff4242',anchors:['page1','page2','page3','page4'],menu:'#menu',css3:'true',easingcss3:'ease',easing:'easeInOutCubic',
afterRender:function(){},afterLoad:function(anchorLink,index){var indexs=index.index;
}
})
})

//html部分//导航
<ul id="menu"><li data-menuanchor="page1" class="actice"><a href="#page1">111</a>    </li><li data-menuanchor="page2"><a href="#page2">222</a>   </li><li data-menuanchor="page3" class="actice"><a href="#page3">333</a>    </li><li data-menuanchor="page4"><a href="#page4">444</a>   </li></ul>
<div class="section">第一屏
</div>
<div class="section">第二屏
</div>
<div class="section">第三屏
</div>
<div class="section">第四屏
</div>

更改导航小按钮的颜色的时候，颜色不容易被改掉，可以这样去做
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span {width:9px !important;height:9px !important;margin:-6px 0 0 -4px !important;background: #FF683F !important; /*这里设置的是活动导航的颜色*/
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {background: #fff !important;border: 1px solid #fff;/*这里设置的是非活动导航的颜色*/
}

滑动到每一屏的时候导航对应，可以给加样式 "active"

全屏滚动fullpage.js相关推荐

拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
php单屏网站源码,关于原生js实现类似fullpage的单页/全屏滚动的方法
这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法,文中给出了完整的实例代码,相信对大家的理解和学习具有一定的参考价值,需要的朋友们可以参考借鉴,下面来一起看看吧. 前言单页 ...
全屏滚动插件fullPage.js
效果效果本文介绍使用fullPage.js插件可轻易创建全屏滚动网站.很多网站只有一个首页,它是由多个可以滚动的全屏内容组成,使用鼠标滚动或方向键可控制滚屏,支持CSS3动画和手机触屏,效果非常高大 ...
jQuery全屏滚动插件 Fullpage.js 及 move.js
Fullpage.js 引入文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> &l ...
html5 滚屏效果插件,jQuery插件fullPage.js实现全屏滚动效果
本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示的HTML 布局以及js 代码 //需要连接连接的三个文件 //css文件 / ...
使用fullPage做的大图片全屏滚动
本地的图片和css等文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset ...
animate inater插件_基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目...
功能简介基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
fullPage 实现全屏滚动
参考demo网址: http://www.dowebok.com/demo/2014/77/ api说明地址: http://www.dowebok.com/77.html 一.基础演示 <!D ...
pagePiling.js - 创建美丽的全屏滚动效果
在线演示在线演示本地下载全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主 ...

全屏滚动fullpage.js

全屏滚动fullpage.js相关推荐

最新文章

热门文章