WEB 웹팁 디자인팁 폰트 컬러 UI/UX 모바일UI Widget 디자인소스 기획팁 웹서비스 회사복지 스타트업 회사후기 메모/서식 퍼블팁 추천사이트 HTML•CSS 자바스크립트 jQuery React 앵귤러JS Node.js Codepen 개발팁 PHP 한글코딩 인터뷰 안드로이드 오픈API 파이썬 Flutter 서버관리팁

simplyScroll v2

2015년 09월 02일

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 for optimal performance
Supports looped scrolling (infinite effect)
Fully customisable via CSS & HTML
Supports jQuery 1.2.6 and higher (tested up to 1.7.1)
Works on all major browsers (including IE6/7!)

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 page may look odd (or better)!
Pause and resume

DOWNLOAD

simplyScroll is open source and dual licensed under MIT and GPL licenses. Latest version simplyScroll 2.0.5 released 10/05/12

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

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)

COMMENTS / FEEDBACK

Notes/issues:

simplyScroll jumping? Make sure you specify images sizes or start on window load (Chrome is especially affected by this - it's just so darn fast!)

You can't use auto scrolling with buttons (yet - speed-up is a planned feature)

There's a bug in Chrome 17 (released Feb 12) that returns a false positive on a touch support test (causing hover events not to be setup), version 2.0.3 fixes this.

Any feedback or bugs should be directed to @logicbox orwill@logicbox.net. Enjoy!