Делаем портфолио с jQuery и Canvas

<!DOCTYPE html> <!-- Defining the document as HTML5 --> 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>"Shutter Effect" with Canvas and jQuery | Tutorialzine Demo</title>    
 

<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
<link rel="stylesheet" type="text/css" href="/assets/jquery.shutter/jquery.shutter.css" /> 

 
</head>   

<body>    
 

<div id="top"></div>    
 

<div id="page">   
 

    <h1>Shutter Folio Photography</h1>  
 

    <div id="container">  
        <ul>

            <li><img src="/assets/img/photos/1.jpg" width="640" height="400" /></li>
            <li><img src="/assets/img/photos/2.jpg" width="640" height="400" /></li>

            <li><img src="/assets/img/photos/3.jpg" width="640" height="400" /></li>
            <li><img src="/assets/img/photos/4.jpg" width="640" height="400" /></li>

        </ul> 
    </div>

 
</div>    

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 

<script src="/assets/jquery.shutter/jquery.shutter.js"></script> 
<script src="/assets/js/script.js"></script>

 
</body>   

</html>

<div class="shutterAnimationHolder" style="width: 640px; height: 400px;"> 
  <div class="film"

  style="height: 15000px; width: 1000px; margin-left: -500px; top: -300px;"> 
 

    <canvas width="1000" height="1000"></canvas>
    <canvas width="1000" height="1000"></canvas>

    <canvas width="1000" height="1000"></canvas>
    <canvas width="1000" height="1000"></canvas>

    <canvas width="1000" height="1000"></canvas>
    <canvas width="1000" height="1000"></canvas>

    <canvas width="1000" height="1000"></canvas>
    <canvas width="1000" height="1000"></canvas>

    <canvas width="1000" height="1000"></canvas>
    <canvas width="1000" height="1000"></canvas>

    <canvas width="1000" height="1000"></canvas>
    <canvas width="1000" height="1000"></canvas>

    <canvas width="1000" height="1000"></canvas>
    <canvas width="1000" height="1000"></canvas>

    <canvas width="1000" height="1000"></canvas>    
  </div>

</div>

.shutterAnimationHolder .film canvas{   
    display: block;

    margin: 0 auto; 
}

 
.shutterAnimationHolder .film{  

    position:absolute;  
    left:50%;

    top:0;  
}

 
.shutterAnimationHolder{    

    position:absolute;  
    overflow:hidden;

    top:0;
    left:0;

    z-index:1000;   
}

(function(){    
 

    // создаём jQuery плагин:   
 

    $.fn.tzShutter = function(options){ 
 

        // Проверяем работает ли  canvas:
        var supportsCanvas = 'getContext' in document.createElement('canvas');  

 
        // начальные значения:  

 
        options = $.extend({    

            openCallback:function(){},
            closeCallback:function(){}, 

            loadCompleteCallback:function(){},  
            hideWhenOpened:true,

            imgSrc: 'jquery.shutter/shutter.png'    
        },options);

 
        var element = this; 

 
        if(!supportsCanvas){    

 
            // если canvas не работает  

            // то заканчиваем работу:   
 

            element.bind('shutterOpen',options.openCallback)    
                   .bind('shutterClose',options.closeCallback);

 
            options.loadCompleteCallback(); 

 
            return element; 

        }   
 

        window.setTimeout(function(){   
 

            var frames = {num:15, height:1000, width:1000},
                slices = {num:8, width: 416, height:500, startDeg:30},  

                animation = {
                    width : element.width(),    

                    height : element.height(),
                    offsetTop: (frames.height-element.height())/2   

                },
                rotateStep = 2*Math.PI/slices.num,  

                rotateDeg = 30;
            slices.angleStep = ((90 - slices.startDeg)/frames.num)*Math.PI/180; 



            var img = new Image();  
 

            // метод обратного действия:    
            img.onload = function(){

 
                window.console && console.time && console.time("Generating Frames");    

 
                // 15 элементов в canvas    

 
                var film = $('',{  

                    className: 'film',  
                    css:{

                        height: frames.num*frames.height,   
                        width: frames.width,

                        marginLeft: -frames.width/2,    
                        top: -animation.offsetTop

                    }   
                });



                var animationHolder = $('',{
                    className: 'shutterAnimationHolder',    

                    css:{
                        width:animation.width,  

                        height:animation.height 
                    }

                }); 
 

                for(var z=0;z<frames.num;z++){  
 

                    // Создание 15 элементов.   
 

                    var canvas  = document.createElement('canvas'), 
                        c       = canvas.getContext("2d");

 
                    canvas.width=frames.width;  

                    canvas.height=frames.height;    
 

                    c.translate(frames.width/2,frames.height/2);    
 

                    for(var i=0;i<slices.num;i++){  
 


                        c.rotate(-rotateStep);      
                        c.save();

 
                        // Изменить главную точку   

                        c.translate(0,frames.height/2);


                        c.rotate((frames.num-1-z)*slices.angleStep);

 
                        var offset = 0; 

                        if((frames.num-1-z) <5){
                            offset = (frames.num-1-z)*5;    

                        }   
 

                        // Рисуем заменитель
                        c.drawImage(img,-slices.width/2,-(frames.height/2 + offset));   

 
                        // Возвращаем предыдущие настройки. 

                        c.restore();    
                    }


                    film.append(canvas);    
                }

 

                animationHolder.append(film);   
 

                if(options.hideWhenOpened){ 
                    animationHolder.hide();

                }   
 

                element.css('position','relative').append(animationHolder); 
 

                var animating = false;  
 

                element.bind('shutterClose',function(){

 
                    if(animating) return false; 

                    animating = true;   
 

                    var count = 0;  
 

                    var close = function(){ 
 

                        (function animate(){
                            if(count>=frames.num){  

                                animating=false;    
 

                                options.closeCallback.call(element);

 
                                return false;   

                            }   
 

                            film.css('top',-frames.height*count - animation.offsetTop); 
                            count++;

                            setTimeout(animate,20); 
                        })();

                    }   
 

                    if(options.hideWhenOpened){
                        animationHolder.fadeIn(60,close);   

                    }
                    else close();   

                }); 
 

                element.bind('shutterOpen',function(){  
 

                    if(animating) return false; 
                    animating = true;

 
                    var count = frames.num-1;   

 
                    (function animate(){    

                        if(count<0){    
 

                            var hide = function(){  
                                animating=false;

                                options.openCallback.call(element);

                            };  
 

                            if(options.hideWhenOpened){
                                animationHolder.fadeOut(60,hide);   

                            }
                            else{   

                                hide(); 
                            }

 
                            return false;   

                        }   
 

                        film.css('top',-frames.height*count - animation.offsetTop); 
                        count--;

 
                        setTimeout(animate,20); 

                    })();   
                });

 

                window.console && console.timeEnd && console.timeEnd("Generating Frames");  
                options.loadCompleteCallback();

            };  
 

            img.src = options.imgSrc;   
 

        },0);   
 

        return element; 
    };

 
})(jQuery); 

$(document).ready(function(){

    var container = $('#container'),
        li = container.find('li');

        container.tzShutter({
        imgSrc: 'assets/jquery.shutter/shutter.png',
        closeCallback: function(){

            li.filter(':visible:first').hide();

            if(li.filter(':visible').length == 0){
                li.show();
            }

                setTimeout(function(){container.trigger('shutterOpen')},100);
        },
        loadCompleteCallback:function(){
            setInterval(function(){
                container.trigger('shutterClose');
            },4000);

            container.trigger('shutterClose');
        }
    });

});