<html>
<head>
<title>Magic Scroll: Surprise</title>
<!-- link to magicscroll.css file -->
<link rel="stylesheet" type="text/css" href="magicscroll/magicscroll.css" media="screen"/>
<style type="text/css">
.MagicScrollItem {
padding: 0 20px;
}
.MagicScroll {
float:left;
margin-right: 3px;
}
</style>
<!-- link to magicscroll.js file -->
<script src="magicscroll/magicscroll.js" type="text/javascript"></script>
<script type="text/javascript">
var loaded = {
'scroll1': false,
'scroll2': false,
'scroll3': false
}
MagicScroll.options = {
'arrows': false,
'speed': 0,
'item-tag': 'img',
'direction': 'bottom',
// add onload callback
'onload': function(scroll) {
// current scroll was loaded
loaded[scroll.id] = true;
// ensure that all scrolls was loaded
if(loaded.scroll1 && loaded.scroll2 && loaded.scroll3) {
$mjs('scrollIt').innerHTML = 'Scroll IT!';
// enable scrollit button
$mjs('scrollIt').disabled = '';
}
}
};
var load = (function() {
// disable scroll button
$mjs('scrollIt').disabled = 'disabled';
// images that will be used for scroll
var images = [
'images/yummy1.jpg',
'images/yummy2.jpg',
'images/yummy3.jpg',
'images/yummy4.jpg',
'images/yummy5.jpg',
'images/yummy6.jpg'
];
// this function needed to randomize array
function rand() {
return Math.round(Math.random()) - 0.5;
}
var k = 1, c, imgs = [], div;
while(k < 4) {
c = 0;
// create scroll div
div = $J.$new('div', {'id': 'scroll' + k, 'class': 'MagicScroll msborder vertical'});
while(c < 6 * (k + 3)) {
// clone and shufle images array if needed
if(!imgs.length) {
imgs = images.join('|').split('|').sort(rand);
}
// append next image
div.appendChild($J.$new('img', {'src': imgs.shift(), 'onclick': 'jump();'}));
c++;
}
// append scroll
$mjs('wrapper').appendChild(div);
k++;
}
// init scrolls
MagicScroll.init();
});
// return random value beetwen a and b (including a and b)
function random(a, b) {
return Math.floor(Math.random() * (b+1)) + a;
}
function jump() {
// disable scroll button
$mjs('scrollIt').disabled = 'disabled';
var k = 0, c, s, div;
while(k < 3) {
c = 6 * (k + 4);
MagicScroll.jump('scroll' + (k+1), {
// check random step
target: '+' + (c - (c * 2 / 3 + random(0, c / 6) - 1)),
direction: 'backward',
duration: 1500 + k * 100,
// enable scroll button by callback
callback: k == 2 ? function(){$mjs('scrollIt').disabled = ''} : $J.$F
});
k++;
}
}
$mjs(document).je1('domready', load);
</script>
</head>
<body>
<button id="scrollIt" disabled="disabled" onclick="jump()">Loading...</button>
<div id="wrapper"></div>
</body>
</html>