ساخت البوم نمایش عکس

ساخت البوم نمایش عکس

در این اموزش ما به شما نحوه ساخت  یک آلبوم نمایش عکس رو میدهیم به طوری که عکس های با انیمیشن های جالب جای خود را با عکس دیگری تغییر دهند.

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

ساخت البوم نمایش عکس

تمامی انیمیشن های موجود در این آموزش توسط CSS3  ایجاد شده اند که این به معنی این است که این نمونه کار فقط در مرورگر های مدرن قابل نمایش است.همچنین ما تعداد عکس های نمایش داده شده را طوری تنظیم می کنیم که بتوان از این آموزش به عنوان اسلاید شو نیز استفاده کرد.

طبق معمول ما کار را با نوشتن کد های HTML آغاز می کنیم.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <title>Animated CSS3 Photo Stack | Tutorialzine Demo</title>

    <!-- CSS Includes -->
    <link href="assets/css/style.css" rel="stylesheet" />
    <link href="assets/css/animate.css" rel="stylesheet" />

</head>
<body>

    <ul id="photos">
        <li><a href="http://www.flickr.com/photos/brockwhittaker/8500935165/"
        style="background-image:url(...)">Landscape 5</a></li>
        <!-- More photos here -->
    </ul>

    <a href="#" class="arrow previous"></a>
    <a href="#" class="arrow next"></a>

    <!-- Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="assets/js/script.js"></script>

</body>
</html>

 

#photos عکس هایی که باید با انیمیشن خاصی نمایش داده شوند را نگه میدارد.برای هر عکس یک li  با لینک مرتبط کننده آن تعریف کرده ایم.هر عکس به عنوان background-image یک لینک است.در قسمت کد CSS شما مشاهده خواهید کرد که ما هر عکس را با استفاده از background-size property  به عنوان پس زمینه لینک ها قرار دادیم.اگر عکس های زیادی اضافه کنید آنها در حافظه می مانند زیرا آنها به صورت absolutely  هستند.عکس ها به صورت آخرین اضافه شده(بر حسب تاریخ) نمایش داده میشوند.

در بالای کد ها من animate.css را وارد کردم که به ما  انواع حرکت انیمیشنی  زیبا می دهد.در ضمن قبل از بستن تگ body من کتابخانه  jQuery و فایل script.js  را وارد کردم.

animated-photo-stack

کد جاوااسکریپت

افکت هایی که کتابخانه animate  به ما میدهد،با باید یک کلاس اختصاصی برای نام انیمیشن ها ایجاد کنیم،همچنین ما در آخر عکس ها را پس از نمایش داده شدن به پایین پشته ایجاد شده می بریم(اخر البوم)تا عکس بعدب نمایش داده شود پس کار هایی که ما باید انجام دهیم:

اول:ما باید به کلیک کردن جهت ها توجه کنیم

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

درمورد کلیک شدن جهت عکس قبلی نیز همینگونه عمل می کنیم.

کد را در زیر نوشتیم:

assets/js/script.js

$(function() {

    var exits = ['fadeOut', 'fadeOutDown', 'fadeOutUpBig'
	, 'bounceOut', 'bounceOutDown',
        'hinge', 'bounceOutUp', 'bounceOutLeft',
		'rotateOut', 'rotateOutUpLeft',
        'lightSpeedOut', 'rollOut'];

    var entrances = ['fadeIn', 'fadeInDown', 'fadeInRight'
	, 'bounceIn', 'bounceInRight',
            'rotateIn', 'rotateInDownLeft', 'lightSpeedIn'
			, 'rollIn', 'bounceInDown']; 

    var photos = $('#photos'),
        ignoreClicks = false;

    $('.arrow').click(function(e, simulated){
        if(ignoreClicks){

            // If clicks on the arrows should be ignored,
            // stop the event from triggering the rest
            // of the handlers

            e.stopImmediatePropagation();
            return false;
        }

        // Otherwise allow this click to proceed,
        // but raise the ignoreClicks flag

        ignoreClicks = true;

        if(!simulated){
            // Once the user clicks on the arrows,
            // stop the automatic slideshow
            clearInterval(slideshow);
        }
    });

    // Listen for clicks on the next arrow
    $('.arrow.next').click(function(e){

        e.preventDefault();

        // The topmost element
        var elem = $('#photos li:last');

        // Apply a random exit animation
        elem.addClass('animated')
            .addClass( exits[Math.floor(exits.length*Math.random())] );

        setTimeout(function(){

            // Reset the classes
            elem.attr('class','').prependTo(photos);

            // The animation is complate!
            // Allow clicks again:
            ignoreClicks = false;

        },۱۰۰۰);
    });

    // Listen for clicks on the previous arrow
    $('.arrow.previous').click(function(e){

        e.preventDefault();

        // The bottom-most element
        var elem = $('#photos li:first');

        // Move the photo to the top, and
        // apply a random entrance animation

        elem.appendTo(photos)
            .addClass('animated')
            .addClass( entrances[Math.floor(entrances.length*Math.random())] );

        setTimeout(function(){

            // Remove the classess
            elem.attr('class','');

            // The animation is complate!
            // Allow clicks again:
            ignoreClicks = false;

        },۱۰۰۰);
    });

    // Start an automatic slideshow
    var slideshow = setInterval(function(){

        // Simulate a click every 1.5 seconds
        $('.arrow.next').trigger('click',[true]);

    }, ۱۵۰۰);

});

ودر آخر کاری که باید بکنیم نوشتن تعدادی کد CSS است.

assets/css/styles.css

#photos{
    margin:0 auto;
    padding-top:120px;
    width:450px;
    position:relative;
}

#photos li{
    position:absolute;
    width:450px;
    height:450px;
    overflow:hidden;
    background-color:#fff;
    box-shadow: 1px 1px 1px #ccc;
    z-index:10;

    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

#photos li a{
    position:absolute;
    top:6px;
    left:6px;
    right:6px;
    bottom:6px;
    background-size: cover;
    text-indent:-9999px;
    overflow:hidden;
}

پایان

+2
0


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

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

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

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

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

*


دو × 3 =

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>