ما اسلایدر خود را با استفاده از CSS می سازیم. یک نوار لغزنده جالب و در عین حال ساده بر اساس CSS3 خالص. هنگام انتخاب یک اسلاید چرخش را متوقف کنید

یک نوار لغزنده بدون جاوا اسکریپت با جلوه‌ای جالب در چرخش اسلاید. کاملاً با هر دستگاهی سازگار است. منابع موجود

ویژگی: نوار لغزنده CSS

یک نوار لغزنده CSS خالص یک نوار لغزنده آماده با تعویض خودکار اسلاید بدون کمک اسکریپت های JS است. به عنوان یک قاعده، این نوع لغزنده توسط توسعه دهندگان تازه کار یا در مواردی که امکان/نیازی به گنجاندن کتابخانه ها وجود ندارد، قدردانی می شود.

البته، استفاده از پلاگین های ویژه برای ایجاد اسلایدر آسان تر است (مثلا jQuery تعداد زیادی از آنها وجود دارد). اما این نوار لغزنده با اثر غیرعادی خود در ورق زدن اسلایدها را اغوا می کند. علاوه بر این، با بهره وری بالا.

چگونه از این مثال در وب سایت خود استفاده کنید

از لینک بالا می توانید آرشیوی که فایل slider-css.html در آن قرار دارد را دانلود کنید. از نظر تئوری، همه چیزهایی که برای اجرای یک اسلایدر CSS در سایت خود نیاز دارید در این فایل موجود است. این الگوریتم اقدامات شما است:

1. تمام استایل های بلوک اسلایدر را کپی کنید، آنها در تگ هستند

لطفاً توجه داشته باشید که container.untitled دارای موقعیت: خصوصیات مطلق است و ممکن است مجبور شوید کمی آن را برای خود تطبیق دهید.

2. همه اسلایدها در آن پیچیده شده اند

...

< div class = "untitled" >

< div class = "untitled__slides" >

. . .

< / div >

3. درک کد HTML خود اسلاید دشوار نیست

نمایه Unsplash پیشاهنگ لندن

< div class = "untitled__slide" >

< div class = "untitled__slideBg" > < / div >

< div class = "untitled__slideContent" >

< span >لندن< / span >

< span >دیده بانی< / span >

< a class = "button" href = "https://unsplash.com/@scoutthecity" target = "/black" > Unsplash Profile< / a >

کار روی کتابی درباره جی کوئری، با این واقعیت روبرو شدم که بسیاری از مشترکین من از من خواستند که در آن نحوه نوشتن یک اسکریپت اسلایدر در jquery را بگویم. با عرض پوزش دوستان عزیز! این قرن بیست و یکم است و خوشبختانه برای ما، تمام لذت های CSS3 در دسترس ما است و به ما امکان می دهد چنین چیزهایی را بدون یک خط پیاده سازی کنیم. جاوا اسکریپت.

قسمت 1.

برای شروع، من برای کسانی که نمی دانند لغزنده چیست توضیح خواهم داد. لغزنده- این یک بلوک با عرض معین است که بخشی از یک صفحه وب یا کل آن را اشغال می کند. ویژگی اصلی آن محتوایی است که به صورت خودکار یا دستی تغییر می کند. محتوا می تواند تصاویر گرافیکی یا متنی باشد.

البته، ممکن است تعجب کنید: اگر تعداد زیادی پیاده سازی اسلایدر در جاوا اسکریپت وجود دارد، چرا چرخ را دوباره اختراع کنیم؟ در اینجا استدلال های من است:

جلوه های CSS سریعتر هستند. این به وضوح در دستگاه های تلفن همراه قابل مشاهده است.
برای ایجاد یک نوار لغزنده، هیچ مهارت برنامه نویسی لازم نیست.

بنابراین، برای مثال ما، شما به چهار تصویر نیاز دارید، اگرچه در پروژه خود می توانید یک نوار با تعداد تصاویر مورد نیاز خود بسازید. تنها شرط این است که همه تصاویر باید یک اندازه باشند. همچنین، فراموش کردم به شما بگویم، نوار لغزنده ما تطبیقی خواهد بود (بله، چیدمان تطبیقی، درست خواندید) و می توانید از آن در هر یک از پروژه های خود برای هر دستگاهی استفاده کنید. اما، به اندازه کافی پچ پچ، من در حال حاضر خارش برای نوشتن مگا کد. بیایید با HTML شروع کنیم:

من برای صرفه جویی در فضا، ویژگی alt را خالی گذاشتم، اما شما می توانید آن را بر اساس پرس و جوهای سئوی خود پر کنید و به کاربرانی که نمایش تصاویر را در مرورگر خود غیرفعال کرده اند، اطلاع دهید. همچنین توجه شما را به این نکته جلب می کنم که تصویر اول ( alladin.jpg) همچنین در انتهای نوار وجود خواهد داشت، که به لغزنده ما اجازه می دهد بدون تکان دادن به صورت چرخه ای حرکت کند.

برای راحتی، عرض 80٪ از پنجره است، و حداکثر عرض اندازه هر عکس جداگانه است (در مثال ما 1000 پیکسل) زیرا ما نمی خواهیم تصویر کشیده شود:

لغزنده (عرض: 80%؛ حداکثر عرض: 1000 پیکسل؛ )

در کد CSS ما، عرض شکل به صورت درصدی از div که در آن قرار دارد بیان می شود. یعنی اگر نوار تصویر حاوی پنج عکس باشد و div فقط یک عکس را تولید کند، عرض شکل پنج برابر افزایش می‌یابد که 500 درصد عرض div ظرف است:

اندازه فونت: تنظیم 0 تمام هوای شکل را می مکد و فضای سفید اطراف و بین تصاویر را حذف می کند. موقعیت: نسبی به شما این امکان را می دهد که به راحتی شکل را در طول انیمیشن جابجا کنید.

ما باید عکس ها را در نوار تصویر به طور مساوی تقسیم کنیم. فرمول بسیار ساده است: اگر عرض شکل را 100% فرض کنیم، هر تصویر باید 1/5 فضای افقی را اشغال کند:

نیاز به استفاده از قوانین CSS زیر وجود دارد:

Imagestrip img (عرض: 20%؛ ارتفاع: خودکار؛ )

حال بیایید ویژگی overflow را برای div تغییر دهیم:

لغزنده (عرض: 80٪؛ حداکثر عرض: 1000 پیکسل؛ سرریز: پنهان)

در نهایت باید نوار تصویر را از چپ به راست حرکت دهیم. اگر عرض ظرف 100٪ باشد، هر حرکت نوار تصویر به سمت چپ به عنوان درصدی از آن فاصله اندازه گیری می شود:

@keyframes کشویی ( 20% ( چپ: 0%؛ ) 25% ( سمت چپ: -100%؛ ) 45% ( سمت چپ: -100%؛ ) 50% ( سمت چپ: -200%؛ ) 70% ( سمت چپ: -200 %؛ ) 75% (سمت چپ: -300%؛ ) 95% (سمت چپ: -300%؛ ) 100% (سمت چپ: -400%؛ ))

هر تصویر در نوار لغزنده در یک div محصور می شود و 5٪ حرکت می کند.

شکل لغزنده (موقعیت: نسبی، عرض: 500٪، انیمیشن: 30s لغزنده بی نهایت، اندازه فونت: 0، بالشتک: 0، حاشیه: 0، سمت چپ: 0؛ )

قسمت 2.

ما آن را مگا باحال ساختیم اسلایدر بدون جاوا اسکریپت. بیایید قبل از اینکه روی دست خودمان استراحت کنیم، دکمه های کنترلی را به آن اضافه کنیم. به‌طور دقیق‌تر، به آن توجه نکنید (من در حال حاضر خیلی تنبل هستم که آن را سرهم کنم)، اما بیایید یک مورد جدید ایجاد کنیم.

بنابراین، کد HTML ما:

حالا بیایید به انیمیشن سازی اسلایدهایمان بپردازیم. متأسفانه، برای تعداد مختلف اسلاید متفاوت خواهد بود:

/* برای یک نوار لغزنده از دو اسلاید */ @keyframes slider__item-autoplay_count_2 ( 0%(opacity:0;) 20%(opacity:1;) 50%(opacity:1;) 70%(opacity:0;) 100% ( opacity:0;) ) /* برای یک نوار لغزنده از سه اسلاید */ @keyframes slider__item-autoplay_count_3 ( 0%(opacity:0;) 10%(opacity:1;) 33% (opacity:1;) 43% ( کدورت: 0;) 100% (تعوض: 0;) ) /* برای یک لغزنده چهار اسلاید */ @keyframes slider__item-autoplay_count_4 ( 0%(معروفی:0;) 8% (تعوض:1;) 25% (معروفی :1; ) 33% (تعوض:0;) 100%(معروفی:0;) ) /* برای یک نوار لغزنده از پنج اسلاید */ @keyframes slider__item-autoplay_count_5 ( 0%(opacity:0;) 7% (Openity: 1;) 20 % (مادری: 1؛) 27 درصد (تاری: 0؛) 100 درصد (مادر: 0؛) )

غمگین است، اینطور نیست؟ علاوه بر این، فراموش نکنید که برای Opera، Chrome، IE و Mozilla باید همه چیز را یکسان بنویسید، اما با پیشوند مناسب. حالا بیایید کدی را بنویسیم تا اسلایدهای خود را متحرک کنیم (از این پس کد سه اسلاید نشان داده می شود. می توانید کد سایت های بیشتری را در کد مثال ببینید):

Slider_count_3 .item ( -moz-animation: slider__item-autoplay_count_3 15s infinite; -webkit-animation: slider__item-autoplay_count_3 15s infinite; -o-animation: slider__item-infinite toplay_count_3 15s infinite .ite) m: nth -of-type(2) ( -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; animation-delay:5s;) .item:nth-of- نوع (3) ( -moz-animation-delay:10s; -webkit-animation-delay:10s; -o-animation-delay:10s; animation-delay:10s; )

همانطور که می بینید، برای جفت اول، افست صفر تغییر نمی کند. علاوه بر این، افست به تعداد اسلایدها بستگی ندارد، بنابراین می توان آن را یک بار برای حداکثر تعداد اسلاید توصیف کرد. حالا بیایید مطمئن شویم که وقتی کاربر ماوس را روی نوار لغزنده ما قرار می دهد، اسلایدها تغییر نکنند:

Slider:hover .item ( -moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; )

در نهایت، ما باید اسلایدهایمان را تغییر دهیم. همانطور که می دانید، تعدادی رویداد وجود دارد که به شما امکان می دهد ویژگی های یک عنصر را با استفاده از CSS تغییر دهید. برای کلیک ماوس، شبه کلاس های :focus، :target، یا :بر روی یکی از عناصر صفحه می تواند به ما کمک کند. شبه کلاس :focus فقط می تواند یک عنصر در هر صفحه داشته باشد، :target تاریخچه مرورگر را مسدود می کند و به وجود یک برچسب نیاز دارد. شبه کلاس: چک شده وضعیت را قبل از خروج از صفحه به خاطر می‌آورد و در مورد دکمه‌های رادیویی، فقط می‌تواند روی یک عنصر در گروه انتخاب شود. بیایید از این بهره ببریم. قبل درج کنید

کد HTML زیر

و سپس

1 2 3

/* سبک اسلایدرها در حالت "انتخاب نشده" */ .slider .item ~ .item ( opacity: 0.0; ) /* سبک لغزنده ها در حالت "انتخاب شده" */ .slider input:nth-of-type( 1): علامت زده شده ~ .item:nth-of-type(1)، .slider input:nth-of-type(2): checked ~ .item:nth-of-type(2), .slider input:nth- of-type( 3): checked ~ .item:nth-of-type(3), .slider input:nth-of-type(4):checked ~ .item:nth-of-type(4), .slider input:nth- of-type(5): checked ~ .item:nth-of-type(5) ( opacity: 1.0; )

ما از تغییر ویژگی Opacity اسلاید کانتینر با تصویر استفاده کردیم. این به این دلیل است که برخلاف عنصر img، می توانید هر گونه اطلاعات اضافی (مثلاً عنوان اسلاید) را در ظرف div قرار دهید. البته اگر از جاوا اسکریپت استفاده می کردیم، می توانستیم از ویژگی داده استفاده کنیم. اما ما موافقت کردیم، یادتان هست؟)) برای اسلایدها، ویژگی های انتقال را مشخص می کنیم تا سوئیچینگ به آرامی و نه ناگهانی انجام شود.

اسلایدر آیتم ( -moz-transition: opacity 0.2s خطی؛ -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; )

توقف انیمیشن تمام اسلایدها و دکمه ها هنگام انتخاب هر اسلاید می تواند با استفاده از کد CSS زیر انجام شود:

ورودی لغزنده: علامت ~ .item ( کدورت: 0.0؛ -moz-animation: هیچ؛ -webkit-animation: هیچ؛ -o-animation: هیچ؛ انیمیشن: هیچ؛ انیمیشن: هیچ؛)

برای پشتیبانی از برخی مرورگرهای قدیمی، اسلاید اول را متحرک نمی کنیم و آن را روی opacity: 1.0 تنظیم می کنیم، اما یک مشکل داریم: وقتی دو اسلاید دیگر به آرامی بین یکدیگر جابه جا می شوند، اسلاید اول از بین می رود. برای از بین بردن این باگ، برای همه اسلایدها به جز اسلاید انتخاب شده، یک تاخیر انتقال تنظیم کنید و برای آن، z-index را بزرگتر از سایر اسلایدها می کنیم:

اسلایدر آیتم ( Opacity: 1.0؛ -moz-transition: opacity 0.0s linear 0.2s; -webkit-transition: opacity 0.0s linear 0.2s; -o-transition: opacity 0.0s linear 0.2s; transition: opacity linear 0. 0.2s; ورودی لغزنده:nth-of-type(1): checked ~ .item:nth-of-type(1), .slider input:nth-of-type(2):checked ~ .item:nth -of-type(2)، .inputslider:nth-of-type(3):checked ~ .item:nth-of-type(3), .slider input:nth-of-type(4):checked ~ .item:nth-of-type(4)، .slider input:nth-of-type(5):checked ~ .item:nth-of-type(5) ( انتقال: opacity 0.2s خطی؛ -moz-transition کدورت 0.2s خطی -webkit-transition: opacity 0.2s linear;

برای اطمینان از عدم تضاد اسلایدها با سایر عناصر سایت (به عنوان مثال، آنها با یک منوی کشویی با شاخص z کمتر یا مساوی 6 همپوشانی ندارند)، زمینه خود را برای بلوک ایجاد می کنیم.

با تنظیم حداقل z-index مورد نیاز برای دید:

لغزنده (موقعیت: نسبی؛ شاخص z: 0؛ )

این همه، در واقع. تنها چیزی که باقی می ماند این است که عناصر خود را با استفاده از کد CSS زیر قرار دهیم و می توانید خوشحال باشید:

لغزنده ( موقعیت: نسبی؛ z-index: 0؛ .) ورودی لغزنده (نمایش: هیچکدام؛ ) برچسب لغزنده (پایین: 10 پیکسل؛ نمایشگر: بلوک درون خطی؛ شاخص z: 2؛ عرض: 26 پیکسل؛ ارتفاع: 27 پیکسل؛ صفحه نمایش: بلوک درون خطی؛ شاخص z: 2؛ عرض: 26 پیکسل؛ ارتفاع: 27 پیکسل. پس زمینه: #f4f4f5; 1px #e6e6e6; , color: #333; .slider .selector_list ( موقعیت: مطلق؛ پایین: 15px؛ سمت راست: 15px؛ z-index: 11; ) .slider .item ( موقعیت: نسبی؛ عرض:100%؛ .slider .item ~ . مورد (موقعیت: مطلق؛ بالا: 0 پیکسل؛ سمت چپ: 0 پیکسل؛ )

این یک نوع نوار لغزنده تطبیقی بدون جاوا اسکریپت با استفاده از CSS3 است که باید در نهایت با آن کار کنید.

یک نوار لغزنده CSS مزایای زیادی نسبت به لغزنده های جی کوئری دارد. ما پلاگین های حجیم را کنار می گذاریم که سرعت بارگذاری سایت را بهبود می بخشد و استفاده از انیمیشن CSS باعث می شود انتقال اسلایدها روان تر شود. به همین دلیل می خواهم نحوه ساخت اسلایدر در CSS3 را به شما آموزش دهم.

برای کار با این آموزش، باید درک اولیه ای از انتقال CSS3 و انیمیشن های فریم کلیدی داشته باشید. با استفاده از این مفهوم ساده، نحوه ساخت اسلایدر تصویر را خواهیم دید. لطفاً توجه داشته باشید که این ویژگی ها فقط در مرورگرهای مدرن (به ویژه IE10+) کار می کنند.

اسلایدر در CSS3

مفاهیم اولیه انتقال CSS

به طور معمول، هنگامی که یک مقدار CSS را تغییر می دهید، تغییر فوری است. اکنون، به لطف ویژگی انتقال جهانی CSS3، می‌توانیم به راحتی از حالت قدیمی به حالت جدید متحرک سازی کنیم.

ما می توانیم از چهار ویژگی انتقال استفاده کنیم:

transition-property - خصوصیات CSS را که ترانزیشن ها باید روی آنها اعمال شوند را تعریف می کند.
transition-duration - مدت زمان انتقال ها را مشخص می کند.
تابع زمان گذار - نحوه محاسبه مقادیر انتقال میانی را مشخص می کند. اثرات تابع زمان تاخیر معمولاً توابع معکوس نامیده می شود.
انتقال-تاخیر - تعیین می کند که چه زمانی انتقال شروع می شود.

از آنجایی که این فناوری هنوز نسبتاً جدید است، پیشوندهای مرورگر مورد نیاز خواهند بود. ما آنها را در نمونه کدهای این مقاله حذف می کنیم، اما مطمئن شوید که آنها را در کد خود قرار دهید تا مطمئن شوید که نوار لغزنده CSS شما به درستی کار می کند. بیایید ببینیم که چگونه یک انتقال ساده را به یک پیوند اعمال کنیم:

A (رنگ: #000؛ ویژگی انتقال: رنگ؛ مدت زمان انتقال: 0.7 ثانیه؛ عملکرد زمان‌بندی انتقال: سهولت، انتقال-تاخیر: 0.3 ثانیه؛ ) a: شناور (رنگ: #fff؛ )

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

A ( رنگ: #000؛ انتقال: رنگ 0.7 ثانیه آسان 0.3 ثانیه؛ ) a:hover (رنگ: #fff; )

بیایید ببینیم که چگونه انیمیشن ساده را در یک div اعمال کنیم.

/* ما همچنین انیمیشن را برای این عناصر اعمال می کنیم */ div ( انیمیشن-نام: حرکت؛ مدت زمان انیمیشن: 1 ثانیه؛ عملکرد-زمان بندی-انیمیشن: سهولت در خروج؛ انیمیشن-تاخیر: 0.5 ثانیه؛ انیمیشن-تکرار-تعداد: 2 .

اما می‌توانیم با نوشتن همه ویژگی‌های انیمیشن به طور همزمان از یک نماد کوتاه استفاده کنیم:

Div (انیمیشن: 1s ease-in-out 0.5s 2 جایگزین؛ )

فریم های کلیدی برای نوار لغزنده CSS

فریم های کلیدی مشخص می کنند که انیمیشن در هر مرحله از جدول زمانی چگونه به نظر می رسد. فریم های کلیدی از یک مقدار درصد برای تعیین زمان استفاده می کنند: 0٪ شروع انیمیشن و 100٪ پایان است. همچنین می‌توانید فریم‌های کلیدی را برای انیمیشن‌های بین‌المللی اضافه کنید.

/* انیمیشن از 0% تا 100% */ @keyframes حرکت ( 0% ( transform: translateX(0); ) 100% ( transform: translateX(100px); ) ) /* انیمیشن با فریم های کلیدی متوسط */ @keyframes move ( 0% ( تبدیل: translateX(0)؛ ) 50% ( تبدیل: translateX(20px)؛ ) 100% ( تبدیل: translateX(100px؛ ))

ساختار لغزنده CSS

اکنون که می دانیم انتقال ها و انیمیشن ها چگونه کار می کنند، بیایید ببینیم چگونه اسلایدر خود را فقط با استفاده از CSS3 ایجاد کنیم. این تصویر نشان می دهد که انیمیشن چگونه باید کار کند:

انیمیشن اسلایدر چگونه کار می کند؟

همانطور که می بینید، نوار لغزنده ما یک ظرف است که در آن تصاویر نمایش داده می شود. انیمیشن در اینجا بسیار ساده است: تصویر یک مسیر از پیش تعریف شده را با متحرک کردن ویژگی بالا و تغییر ویژگی z-index و opacity با بازگشت تصویر به حالت اولیه خود دنبال می کند. بیایید برای ایجاد یک نوار لغزنده به نشانه گذاری HTML شیرجه بزنیم.

پوما
آفتاب گرفتن

نشانه گذاری HTML بسیار ساده و سئو دوستانه است. بیایید نگاهی دقیق تر به نحوه کارکرد آن بیندازیم:

div id = " لغزنده "

این محفظه اصلی اسلایدر است. عملکرد خاصی ندارد، اما باید انیمیشن آن را متوقف کنیم.
div id = "ماسک"

ما از یک ماسک CSS برای نوار لغزنده استفاده می کنیم تا همه چیزهایی که خارج از آن اتفاق می افتد پنهان شود.
li id="first" class="firstanimation"

هر عنصر لیست دارای یک شناسه و یک کلاس است. ID مسئول راهنمای ابزار است و کلاس به انیمیشنی که باید اتفاق بیفتد گره خورده است.
div class="tooltip"

بلوک برای نمایش عنوان تصویر. می توانید آن را مطابق با نیازهای خود تغییر دهید، برای مثال با تعاملی کردن آن و اضافه کردن یک توضیح کوتاه.
div class = نوار پیشرفت

این شامل تابعی است که پیشرفت انیمیشن را نشان می دهد.

حالا نوبت استایل CSS است.

سبک های اسلایدر CSS

بیایید یک ساختار لغزنده اولیه ایجاد کنیم. اندازه آن به اندازه تصویر خواهد بود. ویژگی CSS border برای ایجاد حاشیه در اطراف یک تصویر مفید خواهد بود.

/* ساختار لغزنده */ لغزنده . ( پس زمینه: #000؛ حاشیه: 5px جامد #eaeaea؛ box-shadow: 1px 1px 5px rgba(0,0,0,0.7)؛ ارتفاع: 320px؛ عرض: 680px؛ حاشیه: 40px خودکار 0; موقعیت: نسبی.

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

/* همه چیز را پنهان کنید */ .mask ( سرریز: پنهان؛ ارتفاع: 320 پیکسل؛ )

در نهایت، برای مرتب کردن لیست تصاویر، موقعیت: مطلق و بالا: -325 پیکسل را تنظیم می کنیم تا همه تصاویر خارج از نوار لغزنده قرار گیرند.

/* لیست تصاویر */ .slider ul ( حاشیه: 0؛ بالشتک: 0؛ موقعیت: نسبی؛ ) .slider li ( عرض: 680 پیکسل؛ /* عرض تصویر */ ارتفاع: 320 پیکسل؛ /* طول تصویر */ موقعیت: مطلق ; بالا: -325px /* موقعیت اولیه - خارج از نوار لغزنده */list-style: هیچکدام )

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

فریم های کلیدی انیمیشن CSS

متحرک سازی یک تصویر برای یک اسلایدر

قبل از شروع کار با انیمیشن، باید چند پارامتر را مشخص کنیم تا ظاهر مناسبی برای انیمیشن داشته باشیم. مدت زمان کلی انیمیشن ما 25 ثانیه است، اما باید بدانیم که چند فریم کلیدی برابر با 1 ثانیه است. بنابراین بیایید به یک سری عملیات نگاه کنیم که تعداد دقیق فریم های کلیدی را بر اساس تصاویر متحرک به ما می دهد. اینم محاسبات:

تعداد کل تصاویر در نوار لغزنده - 5
مدت زمان انیمیشن برای هر تصویر - 5 ثانیه
مدت زمان کل انیمیشن - 5 عکس × 5 ثانیه = 25 ثانیه
بیایید محاسبه کنیم که برای انجام این کار چند فریم کلیدی برابر با یک ثانیه است، تعداد کل فریم های کلیدی را بر طول کل انیمیشن تقسیم کنید 100 کلید. فریم / 25 ثانیه = 4 کلید. قاب

اکنون می توانیم انیمیشن CSS را روی نوار لغزنده اعمال کنیم. ما قادر خواهیم بود انیمیشن را در یک حلقه بی نهایت قرار دهیم زیرا هر تصویر انیمیشن خاص خود را دارد.

Firstanimation ( animation: cycle 25s linear infinite; ) .secondanimation ( animation: cycletwo 25s linear infinite; ) .thirdanimation ( animation: cyclethree 25s linear infinite; .fourthanimation ( animation: infinite cyclefour پنج 25 ثانیه خطی بی نهایت)

هنگامی که ویژگی های انیمیشن اختصاص داده شد، باید از فریم های کلیدی برای تنظیم انیمیشن حرکتی استفاده کنیم. من همچنین ویژگی های opacity و z-index را اضافه کردم تا انتقال از یک تصویر به تصویر دیگر صاف تر شود. انیمیشن اول دارای فریم های کلیدی بیشتری نسبت به قبلی است. دلیل این امر این است که وقتی آخرین تصویر انیمیشن خود را کامل کرد، اولین تصویر باید دارای فریم های کلیدی اضافی باشد تا کاربر وقفه ای بین چرخه های انیمیشن مشاهده نکند.

/* انیمیشن با استفاده از دو تصویر اول به عنوان مثال */ چرخه @keyframes ( 0% ( top: 0px; ) /* وقتی اسلاید شروع می شود، اولین تصویر از قبل قابل مشاهده است */ 4% ( top: 0px; ) /* موقعیت اولیه */ 16% ( بالا: 0 پیکسل؛ کدورت: 1؛ z-index: 0؛ ) /* از 4% تا 16% = تصویر برای 3 ثانیه قابل مشاهده است */ 20% (بالا: 325 پیکسل؛ کدورت: 0؛ z -شاخص: 0 ) /* از 16% تا 20% = 1 ثانیه برای محو شدن تصویر */ 21% (بالا: -325 پیکسل؛ کدورت: 0؛ شاخص z: -1؛ ) /* بازگشت به موقعیت اصلی * / 92% (بالا: -325 پیکسل؛ کدورت: 0؛ شاخص z: 0؛ ) 96٪ (بالا: -325 پیکسل؛ کدورت: 0؛ ) /* از 96٪ تا 100٪ = 1 ثانیه برای نمایش تصویر */ 100%( بالا: 0 پیکسل؛ کدورت: 1 ؛ ) ) @keyframes cycletwo ( 0% ( بالا: -325 پیکسل؛ کدورت: 0؛ ) /* موقعیت اولیه */ 16% (بالا: -325 پیکسل؛ کدورت: 0؛ ) / * شروع به حرکت به این موقعیت بعد از 16% * / 20% (بالا: 0 پیکسل؛ کدورت: 1؛ ) 24% (بالا: 0 پیکسل؛ کدورت: 1؛ ) /* 20% تا 24% = 1 ثانیه برای نمایش تصویر * / 36% ( بالا: 0px؛ کدورت: 1؛ z-index: 0; ) / * از 24% تا 36% = تصویر برای 3 ثانیه قابل مشاهده است * / 40% (بالا: 325px; کدورت: 0; z-index: 0; ) /* از 36% تا 40% = 1 ثانیه برای محو شدن تصویر */ 41% (بالا: -325 پیکسل؛ کدورت: 0؛ شاخص z: -1؛ ) /* بازگشت به موقعیت اصلی */ 100%( top: -325px: 0-z-index: -1;

پس از ایجاد انیمیشن، باید یک نوار پیشرفت برای نمایش مدت زمان هر انیمیشن اضافه کنیم.

نشانگر پیشرفت (نوار پیشرفت)

فرآیند ایجاد انیمیشن نشانگر مانند اسلایدر است. ابتدا خود نشانگر را ایجاد می کنیم:

/* نشانگر پیشرفت نوار لغزنده */ نوار پیشرفت ( موقعیت: نسبی؛ بالا: -5 پیکسل؛ عرض: 680 پیکسل؛ ارتفاع: 5 پیکسل؛ پس‌زمینه: #000؛ انیمیشن: 25 ثانیه آسان‌سازی بی‌نهایت؛ )

از نحوی که در زیر توضیح داده شده نترسید: همچنین حالت "از" و "به" را مشخص می کند.

/* انیمیشن نوار پیشرفت نوار لغزنده CSS3 */ @keyframes fullexpand ( /* در این فریم های کلیدی نوار پیشرفت ثابت است */ 0%, 20%, 40%, 60%, 80%, 100% ( عرض: 0%؛ opacity : 0; ) /* در این فریم های کلیدی، نوار پیشرفت شروع به فعال شدن می کند */ 4٪، 24٪، 44٪، 64٪، 84٪ (عرض: 0٪؛ کدورت: 0.3; ) /* در این فریم های کلیدی نشانگر به مدت 3 ثانیه به جلو حرکت می کند */ 16٪، 36٪، 56٪، 76٪، 96٪ (عرض: 100٪؛ کدورت: 0.7؛ ) /* در این فریم های کلیدی نوار پیشرفت مسیر خود را کامل کرده است */ 17٪، 37 % , 57 , 77 , 97 % ( عرض : 100 % ؛ کدورت : 0.3 ؛ ) /* در این فریم های کلیدی، نوار پیشرفت ناپدید می شود و سپس حلقه از سر گرفته می شود */ 18%, 38%, 58%, 78 ٪، 98٪ (عرض: 100٪؛ کدورت: 0؛ ))

انیمیشن راهنمای ابزار کشویی CSS3

نوار لغزنده تقریباً آماده است، اما اجازه دهید چند جزئیات را اضافه کنیم تا کاربردی تر شود. برای عناوین تصاویری که در شناور قابل مشاهده خواهند بود، نکات ابزار اضافه خواهیم کرد.

در اینجا CSS برای نکات ابزار آمده است:

راهنمای ابزار ( پس زمینه: rgba(0,0,0,0.7)؛ عرض: 300 پیکسل؛ ارتفاع: 60 پیکسل؛ موقعیت: نسبی؛ پایین: 75 پیکسل؛ سمت چپ: -320 پیکسل؛ ) .tip tool h1 (رنگ: #fff؛ اندازه قلم: 24px وزن فونت: 300px;

در اینجا ما آن را طوری تنظیم کرده‌ایم که فقط عناوین تصاویر را نشان دهد، اما می‌توانید همین کار را با محتوای سفارشی، پیوندها و غیره انجام دهید.

انیمیشن Tooltip در حالت شناور

ما نحوه اعمال انتقال عناصر CSS3 را دیدیم. حالا بیایید این کار را در راهنمای ابزار انجام دهیم.

راهنمای ابزار (… انتقال: همه 0.3s ease-in-out; ) .slider li:hover .tooltip (سمت چپ: 0px؛ )

انیمیشن کشویی را مکث کرده و ادامه دهید

توقف انیمیشن روی موس

اجازه دهید کاربران برای خواندن راهنمایی یا نگاه کردن به تصاویر مکث کنند. برای انجام این کار، زمانی که ماوس را روی تصویر قرار می دهیم، باید انیمیشن را متوقف کنیم (همچنین باید انیمیشن نوار پیشرفت را متوقف کنیم).

نوار لغزنده: شناور لی، لغزنده: شناور .نوار پیشرفت (انیمیشن-حالت پخش: متوقف شده؛ )

نتیجه گیری و جایزه اسلایدر CSS3)

بالاخره به پایان درس رسیدیم. نوار لغزنده CSS3 اکنون 100٪ آماده است! نگاهی به نسخه ی نمایشی اسلایدر CSS بدون جاوا اسکریپت بیندازید. این در فایرفاکس 5+، سافاری 4+، IE10+ و Google Chrome و همچنین iPhone و iPad کار می کند.

این اثر چشمگیر است، اما مسلماً این نوار لغزنده چندان انعطاف پذیر نیست. به عنوان مثال، برای افزودن تصاویر بیشتر، باید تمام فریم های کلیدی را ویرایش کنید. CSS3 پتانسیل زیادی دارد، اما گاهی اوقات بهتر است از جاوا اسکریپت استفاده کنید تا اینکه با فریم های کلیدی خود را خسته کنید. و اکنون، همانطور که قول داده بودم، یک اسلایدر جایزه در CSS3.

1. نمایش اسلاید جی کوئری عالی

یک نمایش اسلاید بزرگ و دیدنی با استفاده از فناوری های جی کوئری.

2. پلاگین جی کوئری “Scale Carousel”

نمایش اسلاید مقیاس پذیر با استفاده از jQuery. شما می توانید اندازه های نمایش اسلاید را تنظیم کنید که به بهترین وجه برای شما مناسب است.

3. پلاگین جی کوئری “slideJS”

نوار لغزنده تصویر با توضیحات متنی.

4. پلاگین "JSliderNews"

5. نوار لغزنده CSS3 jQuery

هنگامی که ماوس را روی فلش های پیمایش نگه می دارید، یک تصویر کوچک دایره ای از اسلاید بعدی ظاهر می شود.

6. نوار لغزنده زیبای jQuery "Presentation Cycle".

نوار لغزنده جی کوئری با نشانگر بارگذاری تصویر. تغییر خودکار اسلاید ارائه شده است.

7. پلاگین جی کوئری "Parallax Slider"

نوار لغزنده با جلوه پس زمینه حجمی. نکته برجسته این اسلایدر حرکت پس زمینه است که از چندین لایه تشکیل شده است که هر کدام با سرعت متفاوتی اسکرول می شوند. نتیجه تقلید از اثر حجمی است. خیلی زیبا به نظر می رسد، خودتان می توانید ببینید. این افکت در مرورگرهایی مانند اپرا، گوگل کروم، اینترنت اکسپلورر راحت تر نمایش داده می شود.

8. نوار لغزنده جدید و سبک جی کوئری "bxSlider 3.0"

در صفحه نمایشی در بخش «نمونه‌ها» می‌توانید پیوندهایی به تمام استفاده‌های ممکن از این افزونه پیدا کنید.

9. نوار لغزنده تصویر جی کوئری، پلاگین “slideJS”.

یک نوار لغزنده شیک jQuery مطمئناً می تواند پروژه شما را تزئین کند.

10. پلاگین نمایش اسلاید جی کوئری "Easy Slides" نسخه 1.1

یک پلاگین jQuery با استفاده آسان برای ایجاد نمایش اسلاید.

11. پلاگین jQuery Slidy

پلاگین سبک جی کوئری در نسخه های مختلف. تغییر خودکار اسلاید ارائه شده است.

12. گالری jQuery CSS با تغییر خودکار اسلاید

اگر بازدید کننده در مدت زمان معینی روی فلش های "به جلو" یا "بازگشت" کلیک نکند، گالری به طور خودکار شروع به پیمایش می کند.

13. نوار لغزنده jQuery "Nivo Slider"

پلاگین بسیار حرفه ای، با کیفیت، سبک و با کد معتبر. بسیاری از افکت های انتقال اسلاید مختلف در دسترس هستند.

14. نوار لغزنده جی کوئری "MobilySlider"

نوار لغزنده تازه. نوار لغزنده جی کوئری با افکت های مختلف تغییر تصویر.

15. پلاگین jQuery "Slider²"

نوار لغزنده سبک وزن با تعویض کشویی اتوماتیک.

16. نوار لغزنده جاوا اسکریپت تازه

نوار لغزنده با تغییر خودکار تصویر.

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

نوار لغزنده تصویر jQuery CSS با استفاده از پلاگین NivoSlider.

19. نوار لغزنده جی کوئری "jShowOff"

افزونه چرخش محتوا. سه گزینه برای استفاده: بدون ناوبری (با تغییر خودکار در قالب نمایش اسلاید)، با ناوبری به شکل دکمه، با ناوبری به شکل ریز عکسها.

20. افزونه Shutter Effect Portfolio

افزونه تازه جی کوئری برای طراحی نمونه کار عکاس. گالری اثر جالبی در تغییر تصاویر دارد. عکس‌ها با جلوه‌ای مشابه عملکرد شاتر لنز، یکدیگر را دنبال می‌کنند.

21. نوار لغزنده سبک جاوا اسکریپت CSS "TinySlider 2"

پیاده سازی اسلایدر تصویر با استفاده از جاوا اسکریپت و CSS.

22. لغزنده عالی "Tinycircleslider"

نوار لغزنده گرد شیک. انتقال بین تصاویر با کشیدن نوار لغزنده به شکل یک دایره قرمز در اطراف محیط انجام می شود. اگر از عناصر گرد در طراحی خود استفاده کنید، کاملاً در وب سایت شما قرار می گیرد.

23. نوار لغزنده تصویر با جی کوئری

نوار لغزنده سبک وزن "Slider Kit". اسلایدر در طرح های مختلف عمودی و افقی موجود است. انواع مختلفی از پیمایش بین تصاویر نیز اجرا می شود: با استفاده از دکمه های "به جلو" و "بازگشت"، با استفاده از چرخ ماوس، با استفاده از کلیک ماوس بر روی اسلاید.

24. گالری با مینیاتور "Slider Kit"

گالری "Slider Kit". پیمایش ریز عکسها هم به صورت عمودی و هم به صورت افقی انجام می شود. انتقال بین تصاویر با استفاده از: چرخ ماوس، کلیک ماوس یا نگه داشتن مکان نما بر روی تصویر کوچک انجام می شود.

25. نوار لغزنده محتوای jQuery "Slider Kit"

نوار لغزنده محتوای عمودی و افقی با استفاده از jQuery.

26. نمایش اسلاید جی کوئری “Slider Kit”

نمایش اسلاید با تغییر خودکار اسلاید.

27. نوار لغزنده حرفه ای جاوا اسکریپت CSS3 سبک وزن

یک نوار لغزنده jQuery و CSS3 که در سال 2011 ایجاد شد.

نمایش اسلاید جی کوئری با ریز عکسها.

29. نمایش اسلاید ساده جی کوئری

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

30. نمایش اسلاید عالی جی کوئری "Skitter".

پلاگین jQuery Skitter برای ایجاد نمایش اسلاید خیره کننده. این افزونه از 22 (!) نوع جلوه های مختلف انیمیشن هنگام تغییر تصاویر پشتیبانی می کند. می تواند با دو گزینه پیمایش اسلاید کار کند: استفاده از اعداد اسلاید و استفاده از ریز عکسها. حتماً نسخه ی نمایشی را تماشا کنید، یک پیدا با کیفیت بسیار بالا. فن آوری های مورد استفاده: CSS، HTML، jQuery، PHP.

31. نمایش اسلاید "ناجور"

نمایش اسلاید عملکردی اسلایدها می توانند عبارتند از: تصاویر ساده، تصاویر با شرح، تصاویر با راهنمای ابزار، فیلم ها. برای پیمایش می توانید از فلش ها، پیوندهای شماره اسلاید و کلیدهای چپ/راست روی صفحه کلید خود استفاده کنید. نمایش اسلاید در چندین نسخه ارائه می شود: با و بدون ریز عکسها. برای مشاهده همه گزینه ها، پیوندهای نسخه ی نمایشی #1 - نسخه ی نمایشی #6 را که در بالای صفحه نمایشی قرار دارد، دنبال کنید.

طراحی بسیار اصلی برای نوار لغزنده تصویر، یادآور فن. انتقال اسلاید متحرک. پیمایش بین تصاویر با استفاده از فلش ها انجام می شود. همچنین یک تعویض خودکار وجود دارد که می توان آن را با استفاده از دکمه پخش/مکث واقع در بالا روشن و خاموش کرد.

اسلایدر متحرک جی کوئری. هنگامی که اندازه پنجره مرورگر تغییر می کند، تصاویر پس زمینه به طور خودکار مقیاس می شوند. برای هر تصویر، یک بلوک با توضیحات ظاهر می شود.

34. نوار لغزنده "Flux Slider" با استفاده از jQuery و CSS3

نوار لغزنده جدید جی کوئری. چندین افکت متحرک جالب هنگام تغییر اسلایدها.

35. پلاگین جی کوئری “jSwitch”

گالری متحرک جی کوئری.

یک نمایش اسلاید آسان جی کوئری با تغییر خودکار اسلاید.

37. نسخه جدید افزونه “SlideDeck 1.2.2”

اسلایدر محتوای حرفه ای گزینه هایی با تغییر اسلاید خودکار و همچنین گزینه ای با استفاده از چرخ ماوس برای حرکت بین اسلایدها وجود دارد.

38. نوار لغزنده جی کوئری "Sudo Slider"

نوار لغزنده تصویر سبک با استفاده از jQuery. گزینه های پیاده سازی زیادی وجود دارد: تغییر افقی و عمودی تصاویر، با و بدون پیوند به شماره اسلاید، با و بدون شرح تصویر، افکت های مختلف تغییر تصویر. یک عملکرد تغییر خودکار اسلاید وجود دارد. پیوندهای تمام نمونه های پیاده سازی را می توان در صفحه نمایشی یافت.

39. نمایش اسلاید جی کوئری CSS3

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

40. نوار لغزنده jQuery "Flux Slider"

نوار لغزنده با بسیاری از جلوه های تغییر تصویر.

41. نوار لغزنده jQuery ساده

نوار لغزنده تصویر شیک با استفاده از jQuery.

من آمریکا را به روی کسی باز نمی کنم، مردم را با یک ترفند جدید شگفت زده نمی کنم و ذهن کسانی را که در CSS3 مانند یک غواص شنا می کنند، منفجر نمی کنم. من یک راه ساده برای ایجاد یک نوار لغزنده با استفاده از توابع ساده CSS3 بدون نیاز به جاوا اسکریپت به شما خواهم گفت.

1. پایه را چیدمان کنید

برای پیاده سازی نوار لغزنده، به مجموعه ای نسبتاً ساده از تگ ها نیاز داریم که به نوبه خود مسئول عناصر اسلایدر هستند.

در اینجا می بینیم که بلوک کلی "wrapper" حاوی یک بلوک "اسلایدر" با 5 اسلاید است که می توانید هر کد html را که در اسلاید قرار می گیرد در داخل آن قرار دهید. در جلوی بلوک عمومی دکمه‌های رادیویی وجود دارد که بعداً برای ایجاد پانل ناوبری اسلاید خود برای آنها پنهان می‌شوند که با آن برچسب‌های بلوک "کنترل‌ها" به ما کمک می‌کنند.

2. اسلایدر را طراحی کنید

ما اینجا توقف می کنیم و کمی به css نگاه می کنیم. لطفاً توجه داشته باشید که برخی از ویژگی ها دارای پیشوندهای متقابل مرورگر هستند تا همه مرورگرهای مدرن بتوانند آنها را درک کنند.

* ( حاشیه: 0؛ بالشتک: 0؛ -webkit-box-sizing: border-box؛ -moz-box-sizing: border-box؛ -o-box-sizing: border-box; box-box: border-box ) بدنه (تصویر پس زمینه: url(http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png)؛
همه چیز با طراحی پس زمینه و سبک های کلی مشخص است.

پوشش (ارتفاع: 350 پیکسل؛ حاشیه: 100 پیکسل خودکار 0؛ موقعیت: نسبی؛ عرض: 700 پیکسل؛ ) .لغزنده (رنگ پس زمینه: #ddd؛ ارتفاع: ارث بری؛ سرریز: پنهان؛ موقعیت: نسبی؛ عرض: ارث؛ -webkit- box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 0.5);
بلوک عمومی و بلوک با نوار لغزنده دارای ابعاد یکسانی برای کنترل کامل موقعیت لغزنده در صفحه هستند. در حالی که هیچ اسلایدی وجود ندارد، ما به طور موقت اسلایدر را خاکستری روشن رنگ کردیم.

Wrapper > ورودی (نمایش: هیچ، )
دکمه های رادیویی را پنهان می کنیم. بعداً به آنها نیاز خواهیم داشت.

نتیجه فعلی این است:

3. طراحی اسلایدها

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

اسلایدها ( ارتفاع: ارث، موقعیت: مطلق، عرض: ارث، ) .slide1 ( background-image: url(http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpgde); -image: url(http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg) .slide3 (background-image: url(http://habrastorage.org/64b/1663) /6636b1d4f8e643d29eab8c192fc1cea3.jpg تصویر: url(http: //habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg)
برای همه اسلایدها، ما موقعیت مطلق را مشخص کردیم تا بتوانید با جلوه های ظاهری بازی کنید. اندازه اسلایدها از اندازه خود اسلایدر گرفته می شود تا مجبور نباشند چندین جا نوشته شوند.

4. ساخت اسلاید ناوبری

از آنجایی که دکمه های رادیویی مخفی هستند و ما به آنها به عنوان سوئیچ نیاز داریم، برچسب های آماده شده را ایجاد می کنیم:

Wrapper .controls ( چپ: 50%؛ حاشیه-چپ: -98 پیکسل؛ موقعیت: مطلق؛ ) .برچسب wrapper ( مکان نما: نشانگر؛ نمایشگر: بلوک درون خطی؛ ارتفاع: 8px؛ حاشیه: 25px 12px 0 16px؛ موقعیت: نسبی. عرض: 8px-border-radius: -moz-border-radius: 50%; -شعاع: 50%؛ -o-border-radius: 50%;
ما ناوبری را کلاسیک می کنیم. هر دکمه ناحیه‌ای را به شکل دایره نشان می‌دهد که در داخل آن، وقتی اسلاید فعال است، قسمت خالی تا حدی رنگ می‌شود. تا اینجا نتیجه زیر را داریم:

5. آموزش فشار دادن دکمه ها

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

برچسب بسته بندی ( مکان نما: نشانگر؛ نمایشگر: بلوک درون خطی؛ ارتفاع: 8 پیکسل؛ حاشیه: 25 پیکسل 12 پیکسل 0 16 پیکسل؛ موقعیت: نسبی؛ عرض: 8 پیکسل؛ -webkit-border-radius: 50%؛ -moz-border-radius: 50 -o-border-radius: 50% -webkit-transition: پس زمینه ease-in-out 0.5s; برچسب wrapper: شناور، #slide1:checked ~ .controls label:nth-of-type(1)، #slide2: checked ~ .controls label:nth-of-type(2)، #slide3:checked ~ .controls label: nth-of-type(3)، #slide4:checked ~ .controls label:nth-of-type(4) , #slide5:checked ~ .controls label:nth-of-type(5) ( پس زمینه: #ddd; )
داخل دکمه های ناوبری طراحی شده رنگ آمیزی صاف اضافه می کنیم. ما همچنین شرایطی را اضافه می کنیم که در آن دکمه فعال و دکمه ای که مکان نما روی آن قرار می گیرد به آرامی رنگ می شود. دکمه های رادیویی سفارشی ما آماده هستند:

6. متحرک سازی نوار لغزنده

خوب، اکنون مطمئن می شویم که اسلایدها در نهایت تغییر می کنند:

اسلایدها ( ارتفاع: ارث، کدورت: 0، موقعیت: مطلق، عرض: ارث، z-index: 0؛ -webkit-transform: scale(1.5)؛ -moz-transform: scale(1.5); -o-transform: scale (1.5). -in-out 0.5s; -o-transition: transform ease-in-out. ) #slide1:checked ~ .slider > .slide1, #slide2:checked ~ .slider > .slide2, #slide3:checked ~ .slider > .slide3, #slide4:checked ~ .slide1, #slide2:checked ~ .slider > #slide2:checked .slider > .slide5 ( opacity: 1; z-index: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale( 1)
ما ویژگی هایی را به سبک های اسلاید رایج اضافه می کنیم که همه اسلایدها را نامرئی می کند و در پس زمینه محو می شود. ما همچنین یک بزرگنمایی جزئی به اسلایدها اضافه کرده ایم در حالی که نامرئی هستند تا ظاهر جالبی در لغزنده ایجاد کنند.

نتیجه را می توان در اینجا مشاهده کرد.