یک اسلایدشو تصویر به صورت نمایش سریع، که وقتی با موس به روش میرویم اجرا میشه و وقتی که موس را برمیداریم متوقف میشه. تصویر فعلی قابل نمایش خواهد ماند.
این فقط یک افکت جالبه که از سایت Contain.r ایده گرفتم. ما از انیمیشن css برای اسلاید شو و کنترل توقف و اجرای آن با استفاده از animation-play-state استفاده می کنیم.
به ادامه مطلب بروید..

مشاهده دموی اسکریپتدریافت اسکریپت

—————–
این ساختار ساده آن است:

image01 image02 image03 image04 image05 image06 image07 image08

Summer 2012

 

برای نمایش و مخفی کردن تصاویر از این انیمیشن استفاده خواهیم کرد:

.hs-wrapper img{
    top: 0px;
    left: 0px;
    position: absolute;
    animation: showMe 0.8s linear infinite 0s forwards;
    animation-play-state: paused;  
}

انیمیشن متوقف هست، و فقط وقتی به روی آن می رویم اجرا می شود:

.hs-wrapper:hover img{
    animation-play-state: running;
}

انیمیشن یک تصویر را بسادگی برای نمایش قرار خواهد داد :

@keyframes showMe {
    ۰% { visibility: visible; z-index: 100; }
    ۱۲٫۵% { visibility: visible; z-index: 100; }
    ۲۵% { visibility: hidden; z-index: 0; }
    ۱۰۰% { visibility: hidden; z-index: 0; }
}

همانطور که میبینید، هر تصویر یک انیمیشن یکسان دارد اما انیمیشن برای هر تصویر با تأخیر شروع خواهد شد، ما همچنین میخواهیم تصاویر را به عقب برگردانیم بر طبق تنظیمات z-index . از آنجا که کل انیمیشن در ۰٫۸ ثانیه اجرا میشه، برای شروع برای هر تصویر ۰٫۱ ثانیه تأخیر خواهیم داشت ( به جز اولین ) :

.hs-wrapper img:nth-child(1){
    z-index: 9;
}
.hs-wrapper img:nth-child(2){
    animation-delay: 0.1s;
    z-index: 8;
}
.hs-wrapper img:nth-child(3){
    animation-delay: 0.2s;
    z-index: 7;
}
.hs-wrapper img:nth-child(4){
    animation-delay: 0.3s;
    z-index: 6;
}

برحسب درصد، انیمیشن اینطور محاسبه میشود: ۱۰۰% برای ۸تصویر می باشد. هر تصویر ۰٫۱ ثانیه اجرا میشود و این یعنی ۱۲٫۵%. طبق تصویر زیر:

Overlay بر روی hover نشان داده خواهد شد، ما یک absolute position داریم و از آنجایی که ما میخواهیم محو بشه و یه کادر هم به انیمیشن بدیم، یک transition اضافه میکنیم:

.hs-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 500;
    background: rgba(0,0,0,0.6);
    box-shadow: 0 0 0 0 rgba(255,255,255,0.3) inset;
    pointer-events: none;
    transition: all 0.3s linear;
}

وقتی اسلاید شو شروع به اجرا می کند وقتی بروی آن میرویم ، قسمت overlay نشان داده خواهد شد:

.hs-wrapper:hover .hs-overlay{
    opacity: 1;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.3) inset;
}

شما میتوانید سطح شفافیت رنگ پس زمینه را به منظور ایجاد اثر زیرکانه تر افزایش دهید.
موفق باشید.

مشاهده دموی اسکریپتدریافت اسکریپت

15513 بازدید

۳۱ مرداد ۱۳۹۱ / آموزش

۱۵ دیدگاه برای این مطلب ارسال شده است !

  • محسن طحانیان / در تاریخ ۱۲ مرداد ۱۳۹۲

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

  • علی / در تاریخ ۸ فروردین ۱۳۹۳

    سلام . آموزش خوبی بود اما به نظرتون نمی شد از این ساده تر هم درستش کرد ؟ فکر میکنم زیادی پیچوندینش !

    • علیرضا / در تاریخ ۹ فروردین ۱۳۹۳

      سلام
      آره روش زیاده واسه ساختش، من از این روش رفتم، دوستانی که وارد تر هستن میتونن ساده تر کنن تا حجمش هم کمتر شه 😉

  • زهره / در تاریخ ۵ مهر ۱۳۹۳

    سلام
    من میخوام ی اسلاید شو با css بسازم که تصاویر پس زمینه عوض بشه .به این صورت که به تدریج محو بشن(ن کاملا)و تصویر بعدی به تدریج واضح بشه
    (از خاصیت opacity)استفاده کردم.از کد اسلاید شما کمک گرفتم اما فقط برای یک تصویر اعمال میشه و تصویر بعدی نمیاد
    میشه راهنماییم کنید.
    موفق باشید

    • علیرضا / در تاریخ ۵ مهر ۱۳۹۳

      سلام، اگه ممکنه فایل رو بفرستید تا ببینم و راهنماییتون کنم

  • کیان / در تاریخ ۱۳ آذر ۱۳۹۳

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

    باتشکر

  • آیناز / در تاریخ ۱۱ بهمن ۱۳۹۳

    سلام
    میشه منم راهنمایی کنید؟ سوالم در مورد عوض شدن تدریجی بکگراند سایت؟!!!ممنون

  • آیناز / در تاریخ ۱۱ بهمن ۱۳۹۳

    میخوام تصاویر بکگراندم به تدریج تغییر کنه و عکس بعدی ظاهر بشه..مثل اسلاید شو..ولی نمیدونم با css چطور میشه این کارو انجام داد 🙁

    • علیرضا / در تاریخ ۱۱ بهمن ۱۳۹۳

      خوب من تا امشب و یا فردا در یک پست جدید یک اسلایدشو بکگراند پست میکنم، منتطر باشد.!

  • رویا / در تاریخ ۱۳ خرداد ۱۳۹۵

    سلام
    کدهای ساخت اسلاید شویی که روی فلش دوطرفش کلیک میشه و شروع به حرکت می کنه رو میشه در سایت قرار بدید؟ (مثل سایت دیجی کالا)
    کدی که من نوشتم فقط ایتمها به تنهایی حرکت می کنن ، نمیتونم اونها رو در loop قرار بدم .
    فایل ها رو میتونم بفرستم ؟

  • ارسال پاسخ !

    بالا