- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
«ScrollPane» Scroll Effect
Ноябрь 15, 2010
This is a Scroll Script that allows adding add a custom horizontal scroll for extra content inside the block.
JavaScript
In order to make the script work, the index-#.html file with a gallery should contain these lines of HTML code:
The ScrollHorizontalPane.js file contains these lines of code that initialize the script functionality with basic values:
Here the script attributes define the following values:
• scrollbarHeight – the height of the generated scrollbar in pixels;
• scrollbarMargin – the amount of space to leave on the side of the scrollbar in pixels;
• wheelSpeed – the speed the pane will scroll in response to the mouse wheel in pixels;
• showArrows – whether to display arrows for the user to scroll with;
• arrowSize – the height of the arrow buttons if showArrows is set to true;
• animateTo – whether to animate when calling scrollTo and scrollBy;
• dragMinWidth – the minimum width to allow the drag bar to be;
• dragMaxWidth – the maximum width to allow the drag bar to be;
• animateInterval – the interval in milliseconds to update an animating pane (default 100);
• animateStep – the amount to divide remaining scroll distance by when animating (default 3);
• maintainPosition – whether you want the contents of the scroll pane to maintain it’s position when you re-initialize it – so it doesn’t scroll as you add more content (default true);
• resize – whether or not to have resizing turned on or not;
• minimumWidth – the minimum width to allow the jScrollHorizontalPane to be resized to; only effective when resize is on;
• reset – when set to true all the global properties will be reset. This is useful for dynamic refreshes on the page.
HTML
Below you can see general HTML script representation:
CSS
You can find script related stylesheet in the main style.css file.