公司在做官网是看到别的同类公司有用到整屏滚动感觉效果好看,就要求帮我们也要做这个效果,网上到是搜到不少,但是多多少少复制过来都有点问题。今天我就把我已经做好的代码贴上来,省的大家走冤枉路,代码如下:
< full- page : options= "options" >
< div class = "section" >
< div class = 'box1">
section1
< / div>
< / div>
< div class = "section" >
< div class = 'box2">
section2
< / div>
< / div>
< div class = "section" >
< div class = 'box3">
section3
< / div>
< / div>
< div class = "section" >
< div class = 'box4">
section4
< / div>
< / div>
< / full- page>
export default {
options: {
licenseKey: "OPEN-SOURCE-GPLV3-LICENSE" ,
afterLoad: this . afterLoad,
scrollOverflow: true ,
scrollBar: false ,
menu: "#menu" ,
sectionsColor: [
"#41b883" ,
"#ff5f45" ,
"#0798ec" ,
"#fec401" ,
"#1bcee6" ,
"#ee1a59" ,
"#2c3e4f" ,
"#ba5be9" ,
"#b4b8ab"
]
}
}
fullpage.min.css文件代码:
. fp- enabled body,
html. fp- enabled {
margin: 0 ;
padding: 0 ;
overflow: hidden;
- webkit- tap- highlight- color: rgba ( 0 , 0 , 0 , 0 )
}
. fp- section {
position: relative;
- webkit- box- sizing: border- box;
- moz- box- sizing: border- box;
box- sizing: border- box
}
. fp- slide {
float: left
}
. fp- slide,
. fp- slidesContainer {
height: 100 % ;
display: block
}
. fp- slides {
z- index: 1 ;
height: 100 % ;
overflow: hidden;
position: relative;
- webkit- transition: all .3 s ease- out;
transition: all .3 s ease- out
}
. fp- section. fp- table,
. fp- slide. fp- table {
display: table;
table- layout: fixed;
width: 100 %
}
. fp- tableCell {
vertical- align: middle;
width: 100 % ;
height: 100 %
}
. fp- slidesContainer {
float: left;
position: relative
}
. fp- controlArrow {
- webkit- user- select: none;
- moz- user- select: none;
- khtml- user- select: none;
- ms- user- select: none;
position: absolute;
z- index: 4 ;
top: 50 % ;
cursor: pointer;
width: 0 ;
height: 0 ;
border- style: solid;
margin- top: - 38 px;
- webkit- transform: translate3d ( 0 , 0 , 0 ) ;
- ms- transform: translate3d ( 0 , 0 , 0 ) ;
transform: translate3d ( 0 , 0 , 0 )
}
. fp- controlArrow. fp- prev {
left: 15 px;
width: 0 ;
border- width: 38.5 px 34 px 38.5 px 0 ;
border- color: transparent #fff transparent transparent
}
. fp- controlArrow. fp- next {
right: 15 px;
border- width: 38.5 px 0 38.5 px 34 px;
border- color: transparent transparent transparent #fff
}
. fp- scrollable {
overflow: hidden;
position: relative
}
. fp- scroller {
overflow: hidden
}
. iScrollIndicator {
border: 0 ! important
}
. fp- notransition {
- webkit- transition: none! important;
transition: none! important
}
#fp- nav {
position: fixed;
z- index: 100 ;
margin- top: - 32 px;
top: 50 % ;
opacity: 1 ;
- webkit- transform: translate3d ( 0 , 0 , 0 )
}
#fp- nav. fp- right {
right: 17 px
}
#fp- nav. fp- left {
left: 17 px
}
. fp- slidesNav {
position: absolute;
z- index: 4 ;
opacity: 1 ;
- webkit- transform: translate3d ( 0 , 0 , 0 ) ;
- ms- transform: translate3d ( 0 , 0 , 0 ) ;
transform: translate3d ( 0 , 0 , 0 ) ;
left: 0 ! important;
right: 0 ;
margin: 0 auto! important
}
. fp- slidesNav. fp- bottom {
bottom: 17 px
}
. fp- slidesNav. fp- top {
top: 17 px
}
#fp- nav ul,
. fp- slidesNav ul {
margin: 0 ;
padding: 0
}
#fp- nav ul li,
. fp- slidesNav ul li {
display: block;
width: 14 px;
height: 13 px;
margin: 7 px;
position: relative
}
. fp- slidesNav ul li {
display: inline- block
}
#fp- nav ul li a,
. fp- slidesNav ul li a {
display: block;
position: relative;
z- index: 1 ;
width: 100 % ;
height: 100 % ;
cursor: pointer;
text- decoration: none
}
#fp- nav ul li a. active span,
#fp- nav ul li: hover a. active span,
. fp- slidesNav ul li a. active span,
. fp- slidesNav ul li: hover a. active span {
height: 12 px;
width: 12 px;
margin: - 6 px 0 0 - 6 px;
border- radius: 100 % ;
background: #DD4533 ;
}
#fp- nav ul li a span,
. fp- slidesNav ul li a span {
border- radius: 50 % ;
position: absolute;
z- index: 1 ;
height: 4 px;
width: 4 px;
border: 0 ;
background: white;
left: 50 % ;
top: 50 % ;
margin: - 2 px 0 0 - 2 px;
- webkit- transition: all .1 s ease- in - out;
- moz- transition: all .1 s ease- in - out;
- o- transition: all .1 s ease- in - out;
transition: all .1 s ease- in - out
}
#fp- nav ul li: hover a span,
. fp- slidesNav ul li: hover a span {
width: 10 px;
height: 10 px;
margin: - 5 px 0 0 - 5 px
}
#fp- nav ul li . fp- tooltip {
position: absolute;
top: - 2 px;
color: #fff;
font- size: 14 px;
font- family: arial, helvetica, sans- serif;
white- space: nowrap;
max- width: 220 px;
overflow: hidden;
display: block;
opacity: 0 ;
width: 0 ;
cursor: pointer
}
#fp- nav ul li: hover . fp- tooltip,
#fp- nav. fp- show- active a. active+ . fp- tooltip {
- webkit- transition: opacity .2 s ease- in ;
transition: opacity .2 s ease- in ;
width: auto;
opacity: 1
}
#fp- nav ul li . fp- tooltip. fp- right {
right: 20 px
}
#fp- nav ul li . fp- tooltip. fp- left {
left: 20 px
}
. fp- auto- height . fp- slide,
. fp- auto- height . fp- tableCell,
. fp- auto- height. fp- section {
height: auto! important
}
. fp- responsive . fp- auto- height- responsive . fp- slide,
. fp- responsive . fp- auto- height- responsive . fp- tableCell,
. fp- responsive . fp- auto- height- responsive. fp- section {
height: auto! important
}
. fp- sr- only {
position: absolute;
width: 1 px;
height: 1 px;
padding: 0 ;
overflow: hidden;
clip: rect ( 0 , 0 , 0 , 0 ) ;
white- space: nowrap;
border: 0
}