Com certeza você já se deparou com aqueles sites de uma única página ou seja sites onpage já que existem diversos modelos espalhados pela web, então se você já teve a curiosidade de saber como fazer este tipo de site neste post vou te mostrar cinco formas para fazer um site one page! particularmente eu gosto bastante deste modelo de site fica interessante desde que bem feito claro, mas isso não é novidade vale para qualquer situação.
Existem diversas formas de se fazer este sistema, mas como neste post digo cinco formas vou me ater a elas, e quais são? Bom na verdade quatro delas trata-se de plug-ins que facilitam e muito o trabalho e uma é no código “puro” mesmo caso você não queira usar um plugin, então vamos primeiro aos plug-ins.
São eles:
Animatescroll: como todos os outros plug-ins que serão citados é extremamente fácil de configurar, basta que o mesmo seja incluído abaixo da linha que chama o jquery e após isso fazer a chamada do mesmo no local desejado, para tanto pode usar o evento onclick seguido do id desejado, veja abaixo o modelo mostrado no site do desenvolvedor:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="animatescroll.js">
</head>
<body>
<br />
<div id="section-1">This is the element where you want to scroll to
<div>
// You may call the function like this
<a rel="nofollow" onclick="$('[id-or-class-of-element]').animatescroll();">Go to Element</a>
</body>
</html>
One Page Scroll v1.2: a facilidade deste é impar, não que o anterior ou os posteriores sejam complicados todos são na verdade bem fácil de se usar, porem o One Page Scroll tem um “plus” no quesito facilidade, logo talvez seja uma das melhores opções se você não se preocupa com um grande números de configurações possíveis, se tudo o que quer é um sistema de scroll simples, este é seu plugin! Veja como é básico começar:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script><script type="text/javascript" src="jquery.onepage-scroll.js"></script>
<script>
$(document).ready(function(){
$(".main").onepage_scroll();
});
</script></pre>
<div class="main">
<section>...</section>
<section>...</section></div>
Pronto, apenas isso e tudo deve fluir perfeitamente.
Smint : seguindo a mesma ideia de simplicidade o smint também é uma boa opção, ele difere um pouco pois deverá ser inserido um onload no body da página, nada que dificulte a sua utilização, todos seguem basicamente a mesma ideia de simplicidade, veja como configurar o smint.
Como todos primeiro deve incluir o jquery na pagina e logo abaixo incluir o plugin, logo após começa a configurar o uso do mesmo que é feito da seguinte forma.
<div class="subMenu"> <a id="sTop" class="subNavBtn" href="#" rel="nofollow">Home</a> <a id="s1" class="subNavBtn" href="#" rel="nofollow">Section 1</a> <a id="s2" class="subNavBtn" href="#" rel="nofollow">Section 2</a></div> <pre lang="html"></pre> <div class="section sTop"></div> <div class="section s1"></div> <div class="section s2"></div>
E é isso, também é bastante simples.
Scrolldjs ; o scrolldjs oferece um maior número de configurações possíveis o que tem dois lados o bom que com isso você pode configura-lo com mais pernalização digamos assim porem isso pode fazer o serviço ser um pouco mais complicado, porem ele permite a configuração básica que como os demais não dificulta em nada o trabalho o que obviamente é muito bom, veja como configura-lo;
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../js/scrolld.js"></script>
<script type="text/javascript">$("[id*='Btn']").stop(true).on('click',function(e){e.preventDefault();$(this).scrolld();})</script>
<ul class="nav">
<ul class="nav">
<li id="secBtn" class="navBtnText"><a href="#about" rel="nofollow">seção 1</a></li>
</ul>
</ul>
<ul>
<li id="sec2Btn" class="navBtnText"><a href="#use" rel="nofollow">seção 2</a></li>
</ul>
<ul>
<li id="sec3Btn" class="navBtnText"><a href="#tweaks" rel="nofollow">seção 3</a></li>
</ul>
<div id="secBtn"></div>
<div id="sec2Btn"></div>
<div id="sec3Btn"></div>
Bom ele é um pouco mais trabalhoso mas também é uma boa opção.
A quinta forma é no código mesmo sem fazer uso de plugin é relativamente simples pois o código é pequeno e nada complexo e claro você pode usar o bom e velho copiar e colar que vai funcionar também!
Assim como no caso dos plug-ins é claro que é preciso incluir o jquery na pagina:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</pre>
<h2>Configura o script</h2>
<pre lang="javascript"><script>
$(document).ready(function(e) {
$("nav a").click(function (event) {
event.preventDefault();
var destino = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
destino = $(document).height() - $(window).height();
} else {
destino = $(this.hash).offset().top;
}
$('html,body').animate({
scrollTop: destino
}, 2000, 'swing');
});
});
</script>
Depois basta fazer a marcação html
<nav> <ul> <ul> <li><a id="topo" href="#sec1" rel="nofollow">seção 1</a></li> </ul> </ul> <li><a href="#sec2" rel="nofollow">seção 2</a></li> <li><a href="#sec3" rel="nofollow">seção 3</a></li> </nav> <section id="topo"></section> <section id="sec2"></section> <section id="sec3"></section>
E pronto também é muito fácil e sem o uso de plugin algum!
Então é isso, espero que este post seja útil para você , obrigado pela leitura e volte sempre que possível!