۳۱ مرداد

یک اسلایدشو تصویر به صورت نمایش سریع، که وقتی با موس به روش میرویم اجرا میشه و وقتی که موس را برمیداریم متوقف میشه. تصویر فعلی قابل نمایش خواهد ماند.
این فقط یک افکت جالبه که از سایت 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;
}

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

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

20518 بازدید

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

  • ۱۲ مرداد
    محسن طحانیان

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

  • ۸ فروردین

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

    • ۹ فروردین

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

  • ۵ مهر

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

    • ۵ مهر

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

  • ۱۳ آذر

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

    باتشکر

  • ۱۱ بهمن

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

    • ۱۱ بهمن
  • ۱۱ بهمن

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

    • ۱۱ بهمن

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

  • ۱۳ خرداد

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

  • ۲۸ فروردین
  • ارسال پاسخ !

    بالا