fullpage的起步和简单实用给初学小白打个样 - LOSTU5

公告

首先引入

html编写

<div id="dowebok">
<div class="section">
        <div class="slide"><!--这个是轮播图的标签 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">

有多少就写多少个section

</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%;}}

posted on 2018-06-28 15:05 LOSTU5 阅读(235) 评论(0) 收藏举报

刷新页面返回顶部