javascript - How do you make a one scroll page? -
how make 1 page scrolling site this. tried using "peachananr" plugin here didn't work instead messed layout. eg after doing:
<div class="main"> <section id = "mainpage" class="container mainpage" > </section> <section id = "projectcontents" class = " projectcontents" > <span style = "display: block; float: left; margin-top: 50px; font-size:40px; font-family: 'alegreya sans sc', sans-serif;"> projects: </span> </section> </div> my whole page came o.o ! (all sections came in one) page 1 page website this
this css way layout each section page:
body, html { height: 100%; margin: 0; } * { box-sizing: border-box; /* */ } .container { width: 100%; text-align: center; height: 100%; } .mainpage { height:100%; width:100%; background: url(imgs/13.jpg); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .projectcontents { position: relative; height:100%; width:100%; background: white; } this html:
<section id = "mainpage" class="container mainpage" > </section> <section id = "projectcontents" class = " projectcontents" > <span style = "display: block; float: left; margin-top: 50px; font-size:40px; font-family: 'alegreya sans sc', sans-serif;"> projects: </span> </section> please how resolve issue or can please give solution. examples appreciated !! :d alottt !
ps call plugin in js file $(".main").onepage_scroll();

make sure loading onepage-scroll css , javascript... works fine without of css. style there.
html
<div class="main"> <section id = "mainpage" class="container mainpage" > </section> <section id = "projectcontents" class = " projectcontents" > <span style = "display: block; float: left; margin-top: 50px; font-size:40px; font-family: 'alegreya sans sc', sans-serif;"> projects: </span> </section> </div> js
$('.main').onepage_scroll()
Comments
Post a Comment