Response title
This is preview!
Horizontal smooth scroller - Smooth Div Scroll
in Using jQuery
•
13 years ago
Hi!
As a spin-off from another project I have developed a jQuery plugin that scrolls content horizontally. I call it Smooth Div Scroll since it uses div's for masking and hot spots. Unless you want to, there are no visible buttons, just two hot spots that are mouse sensitive. The further you move the mouse left or right, the faster the scrolling.
It can also be set in autoscroll mode or a sort of hybrid mode where it starts out autoscrolling, but as soon as the user interacts with the hot spots it switches to manual scrolling.
Here's an example of how it's used:
The HTML-code for this example looks like this:
As you can see there are lots of parameters that can be used to customize the scroller, but I won't go into details here. If you are interested the plugin in well documented and I've added several different examples of how it ca be used. You find it here: http://www.maaki.com/thomas/SmoothDivScroll/
Right now my main focus is streamlining it. I don't have the deep knowledge of how javascript works "behind the scenes" and therefore I don't know what parts of the code I should focus on. I'd really appreciate any pointers!
/Thomas Kahn
As a spin-off from another project I have developed a jQuery plugin that scrolls content horizontally. I call it Smooth Div Scroll since it uses div's for masking and hot spots. Unless you want to, there are no visible buttons, just two hot spots that are mouse sensitive. The further you move the mouse left or right, the faster the scrolling.
It can also be set in autoscroll mode or a sort of hybrid mode where it starts out autoscrolling, but as soon as the user interacts with the hot spots it switches to manual scrolling.
Here's an example of how it's used:
<script type="text/javascript">
$(function() {
$("div#makeMeScrollable").smoothDivScroll({scrollingSpeed: 12, mouseDownSpeedBooster: 3, autoScroll: "onstart", autoScrollDirection: "endlessloop", autoScrollSpeed: 2, visibleHotSpots: "onstart", hotSpotsVisibleTime: 9, startAtElementId: "startAtMe"});
});
</script>
The HTML-code for this example looks like this:
<div id="makeMeScrollable">
<div class="scrollingHotSpotLeft"></div>
<div class="scrollingHotSpotRight"></div>
<div class="scrollWrapper">
<div class="scrollableArea">
<img src="images/demo/image_1.jpg" alt="Demo image" />
<img src="images/demo/image_2.jpg" alt="Demo image" />
<img src="images/demo/image_3.jpg" alt="Demo image" id="startAtMe" />
<img src="images/demo/image_4.jpg" alt="Demo image" />
<img src="images/demo/image_5.jpg" alt="Demo image" />
</div>
</div>
</div>
As you can see there are lots of parameters that can be used to customize the scroller, but I won't go into details here. If you are interested the plugin in well documented and I've added several different examples of how it ca be used. You find it here: http://www.maaki.com/thomas/SmoothDivScroll/
Right now my main focus is streamlining it. I don't have the deep knowledge of how javascript works "behind the scenes" and therefore I don't know what parts of the code I should focus on. I'd really appreciate any pointers!
/Thomas Kahn
