Create track points for a page and make the section browsering more easily.
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
Installation + Use
- Install to your project as dependency from NPM (https://www.npmjs.com/package/jquery.trackrails)
npm install jquery.trackrails --save
- 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. --><!-- jquery.trackrails, css(default) - provide default rendering --><!-- jquery.trackrails, css(overrides) - you can overrides any styles by your own --><!-- // BODY --><!-- jquery.trackrails - put below script tag above the close tag of 'body' -->
- Write your page content
<!-- mock content -->Section-ASection-2Section-CSection-DSection-E Section-E Section-E
- 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 -->
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 -gcd /project_root && lite-server
The title of the track point. If not set, the content will be used.
The easing animation that will be used on track moving. Please visit here for details: https://easings.net/zh-tw
How long will be moved to the target. Unit in ms, 2000 = 2 seconds.