【jQuery】1ページサイトにレイヤー状のメニューシステムを作成するlayer.js

jQuery

Layer.js

March 16, 2017

layer.jsは、1ページサイトにレイヤー状のメニューシステムを作成するためのjQueryプラグインです。

スクロールダウンしていくとヘッダーに通過した要素のメニューがくっついていきます。スクロールアップしていくと剥がれていきます。

HTML

<div id="layers">
         <div class="layer first">
         <div class="wrapper">
            <div class="pres">
               <div class="text">
                  layer.js
                  <div class="subtext">
                     A Javascript library for menues
                  </div>
               </div>
            </div>
            <br>
            scroll down
            </div>
         </div>
         <div class="layer second">
            <div class="wrapper">
               <div class="paragraph">
                  Keep scrolling down.
            </div>
            </div>
         </div>
         <div class="layer third">
            
               <div class="wrapper">
               <div class="paragraph">
               You can easily access the last pages by navigating using the "beams".
            </div>
            </div>
         </div>
         <div class="layer fourth">
             <div class="wrapper">
               <div class="paragraph">
                  It's highly customizable.
                  <br>
                  <br>
                  <img src ="img/template.png" alt="" />
            </div>
            </div>
         </div>
         <div class="layer fifth ">
             <div class="wrapper">
               <div class="paragraph">
                Of course, it's responsive.
            </div>
            </div>
         </div>
      </div>

JS

$(document).ready(function() {
	
  $('#layers').layer({
  	beamheight: 30,
  	//titles: ["<i class='fa fa-bell'></i>","<i class='fa fa-user'></i>","<i class='fa fa-heart'></i>","<i class='fa fa-eye'></i>","Contact"],
  	titles: ["First page","Second page","Third page","Fourth page","Fifth page"],
  	scroll: {
  		speed: 1000,
  	}
  	});
});

MIT

Latest Posts

Related Posts