Full Screen Scroller

Bootstrap Full Screen Scroller plugin

Bootstrap Full Screen Scroller plugin creates amazing one-page vertically and horizontally scrolling application with mouse and keyboard steering.

  • mousewheel - vertically scrolling
  • arrow keys - vertically and horizontally screen switching
  • home key - go to top view
  • end key - go to bottom view

To start working with Full Screen Scroller plugin see "Getting Started" tab on this page.

Basic example

Live preview
Edit in sandbox 
        
            
        <div class="full-screen-scroller">
          <div class="fss-dotted-scrollspy">
            <button type="button" class="fss-nav-btn fss-mainview-prev">
              <i class="fas fa-chevron-up"></i>
            </button>
            <a href="#view-1" class="fss-nav-item active"></a>
            <a href="#view-2" class="fss-nav-item"></a>
            <a href="#view-3" class="fss-nav-item"></a>
            <a href="#view-4" class="fss-nav-item"></a>
            <button type="button" class="fss-nav-btn fss-mainview-next">
              <i class="fas fa-chevron-down"></i>
            </button>
          </div>
      
          <div fss-anchor="view-1" class="fss-mainview fss-active">
            <div class="fss-subview">
              <div class="fss-dotted-scrollspy">
                <button type="button" class="fss-nav-btn fss-subview-prev">
                  <i class="fas fa-chevron-left"></i>
                </button>
                <a href="#subview-a" class="fss-nav-item active"></a>
                <a href="#subview-b" class="fss-nav-item"></a>
                <a href="#subview-c" class="fss-nav-item"></a>
                <button type="button" class="fss-nav-btn fss-subview-next">
                  <i class="fas fa-chevron-right"></i>
                </button>
              </div>
      
              <div fss-anchor="subview-a" class="fss-subview-item subview-a">
                <div class="box">
                  <div class="info">
                    <p>View 1</p>
                    <p>Subview A</p>
                  </div>
                </div>
              </div>
      
              <div fss-anchor="subview-b" class="fss-subview-item subview-b fss-active">
                <div class="box">
                  <div class="info">Subview B</div>
                </div>
              </div>
      
              <div fss-anchor="subview-c" class="fss-subview-item subview-c">
                <div class="box">
                  <div class="info">Subview C</div>
                </div>
              </div>
            </div>
          </div>
      
          <div fss-anchor="view-2" class="fss-mainview view3">
            <div class="box">
              <div class="info">View 2</div>
            </div>
          </div>
      
          <div fss-anchor="view-3" class="fss-mainview">
            <div class="fss-subview">
              <div class="fss-dotted-scrollspy">
                <button type="button" class="fss-nav-btn fss-subview-prev">
                  <i class="fas fa-chevron-left"></i>
                </button>
                <a href="#subview-d" class="fss-nav-item active"></a>
                <a href="#subview-e" class="fss-nav-item"></a>
                <button type="button" class="fss-nav-btn fss-subview-next">
                  <i class="fas fa-chevron-right"></i>
                </button>
              </div>
      
              <div fss-anchor="subview-d" class="fss-subview-item subview-d">
                <div class="box">
                  <div class="info">
                    <p>View 3</p>
                    <p>Subview D</p>
                  </div>
                </div>
              </div>
      
              <div fss-anchor="subview-e" class="fss-subview-item subview-e">
                <div class="box">
                  <div class="info">Subview E</div>
                </div>
              </div>
            </div>
          </div>
      
          <div fss-anchor="view-4" class="fss-mainview view5">
            <div class="box">
              <div class="info">View 4</div>
            </div>
          </div>
        </div>
      
        
    
        
            
        $(document).ready(function () {
          $(".full-screen-scroller").fullScreenScroller();
        });

Example with navbar and image backgrounds

Live preview
Edit in sandbox 
        
            
         <!--Navbar-->
        <nav class="navbar fixed-top navbar-expand-lg navbar-dark primary-color">

          <!-- Navbar brand -->
          <a class="navbar-brand" href="#">Navbar</a>

          <!-- Collapse button -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <!-- Collapsible content -->
          <div class="collapse navbar-collapse" id="basicExampleNav">

            <!-- Links -->
            <ul class="navbar-nav mr-auto">
              <li class="nav-item">
                <a class="nav-link fss-nav-item" href="#view-1">View 1
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link fss-nav-item" href="#view-2">View 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link fss-nav-item" href="#view-3">View 3</a>
              </li>

              <!-- Dropdown -->
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
                  aria-expanded="false">Subviews</a>
                <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item fss-nav-item" href="#subview-a">Subview A</a>
                  <a class="dropdown-item fss-nav-item" href="#subview-b">Subview B</a>
                </div>
              </li>

            </ul>
            <!-- Links -->

            <form class="form-inline">
              <div class="md-form my-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
              </div>
            </form>
          </div>
          <!-- Collapsible content -->

        </nav>
        <!--/.Navbar-->

        <div class="full-screen-scroller">
          <div class="fss-dotted-scrollspy">
            <button type="button" class="fss-nav-btn fss-mainview-prev">
              <i class="fas fa-chevron-up"></i>
            </button>
            <a href="#view-1" class="fss-nav-item active"></a>
            <a href="#view-2" class="fss-nav-item"></a>
            <a href="#view-3" class="fss-nav-item"></a>
            <button type="button" class="fss-nav-btn fss-mainview-next">
              <i class="fas fa-chevron-down"></i>
            </button>
          </div>

          <div fss-anchor="view-1" class="fss-mainview fss-active">
            <div class="fss-subview">
              <div class="fss-dotted-scrollspy">
                <button type="button" class="fss-nav-btn fss-subview-prev">
                  <i class="fas fa-chevron-left"></i>
                </button>
                <a href="#subview-a" class="fss-nav-item active"></a>
                <a href="#subview-b" class="fss-nav-item"></a>
                <button type="button" class="fss-nav-btn fss-subview-next">
                  <i class="fas fa-chevron-right"></i>
                </button>
              </div>

              <div fss-anchor="subview-a" class="fss-subview-item subview-a" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/images/89.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
                <div class="box">
                  <div class="info">
                    <p>View 1</p>
                    <p>Subview A</p>
                  </div>
                </div>
              </div>

              <div fss-anchor="subview-b" class="fss-subview-item fss-active" style="background-image: url('https://mdbootstrap.com/wp-content/uploads/2015/10/cover-ca-compressor2.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
                <div class="box">
                  <div class="info">Subview B</div>
                </div>
              </div>
            </div>
          </div>

          <div fss-anchor="view-2" class="fss-mainview" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/images/76.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
            <div class="box">
              <div class="info">View 2</div>
            </div>
          </div>

          <div fss-anchor="view-3" class="fss-mainview" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/images/91.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
            <div class="box">
              <div class="info">View 3</div>
            </div>
          </div>
        </div>
      
        
    
        
            
        $(document).ready(function () {
          $(".full-screen-scroller").fullScreenScroller();
        });

Plugin options and customization

Edit in sandbox 
        
            
      $(document).ready(function () {
        $(".full-screen-scroller").fullScreenScroller({
          options
        });
      });

The table below shows the advanced options and parameters which you can pass in init function.

Name Type Default Description Example
animSpeedMainView Number 700 Animation speed of main views: 0 - fastest animSpeedMainView: 500
animSpeedSubView Number 700 Animation speed of subviews: 0 - fastest animSpeedSubView: 500
animEffectMainView String easeInOutCubic Animation effect of mainviews change - jQuery easing animEffectMainView: "linear"
animEffectSubView String easeInOutCubic Animation effect of subviews change - jQuery easing animEffectSubView: "linear"
useKeyboard Boolean true Use keyboar to change views useKeyboard: false
useScrollbar Boolean false Use scrollbar to change views useScrollbar: true
loopMainViews Boolean false Change horizontal views in carousel mode loopMainViews: true
loopSubViews Boolean false Change vertical views in carousel mode loopSubViews: true
fixedWidth Number 0 (in px) width of the fss-mainview - if 0 - then width = 100% of window (in px) fixedWidth: 900
spaceMainBag Number 0 (in px) a total value of the right and the left CSS margin dimensions of the .fss-mainview spaceMainBag: 100

Plugin methods

Name Parameters Description Example
beforeChange Callback called before views change beforeChange: function() { console.log('will change') }
afterChange Callback called after views change afterChange: function() { console.log('has changed') }
beforeResize Callback called before browser window resize beforeResize: function() { console.log('will resize') }
afterResize Callback called after browser window resize afterResize: function() { console.log('has resized') }

Full Screen Scroller - getting started : download & setup

Download

This plugin requires a purchase.

Buy Full Screen Scroller plugin

Usage

Basic html boilerplate requires elements:

  • .full-page-scroller - main page wrapper
  • .fss-mainview - full screen section scrollable vertically, wrapper for subviews
  • .fss-subview - full screen section scrollable horizontally

For navigation purposes views have to have fss-anchor property which will be used by links.

Basic boilerplate

Edit in sandbox 
        
            
        <div class="full-screen-scroller">
            <div class="fss-mainview">
                <div class="fss-subview-item">
            </div>
        </div>

Boilerplate with navigation

Edit in sandbox 
        
            
      <div class="full-screen-scroller">
        <div class="fss-dotted-scrollspy">
          <button type="button" class="fss-nav-btn fss-mainview-prev"><i class="fas fa-chevron-up"></i></button>
          <a href="#view-1" class="fss-nav-item active"></a>
          <a href="#view-2" class="fss-nav-item"></a>
          <button type="button" class="fss-nav-btn fss-mainview-next"><i class="fas fa-chevron-down"></i></button>
        </div>

        <div fss-anchor="view-1" class="fss-mainview"></div>

        <div fss-anchor="view-2" class="fss-mainview">
          <div class="fss-dotted-scrollspy">
            <button type="button" class="fss-nav-btn fss-mainview-prev"><i class="fas fa-chevron-left"></i></button>
            <a href="#subview-a" class="fss-nav-item active"></a>
            <a href="#subview-b" class="fss-nav-item"></a>
            <button type="button" class="fss-nav-btn fss-mainview-next"><i class="fas fa-chevron-right"></i></button>
          </div>

          <div fss-anchor="subview-a" class="fss-subview-item">
          <div fss-anchor="subview-b" class="fss-subview-item">
        </div>
      </div>