ساخت اسلایدشو با افکت شاتر دوربین

ساخت اسلایدشو با افکت شاتر دوربین

در این آموزش ما به شما نحوه ساخت یک اسلایدشو رو میدیم که میتونید به عنوان صفحه نمایش نمونه کار ها نیز از اون استفاده کنید

برای مشاهده لینک وارد شود

خوب کار رو مثل همیشه با نوشتن کد های HTML آغاز می کنیم البته اجازه بدید کمی به کد های HTML بیشتر توجه کنیم.ما در اینجا از المان canvas استفاده خواهیم کرد.

index.html

<!DOCTYPE html> <!-- Defining the document as HTML5 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>&quot;Shutter Effect&quot; with Canvas and jQuery | 8np 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>

تگ content# تصاویر ما را نگه میدارد که به صورت اسلایدشو نمایش داده خواهد شد.به این نکته توجه داشته باشید که مرورگر کاربر باید از canvas پشتیبانی کند در غیر این صورت تصاویر به صورت معمولی نمایش داده میشوند.وقتی که پلاگین شاتر فراخوانی میشود کد HTML زیر تولید میشود.

Generated 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>

هر یک از المان های canvas یکی از انیمیشن های شاتر را نگه میدارند.

اکنون کد های CSS را مینویسم.کار اصلی که این کد ها انجام خواهند داد تولید تصاویر با استفاده از canvas خواهد بود.

jquery.shutter.css

.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;
}

اکنون ما کد های jQuery را مینویسیم .ما در اینجا یک پلاگین jQuery با نام tzShutter  ایجاد می کنیم.بخش مهم این پلاگین جایی است که به کاربرانی که مرورگرشان از تگ canvas پشتیبانی نمی کند کمک می کند.همچنین ما باید به کاربرانمان امکان بستن انیمیشن ها رو نیز بدهیم که اینها توسط shutterOpen و shutterClose که در داخل متد trigger هستند امکان پذیر است.شما هر آنچه که گفته شد را در زیر مشاهده می کنید.

jquery.shutter.js

(function(){

    // Creating a regular jQuery plugin:

    $.fn.tzShutter = function(options){

        // Checking for canvas support. Works in all modern browsers:
        var supportsCanvas = 'getContext' in document.createElement('canvas');

        // Providing default values:

        options = $.extend({
            openCallback:function(){},
            closeCallback:function(){},
            loadCompleteCallback:function(){},
            hideWhenOpened:true,
            imgSrc: 'jquery.shutter/shutter.png'
        },options);

        var element = this;

        if(!supportsCanvas){

            // If there is no support for canvas, bind the
            // callack functions straight away and exit:

            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
                },

                // This will calculate the rotate difference between the
                // slices of the shutter. (2*Math.PI equals 360 degrees in radians):

                rotateStep = 2*Math.PI/slices.num,
                rotateDeg = 30;

            // Calculating the offset
            slices.angleStep = ((90 - slices.startDeg)/frames.num)*Math.PI/180;

            // The shutter slice image:
            var img = new Image();

            // Defining the callback before setting the source of the image:
            img.onload = function(){

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

                // The film div holds 15 canvas elements (or frames).

                var film = $('<div>',{
                    className: 'film',
                    css:{
                        height: frames.num*frames.height,
                        width: frames.width,
                        marginLeft: -frames.width/2, // Centering horizontally
                        top: -animation.offsetTop
                    }
                });

                // The animation holder hides the film with overflow:hidden,
                // exposing only one frame at a time.

                var animationHolder = $('<div>',{
                    className: 'shutterAnimationHolder',
                    css:{
                        width:animation.width,
                        height:animation.height
                    }
                });

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

                    // Creating 15 canvas elements.

                    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++){

                        // For each canvas, generate the different
                        // states of the shutter by drawing the shutter
                        // slices with a different rotation difference.

                        // Rotating the canvas with the step, so we can
                        // paint the different slices of the shutter.
                        c.rotate(-rotateStep);

                        // Saving the current rotation settings, so we can easily revert
                        // back to them after applying an additional rotation to the slice.

                        c.save();

                        // Moving the origin point (around which we are rotating
                        // the canvas) to the bottom-center of the shutter slice.
                        c.translate(0,frames.height/2);

                        // This rotation determines how widely the shutter is opened.
                        c.rotate((frames.num-1-z)*slices.angleStep);

                        // An additional offset, applied to the last five frames,
                        // so we get a smoother animation:

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

                        // Drawing the shutter image
                        c.drawImage(img,-slices.width/2,-(frames.height/2 + offset));

                        // Reverting back to the saved settings above.
                        c.restore();
                    }

                    // Adding the canvas (or frame) to the film div.
                    film.append(canvas);
                }

                // Appending the film to the animation holder.
                animationHolder.append(film);

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

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

                var animating = false;

                // Binding custom open and close events, which trigger
                // the shutter animations.

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

                    if(animating) return false;
                    animating = true;

                    var count = 0;

                    var close = function(){

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

                                // Calling the user provided callback.
                                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;
                                // Calling the user supplied callback:
                                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);
                    })();
                });

                // Writing the timing information if the
                // firebug/web development console is opened:

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

            img.src = options.imgSrc;

        },۰);

        return element;
    };

})(jQuery);

کار دیگری که باید بکنبم این است که هنگام لود شدن صفحه باید تگ canvas مقدار دهی اولیه شود که ما این کار را با کد زیر انجام میدهیم

script.js

$(document).ready(function(){

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

    // Using the tzShutter plugin. We are giving the path
    // to he shutter.png image (located in the plugin folder), and two
    // callback functions.

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

            // Cycling the visibility of the li items to
            // create a simple slideshow.

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

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

            // Scheduling a shutter open in 0.1 seconds:
            setTimeout(function(){container.trigger('shutterOpen')},100);
        },
        loadCompleteCallback:function(){
            setInterval(function(){
                container.trigger('shutterClose');
            },۴۰۰۰);

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

});

پایان

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


+ 2 = شش

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>