History

Without guidelines, users are difficult to understand the structure and hard to find out something from a page that includes many sections. This one is my side project and focus on solving the UI + UX for a single infinite page. jquery.trackrails is useful on a single infinite web page browsing. It lets your users have a best understanding that your page provides and can reach each section more easily by tap/click the track point.

Demonstration on CodePen

https://codepen.io/ssmak/pen/zarLVV

Installation + Use

1. Install to your project as dependency from NPM (https://www.npmjs.com/package/jquery.trackrails)

npm install jquery.trackrails --save

2. Load the dependency

<!-- // HEAD -->
<!-- put below stylesheets between the 'head' tag in below order -->
<!-- font awesome 4 - optional, but I use it in my test page. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jquery.trackrails, css(default) - provide default rendering -->
<link rel="stylesheet" href="/node_modules/jquery.trackrails/dist/jquery.trackrails.min.css">
<!-- jquery.trackrails, css(overrides) - you can overrides any styles by your own -->
<link rel="stylesheet" href="/project_root/css/jquery.trackrails.overrides.css">
<!-- // BODY -->
<!-- jquery.trackrails - put below script tag above the close tag of 'body' -->
<script src="/node_modules/jquery.trackrails/dist/jquery.trackrails.js" rails-easing="easeOutExpo" rails-duration="2000"></script>

3. Write your page content

<!-- mock content -->
<div class="section rails" style="background-color:#f00">
  Section-A
</div>
<div class="section rails" rails-title="use title" style="background-color:#0f0">
  Section-2
</div>
<div class="section rails" style="background-color:#00f">
  Section-C
</div>
<div class="section rails" style="background-color:yellow; height:100px">
  Section-D
</div>
<div class="section rails" style="background-color:pink; height:50px">
  Section-E Section-E Section-E
</div>

4. Place below tag within the 'body' tag which you want the DOM of jquery.trackrails to create in

<!-- jquery.trackrails, dom will attach here. If this tag not find, the DOM will append as a child to the 'body' tag -->
<div class="jq-trackrails"></div>

Test

A demo page is located in the /test folder. You can test it with the live reload by using lite-server which can be installed by

npm install lite-server -g
cd /project_root && lite-server

Customization

rails-title The title of the track point. If not set, the content will be used.

<div class="section rails" rails-title="use title" style="background-color:#0f0">Section-2</div>

rails-easing The easing animation that will be used on track moving. Please visit here for details: https://easings.net/zh-tw rails-duration How long will be moved to the target. Unit in ms, 2000 = 2 seconds.

<script src="/node_modules/jquery.trackrails/dist/jquery.trackrails.js" rails-easing="easeOutExpo" rails-duration="2000"></script>

License

MIT