jQuery simplyScroll

Jump to: [Features] [Examples] [Download] [Installation] [Config]

This plugin is now legacy and is mostly unsupported!
Core functionality still works, but all features described may not work as intended or at all, please use at your own risk!

simplyScroll is a scroll-tastic jQuery plugin that can animate (scroll) content either automatically or manually, horizontally or vertically, backwards or forwards.

New Features in v2

Auto-scroll in either direction
RTL support, normalises browser RTL scroll implementations
Touch support
Now automatically supports unequal sized elements in loop mode
Pause/play button option

Features

Supports scrolling horizontally and vertically both forwards and backwards
Uses DOM ScrollTop/ScrollLeft only
Supports looped scrolling (infinite effect)
Fully customisable via CSS & HTML
Supports jQuery 1.2.6 and higher
Works on all modern browsers

Examples

Horizontal scroll with loop (infinite effect)
As above but manual scroll with buttons
Manual Vertical scroll, with buttons, looped
Custom HTML example, scrolling backwards
RTL mode
Pause and resume

Download

simplyScroll is open source and licensed under a MIT license. Latest version simplyScroll 2.1.1 released 16/07/18

jquery.simplyscroll.zip	53 Kb	Complete package including CSS & buttons.png
jquery.simplyscroll.js	13 Kb	Source
jquery.simplyscroll.min.js	8 Kb	minified (uncompressed)

NPM Installation

yarn add jquery-simplyscroll or npm install jquery-simplyscroll --save

Basic usage (CommonJS)

var $ = require('jquery');
require('jquery-simplyscroll');

$("#scroller").simplyScroll({
  speed: 1
});

Configuration

simplyScroll can be configured with a number of options

Property	Default	Description
customClass	'simply-scroll'	Class name for styling
frameRate	24	Number of movements/frames per second
speed	1	Number of pixels moved per frame, in 'loop' mode must be divisible by total width of scroller
orientation	'horizontal'	'horizontal or 'vertical' - not to be confused with device orientation
direction	'forwards'	'forwards' or 'backwards'
auto	true	Automatic scrolling, use false for button controls
autoMode	'loop'	auto = true, 'loop' or 'bounce', (disables buttons)
manualMode	'end'	auto = false, 'loop' or 'end' (end-to-end)
pauseOnHover	true	Pause scroll on hover (auto only)
pauseOnTouch	true	Touch enabled devices only (auto only)
pauseButton	false	Creates a pause button (auto only)
startOnLoad	false	Init plugin on window.load (to allow for image loading etc)
initialOffset	0	Start with an initial pixel offset

Comments / Feedback

Notes/issues:

simplyScroll jumping? Make sure you specify images sizes or initiate the plugin on window load i.e. use startOnLoad option or $(window).on('load', ...)

Feel free to contact me @logicbox or will@logicbox.net, however due to work commitments I cannot guarantee a response.

simplyScroll v2