برنامه نویسان نوین پندار خاص ترین مرجع آموزش برنامه نویسی
در این اموزش ما به شما نحوه ساخت یک آلبوم نمایش عکس رو میدهیم به طوری که عکس های با انیمیشن های جالب جای خود را با عکس دیگری تغییر دهند.
ساخت البوم نمایش عکس
تمامی انیمیشن های موجود در این آموزش توسط 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 را وارد کردم.
کد جاوااسکریپت
افکت هایی که کتابخانه 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;
}
پایان
+20
هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.
