Demo 1: Vertical Auto-Scroll
Basic vertical scrolling with automatic play and pause on hover.
const scrollbox = new ScrollBox(document.getElementById('demo1'), {
direction: 'vertical',
autoPlay: true,
delay: 3
});Demo 2: Linear Marquee Style
Smooth continuous scrolling like a traditional marquee.
const scrollbox = new ScrollBox(document.getElementById('demo2'), {
direction: 'vertical',
linear: true,
step: 1,
delay: 0,
speed: 50
});- 📰 Breaking: ScrollBox 2.0 uses modern JavaScript
- 🎯 No jQuery dependency required anymore
- 🔧 Built with Rollup, Babel, and ESLint
- 🌟 Better performance with ES6+ features
- 💡 Full documentation and examples included
- 🎨 Easy to customize with CSS
Demo 3: Horizontal Image Carousel
Horizontal scrolling perfect for image galleries.
const scrollbox = new ScrollBox(document.getElementById('demo3'), {
direction: 'horizontal',
autoPlay: true,
delay: 2
});Demo 4: Manual Controls
Control with buttons - autoplay disabled, manual navigation.
const scrollbox = new ScrollBox(document.getElementById('demo4'), {
direction: 'vertical',
autoPlay: false
});
// Control with events
document.getElementById('prev').addEventListener('click', () => {
document.getElementById('demo4').dispatchEvent(new Event('backward'));
});- 🎮 Item 1 - Manually controlled scrolling
- 🎯 Item 2 - Use the buttons below to navigate
- ⚡ Item 3 - No auto-scroll enabled
- 🎨 Item 4 - Perfect for user-controlled interfaces
- 🚀 Item 5 - Modern event-driven architecture
- 💡 Item 6 - Easy to integrate with your UI
Demo 5: jQuery Version (Legacy Support)
jQuery plugin wrapper for backward compatibility.
// Still works with jQuery!
$('#demo5').scrollbox({
direction: 'vertical',
autoPlay: true,
delay: 3
});- 🔌 Backward compatible with jQuery
- 💾 Your existing code still works!
- 🔄 Same API as version 1.x
- ✅ No breaking changes for jQuery users
- 🎯 But we recommend using vanilla JS for new projects
- ⚡ Better performance without jQuery dependency