Scrolld.js

DYNAMIC PAGE SCROLLING

Scrolld.js

DYNAMIC PAGE SCROLLING

What is Scrolld.js?

Scrolld.js is a unique open source plugin for jQuery. Scrolld.js provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values. With Scrolld.js your scrolling to items will always be exact and will always provide the best user experience. Scrolld.js is specifically designed to support responsive designs and turns navigating long pages into a simple task. Scrolld.js is intended for easy use and is fully deployable within minutes.

Scrolld.js is simple and works with just an element id tag.

Scrolld.js is in the alpha stage and will continue to evolve, check back for more features and other plug-ins.


Comments, Questions, Bugs? Feel free to contact at:
Feel free to contact, scrolldjs@gmail.com

How To Use

scrolld.js
  1. Download the source & upload it to your server.
  2. Place the script include file in the bottom of on your page body.
    Ex:
    <script type="text/javascript" src="../js/scrolld.js"></script>
  3. Place this script trigger function in the bottom of on your page body to turn on the plugin.
    Ex:
    <script type="text/javascript"> $("[id*='Btn']").stop(true).on('click',function(e){e.preventDefault();$(this).scrolld();}); </script>
  4. Use specific id tags to control the scrolling function, one for the 'anchor' & one for the target.
    Anchor id must be in the format of '*Btn' and target id must be '*'.
    Ex:
    <a id='useBtn' class='*' href='*'>
    <div id='use' class='*'>
  5. Keep the defaults or easily tweak the settings for a custom fit.
* Indicates you can add any custom values you want.

Tweaks

Scrolld.js was built with quick and simple customization in mind. You can easily customize the entire experience with these few parameters.

Web Settings:
* Head to the defaults section of the scrolld.js / scrolld.min.js file * var scrolldDistance = scrolldPre; var scrolldDistanceMin = scrolldPre; var scrolldSpeed = speed11; var scrolldEasing = 'scrolldEasing1'; var scrolldFixed = true;
Mobile Settings:
* Head to the defaults section of the scrolld.js / scrolld.min.js file * var scrolldMobile = true; var scrolldMobileWidth = 979; var scrolldMobileDistance = scrolldPre; var scrolldMobileDistanceMin = scrolldPre; var scrolldMobileSpeed = speed11; var scrolldMobileEasing = 'scrolldEasing1'; var scrolldMobileFixed = true;
Additional Settings:
* Located at top of the scrolld.js / scrolld.min.js file * var scrolldCustom = 0; var scrolldNavBar = 'fixedNavBar'; var scrolldMobileNavBar = 'fixedNavBar';



Targeting A Single Div Easing - Web, Or Mobile, Or Both:
Simply give the anchor a class name of the desired easing method, include Mobile at the end of the class to target only mobile, include both to target both. <a id='useBtn' class='easeOutBounce easeOutBounceMobile' href='*'>


Trigger a function after scroll completes, on animation end - Anything you want, toggle classes, alerts, etc:
Script is located at the bottom of the plugin file, simply insert your desired functions there.
$(":animated").promise().done(function(){ //Write function here });


Settings Explained + Options


  1. scrolldDistance - Set scroll distance from target div:
    scrolldPre* = Scrolls to the exact top of div less dynamic value based on window height scrolldTop = Scrolls to the exact top of div ( less nav bar height if set ) scrolldCenter = Scrolls to div in the exact center of browser window
  2. scrolldDistanceMin - Set scroll distance from target div if div is larger than current window size:
    scrolldPre* = Scrolls to the exact top of div less dynamic value based on window height scrolldTop = Scrolls to the exact top of div ( less nav bar height if set ) scrolldCenter = Scrolls to div in the exact center of browser window
  3. scrolldCustom - Set additonal [+-] distance from target div ( for top & pre settings only ):
    *scrolldCustom is separate from the other parameters and is located at the very top of the scrolld.js/scrolld.min.js file.
    scrolldCustom = 0*
  4. scrolldSpeed - Set scroll speed to target; Scrolls to div in X miliseconds:
    var speed1 = 100; var speed2 = 200; var speed3 = 300; var speed4 = 400; var speed5 = 500; var speed6 = 600; var speed7 = 700; var speed8 = 800; var speed9 = 900; var speed10 = 1000; var speed11* = 1100; var speed12 = 1200; var speed13 = 1300; var speed14 = 1400; var speed15 = 1500; var speed16 = 1600; var speed17 = 1700; var speed18 = 1800; var speed19 = 1900; var speed20 = 2000; var speedX = 1234; /// Set Custom Speed Here
  5. scrolldEasing - Set scroll easing function type; Works with all jQuery preset functions + additional custom made Scrolld.js functions:

    jQuery Preset Easings:

    * Visit Easings.net for current jQuery easing presets in action * linear swing jswing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce
    Custom Easings:
    * New unique easing methods personally developed for Scrolld.js * scrolldEasing1* scrolldEasing2 scrolldEasing3
  6. scrolldFixed - Set boolean if you use a fixed website header:
    var scrolldFixed = true*;
    Note: If you use a fixed header, you must also define the id for the header div for both mobile & web:
    * Located at the top of the scrolld.js / scrolld.min.js file * var scrolldNavBar = 'fixedNavBar'; var scrolldMobileNavBar = 'fixedNavBar';

  7. Scrolld Mobile-Specific Settings:

    scrolldMobile:
    Set boolean if your website uses a responsive mobile layout.

    scrolldMobileWidth:
    Define the max width used for mobile devices to trigger mobile functions. (Responsive Designs)

    scrolldMobileDistance:
    Set scroll distance from target div.

    scrolldMobileDistanceMin:
    Set scroll distance from target div if div is larger than current window size.

    scrolldMobileSpeed:
    Set scroll speed to target used only with mobile devices.

    scrolldMobileEasing:
    Set scroll easing function used only with mobile devices.

    scrolldMobileFixed:
    Set boolean if your mobile layout uses a fixed header.
* Indicates default values.

Demo

This website is built using Scrolld.js.

Visit the demo page and test out different tweaks.

Demo Page »