fullpage的起步 和简单实用 给初学小白打个样
首先引入
<link rel=”stylesheet” href=”static/css/jquery.fullpage.css”>
<script src=”static/js/jquery.min.js”></script>
<script src=”static/js/jquery-ui.min.js”></script>
<script src=”static/js/iscroll.js”></script> (最后一页可以单页滚动,所以加了iscroll插件)
<script src=”static/js/jquery.fullpage.min.js”></script>
html编写
<div id="dowebok"> <div class="section"> <div class="slide"> <div class="bg11"></div> <!--背景--> <div class="bg12"></div> <!--左背景--> <div class="bg13"></div> <!--左文字--> </div> <div class="slide"> <div class="bg111"> <div class="bg115"></div> </div> <div class="bg112"> <div class="bg113"></div> <div class="bg114"></div> </div> </div> <div class="slide"> <div class="bg121"> <div class="bgcenter"> <div class="bg122"></div> <div class="bg123"><a href=""></a></div> </div> </div> </div> </div> <div class="section section2"> 第二屏 </div> <div class="section section3"> 第二屏 </div>
/*有多少就写多少个*/
<div class="section section3"> 第三屏 </div>
</div>
js编写
/*fullpage*/ $('#dowebok').fullpage({ sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90', '#4BBFC3', '#7BAABE', '#f90', '#4BBFC3', '#7BAABE', '#f90', '#f90', '#f90', '#161616'], /*每页颜色*/ anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8', 'page9', 'page10', 'page11', 'page12', 'page13'],/*锚点*/ navigation: true, navigationTooltips: ['推荐', '首页', '产品介绍', '功能介绍', '产品优势', '产品搜索', '产品功能', '产品使用', '公司简介', '新闻中心', '合作平台', '服务对象', '联系我们'],/*右边导航小点*/ onLeave: function(origin, destination, direction){ //如果目标是第13节,它将不会滚动 if(destination== 13){ //禁用滚动 }else { $.fn.fullpage.setAllowScrolling(true); //fullpage方法 } } }); /*这个事首页轮播的js*/ setInterval(function(){ $.fn.fullpage.moveSlideRight(); },3000); /*fullpage*/
/*有个文章需要滚动 运用css的margin 动的*/ var box=$("#bg91text"); var con1=$("#bg91textcov"); var speed=50; setInterval(function(){ var myheight = parseInt(con1.css("height")) var mmargin = parseInt(con1.css("marginTop"))*-1 if( mmargin>=myheight-5){ con1.css("marginTop","0px") }else{ con1.css("marginTop",-(mmargin+1)) } },speed); /*滚动*/
/*有最后一页的内容 wrapperin 的高度自动获取*/ window.onload = function(){ var myscreen = $(".wrapcober").height() $(".wrapperin").css("height",myscreen) /*加了个延时 */ setTimeout(function(){ /*注册IScroll*/ var myScroll = new IScroll('#wrapper',{ mouseWheel: true, scrollbars: true }); myScroll.on('scrollEnd', function() { // 滚动结束触发 if ( this.y=="0" ) { //启用滚动 $.fn.fullpage.setAllowScrolling(true); //fullpage的方法 }else { //禁用滚动 $.fn.fullpage.setAllowScrolling(false); } }); },1000) }
最后css的 写了点特效效果 摘几个放这里吧
.bg33 { position: absolute; right: 50%; bottom: 0; width: 50%; height: 100%; background: url(static/image/bg33.png) center center no-repeat; opacity: 0; transition: all 1s;background-size: 65%;transform: rotate3D(1,1,1,-60DEG) scale(1.5, 1.5);} .bg34 { position: absolute; left: 50%; bottom: 0; width: 36%; height: 100%;display: flex;flex-direction: column;justify-content: center;transition: all 1s;transform: scale(1.5);} /*这个是触发之后的 每次滚动到某一页 都会增加active的class属性*/ .active .bg33 {right: 50%; opacity: 1; transition: all 1s;transform: rotate3D(1,1,1,0DEG) scale(1, 1);} .active .bg34 {-webkit-transform:scale(1, 1); transform:scale(1, 1);} .active .bgqiang img{ animation-name: myfirst; /*名称*/ animation-duration: 1s; /*时间*/ animation-timing-function: linear; /*规定动画的速度曲线*/ animation-delay: 2s; /*延迟*/ animation-iteration-count: infinite; /*播放的次数infinite*/ animation-direction: alternate; /*下一周期逆向地播放*/ animation-play-state: running; /* Safari 与 Chrome: */ -webkit-animation-name: myfirst; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running;} /*变大变小动画*/ @keyframes myfirst { 0% {transform: scale(1);} 50% {transform: scale(1.1);} 100% {transform: scale(1);} } @-moz-keyframes myfirst /* Firefox */ { 0% {transform: scale(1);} 50% {transform: scale(1.1);} 100% {transform: scale(1);} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { 0% {transform: scale(1);} 50% {transform: scale(1.1);} 100% {transform: scale(1);} } @-o-keyframes myfirst /* Opera */ { 0% {transform: scale(1);} 50% {transform: scale(1.1);} 100% {transform: scale(1);} } .active .bggongxiang img{ animation-name: mysecend; /*名称*/ animation-duration: 3s; /*时间*/ animation-timing-function: linear; /*规定动画的速度曲线*/ animation-delay: 2s; /*延迟*/ animation-iteration-count: infinite; /*播放的次数*/ animation-direction: normal; /*下一周期逆向地播放*/ animation-play-state: running; /* Safari 与 Chrome: */ -webkit-animation-name: mysecend; -webkit-animation-duration: 3s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-play-state: running;} /*旋转动画*/ @keyframes mysecend {0% {transform: rotate(360deg);} 100% {transform: rotate(0deg);}} @-moz-keyframes mysecend /* Firefox */ {0% {transform: rotate(360deg);} 100% {transform: rotate(0deg);}} @-webkit-keyframes mysecend /* Safari 和 Chrome */ {0% {transform: rotate(360deg);} 100% {transform: rotate(0deg);}} @-o-keyframes mysecend /* Opera */ {0% {transform: rotate(360deg);} 100% {transform: rotate(0deg);}} .active .bg46>img{left: 0%;opacity: 0.99;transition-delay: 4s;} .active .bg47 {left: 50%;opacity: 1;transition-delay: 2s;} .active .bg47>img{left: 0%;opacity: 0.99;transition-delay: 4s;} .active .bg48 {right: 50%;opacity: 1;transition-delay: 3s;} .active .bg48>img{left: 0%;opacity: 0.99;transition-delay: 4.5s;} .active .bg49 {left: 50%;opacity: 1;transition-delay: 2s;} .active .bg49>img{left: 0%;opacity: 0.99;transition-delay: 4s;} .active .bg491 {left: 50%;opacity: 1;transition-delay: 3s;} .active .bg491>img{left: 0%;opacity: 0.99;transition-delay: 4.5s;} .active .bggongxiang img{ animation-name: mysecend; /*名称*/ animation-duration: 3s; /*时间*/ animation-timing-function: linear; /*规定动画的速度曲线*/ animation-delay: 2s; /*延迟*/ animation-iteration-count: infinite; /*播放的次数infinite */ animation-direction: normal; /*下一周期逆向地播放*/ animation-play-state: running; /* Safari 与 Chrome: */ -webkit-animation-name: mysecend; -webkit-animation-duration: 3s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-play-state: running;} /*停车效果动画*/ @keyframes mythird {0%{left:-150%;}46%{left:3%;}48%{left:-2%;}50%{left:3%;}52%{left:-2%;}54%{left:1%;}56%{left:-1%;}57%{left:0%;}100%{left:0%;}} @-moz-keyframes mythird /* Firefox */ {0%{left:-150%;}46%{left:3%;}48%{left:-2%;}50%{left:3%;}52%{left:-2%;}54%{left:1%;}56%{left:-1%;}57%{left:0%;}100%{left:0%;}} @-webkit-keyframes mythird /* Safari 和 Chrome */ {0%{left:-150%;}46%{left:3%;}48%{left:-2%;}50%{left:3%;}52%{left:-2%;}54%{left:1%;}56%{left:-1%;}57%{left:0%;}100%{left:0%;}} @-o-keyframes mythird /* Opera */ {0%{left:-150%;}46%{left:3%;}48%{left:-2%;}50%{left:3%;}52%{left:-2%;}54%{left:1%;}56%{left:-1%;}57%{left:0%;}100%{left:0%;}}