Surprise

Buy now  £29 Get support


  1. <html>
  2.     <head>
  3.         <title>Magic Scroll: Surprise</title>
  4.        
  5.         <!-- link to magicscroll.css file -->      
  6.         <link rel="stylesheet" type="text/css" href="magicscroll/magicscroll.css" media="screen"/>      
  7.         <style type="text/css">
  8.             .MagicScrollItem {
  9.                 padding: 0 20px;
  10.             }
  11.             .MagicScroll {
  12.                 float:left;
  13.                 margin-right: 3px;
  14.             }
  15.         </style>
  16.         <!-- link to magicscroll.js file -->
  17.         <script src="magicscroll/magicscroll.js" type="text/javascript"></script>
  18.         <script type="text/javascript">
  19.             var loaded = {
  20.                 'scroll1': false,
  21.                 'scroll2': false,
  22.                 'scroll3': false
  23.             }
  24.  
  25.             MagicScroll.options = {
  26.                 'arrows': false,
  27.                 'speed': 0,
  28.                 'item-tag': 'img',
  29.                 'direction': 'bottom',
  30.                 // add onload callback
  31.                 'onload': function(scroll) {
  32.                     // current scroll was loaded
  33.                     loaded[scroll.id] = true;
  34.  
  35.                     // ensure that all scrolls was loaded
  36.                     if(loaded.scroll1 && loaded.scroll2 && loaded.scroll3) {
  37.                        $mjs('scrollIt').innerHTML = 'Scroll IT!';
  38.                         // enable scrollit button
  39.                         $mjs('scrollIt').disabled = '';
  40.                     }
  41.                 }
  42.             };
  43.  
  44.             var load = (function() {
  45.                 // disable scroll button
  46.                 $mjs('scrollIt').disabled = 'disabled';
  47.  
  48.                 // images that will be used for scroll
  49.                 var images = [
  50.                     'images/yummy1.jpg',
  51.                     'images/yummy2.jpg',
  52.                     'images/yummy3.jpg',
  53.                     'images/yummy4.jpg',
  54.                     'images/yummy5.jpg',
  55.                     'images/yummy6.jpg'
  56.                 ];
  57.  
  58.                 // this function needed to randomize array
  59.                 function rand() {
  60.                     return Math.round(Math.random()) - 0.5;
  61.                 }
  62.  
  63.                 var k = 1, c, imgs = [], div;
  64.                 while(k < 4) {
  65.                    c = 0;
  66.                    // create scroll div
  67.                    div = $J.$new('div', {'id': 'scroll' + k, 'class': 'MagicScroll msborder vertical'});
  68.                    while(c < 6 * (k + 3)) {
  69.                        // clone and shufle images array if needed
  70.                        if(!imgs.length) {
  71.                            imgs = images.join('|').split('|').sort(rand);
  72.                        }
  73.                        // append next image
  74.                        div.appendChild($J.$new('img', {'src': imgs.shift(), 'onclick': 'jump();'}));
  75.                        c++;
  76.                    }
  77.                    // append scroll
  78.                    $mjs('wrapper').appendChild(div);
  79.                    k++;
  80.                }
  81.  
  82.                // init scrolls
  83.                MagicScroll.init();
  84.  
  85.            });
  86.  
  87.            // return random value beetwen a and b (including a and b)
  88.            function random(a, b) {
  89.                return Math.floor(Math.random() * (b+1)) + a;
  90.            }
  91.  
  92.            function jump() {
  93.                // disable scroll button
  94.                $mjs('scrollIt').disabled = 'disabled';
  95.                var k = 0, c, s, div;
  96.                while(k < 3) {
  97.                    c = 6 * (k + 4);
  98.                    MagicScroll.jump('scroll' + (k+1), {
  99.                        // check random step
  100.                        target: '+' + (c - (c * 2 / 3 + random(0, c / 6) - 1)),
  101.                        direction: 'backward',
  102.                        duration: 1500 + k * 100,
  103.                        // enable scroll button by callback
  104.                        callback: k == 2 ? function(){$mjs('scrollIt').disabled = ''} : $J.$F
  105.                    });
  106.                    k++;
  107.                }
  108.            }
  109.  
  110.            $mjs(document).je1('domready', load);
  111.        </script>
  112.        
  113.     </head>
  114.     <body>
  115.        
  116.         <button id="scrollIt" disabled="disabled" onclick="jump()">Loading...</button>
  117.         <div id="wrapper"></div>
  118.        
  119.     </body>
  120. </html>