As I promised earlier , here is the code to do it.
Look at the Final Output with some other Mootools Goodies at my website.
Assuming our html file is index.html and we have two folders names ‘js’ and ‘css’ to keep javascript and css files respectively. Download mootools.js and save in js/ folder.
Step 1: Write HTML File ( I tookoff DOCTYPE and other header stuff to make it simple)
index.html
<html>
<head>
<script type=”text/javascript” src=”js/mootools.js” mce_src=”js/mootools.js”></script>
<script type=”text/javascript” src=”js/site.js” mce_src=”js/site.js”></script>
<link rel = “stylesheet” type=”text/css” href=” css/site.css” />
<link rel = “stylesheet” type=”text/css” href=” css/h.css” />
</head>
<body>
<ul>
<li id=”nav_about” class=”nav”> <span><a href=”#content_about”>About</a></span> </li>
<li id=”nav_portfolio” class=”nav”> <span><a href=”#content_portfolio”>Portfolio</a></span> </li>
<li id=”nav_projects” class=”nav”> <span><a href=”#content_projects”>Projects</a></span> </li>
<li id=”nav_blog” class=”nav”> <span><a href=”#content_blog”>Blog</a></span> </li>
</ul>
<div id=”demo-container”>
<div id=”demo-wrapper”>
<div id=”content_about” class=”scrolling-content”>
<div class=”box-content”>
<h1>About</h1>
<p> about about about about about about about about about about about
about </p>
</div>
</div>
<div id=”content_portfolio” class=”scrolling-content”>
<div class=”box-content”>
<h1>PortFolio</h1>
<p> portfolio portfolio portfolio portfolio portfolio portfolio portfolio
</p>
</div>
</div>
<div id=”content_projects” class=”scrolling-content”>
<div class=”box-content”>
<h1>Projects</h1>
<p> project project project project project project </p>
</div>
</div>
<div id=”content_blog” class=”scrolling-content”>
<div class=”box-content”>
<h1>Blog</h1>
<p> blog blog blog blog blog blog blog blog </p>
</div>
</div>
</div>
</div>
</body>
</html>
Step 2 : Write Javascript to do Scroll Effect
js/site.js
window.addEvent(’domready’, function(){
var scroll = new Fx.Scroll(’demo-wrapper’, {
wait: false,
duration: 1500,
transition: Fx.Transitions.Quad.easeInOut
});
$(’nav_about’).addEvent(’click’, function(event) {
event = new Event(event).stop();
scroll.toElement(’content_about’);
});
$(’nav_projects’).addEvent(’click’, function(event) {
event = new Event(event).stop();
scroll.toElement(’content_projects’);
});
$(’nav_portfolio’).addEvent(’click’, function(event) {
event = new Event(event).stop();
scroll.toElement(’content_portfolio’);
});
$(’nav_blog’).addEvent(’click’, function(event) {
event = new Event(event).stop();
scroll.toElement(’content_blog’);
});
});
Step 3 : Stylesheets
css/site.css
.nav {
float: left;
display: block;
width: 200px;
height: 50px;
text-align:center;
list-style-type: none;
}
.nav span
{
font: small-caps 900 14px arial;
color: blue;
}
#demo-container {
overflow: hidden;
width:800px;
height:600px;
}
#demo-wrapper {
width:800px;
position: relative;
height: 600px;
overflow: hidden;
}
.scrolling-content {
height: 600px;
}
css/h.css
.scrolling-content {
width:3200px;
position: absolute;
}
#content_about
{
left:0;top:0;
}
#content_portfolio
{
left:800px;top:0;
}
#content_projects
{
left:1600px;top:0;
}
#content_blog
{
left:2400px;top:0;
}
Thats It!
Optional
If you prefer vertical Scrolling rather than Horizontal……. its easy….. use this css instead of h.css
css/v.css
.scrolling-content {
width:800px;
float:left;
}
Let me know, If you like it.
The scrolling window at Panic’s coda website pretty impressive. I didnt go through their javascript but as I already worked on Mooltools Scroll functionality, I know its not that hard to create same effect in Mootools. Mootools is a lightweight javascript library and is pretty easy to playwith.
Look at my website for similar effect I got using mootools. I am cleaning my code to post it on blog soon.
Update:
I posted the source code here
