Menu
Hi
I am a javascript newbie but would really appreciate some help with this issue.
I am using tutorial do produce a ‘mouseenter’/’mouseleave’ scroll. but I would like it instead on rolling over the webpage to the left and right to make it scroll to be able to click a arrow to make it scroll…
code:
[CODE]<script type=”text/javascript” src=”mootools.svn.js”></script>
<script type=”text/javascript”>
window.addEvent(‘domready’, function(){
var scroll2 = new Scroller(‘container’, {area: 100, velocity: 1});
// container
$(‘container’).addEvent(‘mouseenter’, scroll2.start.bind(scroll2));
$(‘container’).addEvent(‘mouseleave’, scroll2.stop.bind(scroll2));
});
</script>
html:
[CODE]</head>
<body>
<div id=”container”>
<div class=”main-content”>
<div class=”section”>
<h1>Horizontal Scroller</h1>
<strong>Note:
Move your mouse to the right and to the left to scroll to the right and to the left the
content hidden in the main layer.</strong><br /><br />
Move your mouse to the right —-><br /><br />
Take a look at my site
<a href=”http://woork.blogspot.com”>http://woork.blogspot.com</a>
</div>
<div class=”section”>
<h1>Am I using Flash to do it?</h1>
No! Just pure CSS and HTML code…
</div>
<div class=”section”>
<h1>How do it?</h1>
You can implement this effect using Mootools and just some lines of code…<br /><br />
<strong>Move your mouse to the right of the main stage…–></strong>
</div>
<div class=”section”>
<h1>About Me</h1>
Add your content here…
</div>
<div class=”section”>
<h1>Bookmarks</h1>
Add your content here…
</div>
<div class=”section”>
<h1>Social Network</h1>
Add your content here…
</div>
<div class=”section”>
<h1>The end</h1>
<strong> Move your mouse to the left!
<—move!</strong>
</div>
</div>
</div>
</body>
</html>