در این آموزش، ما یک اسلایدر CSS3 عالی می سازیم. از افکت محو شدن بین اسلایدها استفاده می کند. علاوه بر این، می توانید از توضیحات برای هر تصویر استفاده کنید. یک لیست نامرتب برای سازماندهی اطلاعات استفاده خواهد شد. اسلایدها به طور خودکار با استفاده از انیمیشن‌های CSS3 تغییر می‌کنند.

نشانه گذاری HTML

نشانه گذاری HTML بسیار ساده است. مثال دارای چهار اسلاید است. هر کدام از یک تصویر (به عنوان پس زمینه) و متن توضیحات در یک عنصر div تشکیل شده است. قرار دادن اسلایدهای اضافی بسیار آسان است.

css

اسلایدر از انیمیشن های CSS3 anim_slides و anim_titles استفاده می کند. اولی برای اسلایدهای فردی اعمال می شود، دومی - به متن توضیحات. موقعیت و شفافیت نیز برای توضیحات تغییر می کند.

/* لغزنده */ اسلایدهای . ( ارتفاع: 300 پیکسل؛ حاشیه: 50 پیکسل خودکار؛ سرریز: پنهان؛ موقعیت: نسبی؛ عرض: 900 پیکسل؛ ) . اسلایدها ul (لیست سبک: هیچ؛ موقعیت: نسبی؛ ) /* قاب های انیمیشن # anim_slides */ @-webkit-keyframes anim_slides ( 0% ( opacity:0; ) 6% ( opacity:1; ) 24% ( opacity:1; ) 30% ( opacity:0; ) 100% ( opacity:0; ) ) @-moz-keyframes anim_slides ( 0% ( opacity:0; ) 6% ( opacity:1; ) 24% ( opacity:1; ) 30% ( opacity:0; ) 100% ( opacity:0; ) ) . اسلاید ul li ( opacity:0؛ موقعیت:مطلق؛ top:0؛ /* انیمیشن css3 */ -webkit-animation-name: anim_slides؛ -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: خطی؛ -webkit-animation-itation-count: infinite؛ -webkit-animation-direction: normal. : فوروارد؛ -moz-animation-name: anim_slides؛ -moz-animation-duration: 24.0s؛ -moz-animation-timing-function: خطی؛ -moz-animation-ite ratio-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: در حال اجرا. -moz-animation-fill-mode: فوروارد. ) /* css3 delays */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div ( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0 s;) .slides ul li:nth-child(3)، .slides ul li:nth-child(3) div ( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; ) . slides ul li:nth-child(4), .slides ul li:nth-child(4) div ( -webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; ) .slides ul li img ( display:block; ) /* #anim_titles فریم های انیمیشن */ @-webkit-keyframes anim_titles ( 0% ( سمت چپ:100%؛ opacity:0; ) 5% ( سمت چپ:10%؛ opacity:1; ) 20% ( چپ:10%؛ کدورت: 1؛ ) 25% ( چپ: 100%؛ کدورت: 0؛ ) 100% ( سمت چپ: 100%؛ کدورت: 0؛ ) ) @-moz-keyframes anim_titles ( 0% ( چپ: 100 %؛ کدورت: 0؛ ) 5% ( چپ: 10%؛ کدورت: 1؛ ) 20% ( چپ: 10%؛ کدورت: 1؛ ) 25% ( چپ: 100%؛ کدورت: 0؛ ) 100% ( سمت چپ :100%؛ کدورت: 0؛ )) .اسلایدها با رنگ پس زمینه:#000000؛ شعاع حاشیه: 10 پیکسل 10 پیکسل 10 پیکسل؛ کادر سایه: 0 0 5 پیکسل #FFFFFF درونی؛ رنگ: #FFF FFF; اندازه فونت: 26px; سمت چپ: 10%; حاشیه: 0 خودکار; padding: 20px; موقعیت: مطلق; بالا:50%; عرض: 200 پیکسل /* انیمیشن css3 */ -webkit-animation-name: anim_titles; -webkit-انیمیشن-مدت: 24.0 ثانیه; -webkit-animation-timing-function:linear; -webkit-animation-itation-count: infinite. -webkit-animation-direction: عادی. -webkit-animation-delay: 0; -webkit-animation-play-state: در حال اجرا. -webkit-animation-fill-mode: فوروارد. -moz-animation-name: anim_titles; -moz-انیمیشن-مدت: 24. 0s; -moz-animation-timing-function: خطی. -moz-animation-itation-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: در حال اجرا. -moz-animation-fill-mode: فوروارد. )

4 نوامبر 2019 ورودی به روز شده است

یوری نمتس

لغزنده روشن است CSS خالص+ نوار لغزنده جایزه

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

در اینجا چیزی است که من در یک وب سایت در مورد لغزنده پیدا کردم:

1. نوار لغزنده تصویر CSS3

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

2. نوار لغزنده تصویر CSS3 با ریز عکسها

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

3. گالری CSS

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

4. نوار لغزنده CSS بدون لینک

فقط باید توجه داشته باشید که این اسلایدر از لینک استفاده نمی کند! به طور پیش فرض علاوه بر تصویر اصلی (اسلاید)، 2 اسلاید دیگر نیز قابل مشاهده است. آنها در پشت اصلی قرار دارند. تغییر اسلایدها در یک حالت زیبا انجام می شود: ابتدا دو اسلاید از هم جدا می شوند و اسلاید در مرکز قرار می گیرد که سپس اسلاید اصلی می شود. سپس اسلاید بزرگ شده و در مقابل بقیه قرار می گیرد.

5. لغزنده پاسخگو CSS3

یک نوار لغزنده تطبیقی ​​دیگر بر اساس دکمه های رادیویی. برای اینکه ببینید این اسلایدر چگونه به نظر می رسد دستگاه های مختلف ah - شما می توانید پنجره مرورگر را خودتان تغییر دهید یا در صفحه دارای نوار لغزنده آیکون های ویژه ای برای دستگاه های مختلف وجود دارد که با کلیک بر روی آن ها، ظاهر اسلایدر را در رایانه، تبلت یا تلفن هوشمند مشاهده خواهید کرد.

*** لغزنده جایزه ***

علاوه بر تمام اسلایدرهایی که در بالا ارائه شده است، می خواهم شما را با یک مورد دیگر خوشحال کنم. این نوار لغزنده برای ایجاد یک گالری تصاویر عالی است. کلمات نمی توانند کاری که او انجام می دهد را توضیح دهند، بنابراین بهتر است همه چیز را در ویدیو تماشا کنید:

نتیجه

با کمک لغزنده ها می توانید گالری های تصاویر را به زیبایی طراحی کنید، آنها را فشرده تر قرار دهید، یک نوار لغزنده را در صفحه اول (بخشی از صفحه که بدون پیمایش قابل مشاهده است) صفحه فروش قرار دهید تا فوراً صفحه اصلی را به بازدید کننده نشان دهید. مزایایی که او دریافت خواهد کرد. هنوز هم می‌توانید راه‌های زیادی را پیدا کنید که چگونه و چگونه از لغزنده‌ها استفاده کنید، اما یک چیز به طور قطع روشن است - زمانی که آنها به درستی استفاده شوند مفید هستند.

موارد پوشش داده شده در مقاله

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

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

2. اسلایدر در Glide.js

این اسلایدر برای هر سایتی مناسب است. این از Glide.js with استفاده می کند متن باز. رنگ های لغزنده را می توان به راحتی تغییر داد.

3. نمایش اسلاید محتوا کج شده

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

4. اسلایدر با استفاده از بوم HTML5

نوار لغزنده بسیار زیبا و چشمگیر با ذرات تعاملی. ساخته شده با بوم HTML5

5. لغزنده شکل‌گیری تصویر

لغزنده با جلوه شکل‌گیری (تغییر صاف از یک شی به شی دیگر). AT این مثالنوار لغزنده برای نمونه کارها یک توسعه دهنده وب یا یک استودیوی وب در قالب یک نمونه کار مناسب است.

6. لغزنده دایره ای

اسلایدر به شکل دایره با افکت چرخاندن تصویر.

7. نوار لغزنده پس زمینه تار

نوار لغزنده پاسخگو با سوئیچینگ و تاری پس زمینه.

8. نوار لغزنده مد پاسخگو

نوار لغزنده وب سایت ساده، سبک و واکنش گرا.

9. Slicebox - لغزنده تصویر سه بعدی jQuery(به روز شده)

نسخه به روز شده نوار لغزنده Slicebox با اصلاحات و ویژگی های جدید.

10. شبکه تصویر پاسخگو متحرک رایگان

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

11. لغزنده فلکس

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

12. قاب عکس

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

P.S.اسلایدر رو چندین بار گذاشتم و فکر می کنم یکی از بهترین هاست

13. نوار لغزنده گالری تصاویر بند انگشتی سه بعدی رایگان و پاسخگو.

گالری اسلایدر تجربی 3DPanelLayoutبا شبکه و جلوه های انیمیشن جالب.

14. اسلایدر در css3

نوار لغزنده پاسخگو با استفاده از css3 با ظاهر صاف محتوا و انیمیشن سبک ساخته شده است.

15. لغزنده WOW

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

17. الاستیک

نوار لغزنده الاستیک با پاسخگویی کامل و تصاویر کوچک اسلاید.

18. شکاف

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

19. گالری عکس واکنشگرا به علاوه

گالری اسلایدر رایگان ساده با آپلود تصویر.

20. نوار لغزنده پاسخگو برای وردپرس

نوار لغزنده رایگان پاسخگو برای WP.

21. لغزنده محتوای Parallax

اسلایدر با افکت اختلاف منظر و کنترل هر عنصر با CSS3.

22. لغزنده با صحافی موسیقی

اسلایدر با استفاده از JPlayer منبع باز. این نوار لغزنده شبیه یک ارائه همراه با موسیقی است.

23. اسلایدر با jmpress.js

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

24. نمایش اسلاید شناور سریع

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

25. آکاردئون تصویر با CSS3

آکاردئون تصویر با css3.

26. یک پلاگین گالری بهینه شده با لمس

آی تی گالری تطبیقیکه برای دستگاه های لمسی بهینه شده است.

27. گالری سه بعدی

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

28. لغزنده با صفحه بندی

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

29. Image Montage با jQuery

چیدمان خودکار تصاویر بسته به عرض صفحه. یک چیز بسیار مفید هنگام توسعه یک سایت نمونه کارها.

30. گالری سه بعدی

یک نوار لغزنده دایره ای سه بعدی ساده در css3 و jQuery.

31. حالت تمام صفحهبا افکت سه بعدی روی css3 و jQuery

اسلایدر با قابلیت مشاهده تصاویر تمام صفحه با انتقال زیبا.

1. پلاگین jQuery Fresco

گالری جی کوئری پاسخگو (هنگامی که وضوح صفحه تغییر می کند اندازه تغییر می کند) در یک پنجره بازشو با ریز عکسها و شرح تصاویر نمایش داده می شود. jquery fresco gallery در اکثر مرورگرها از جمله: IE6+، Firefox 3+، Chrome 5+، Opera 9+ به درستی کار می کند. نسخه رایگان این افزونه فقط در پروژه های غیر تجاری قابل استفاده است.

2. نوار لغزنده "آداپتور".

نوار لغزنده با جلوه های انتقال مختلف (7 افکت مختلف از جمله سه بعدی). پروژه در Github.

3. پلاگین اسلایدر با جلوه های مختلف "jQ-Tiles"

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

4. پلاگین جی کوئری "Sly"

پلاگین برای پیاده سازی اسکرول عمودی و افقی. پروژه در Github.

5. منوی ماکیسو متحرک CSS3

6. نمایش اسلاید ساده

7. لغزنده عملکردی جی کوئری "iView Slider v2.0"

اسلایدر محتوا / نمایش اسلاید (نه تنها تصاویر، بلکه کلیپ های ویدیویی و موارد دیگر را می توان به عنوان اسلاید استفاده کرد محتوای HTML). برای پیمایش، می توانید از: تصاویر کوچک، دکمه های چپ / راست و استفاده از صفحه کلید استفاده کنید. پروژه در Github.com.

8. مجموعه ای از پلاگین های جی کوئری "Vanity"

7 پلاگین در مجموعه وجود دارد: jSlider، jTabs، jPaginate، jSpotlight، jTip، jPlaceholder و jCollapse. مجموعه ای از این راه حل ها به شما کمک می کند اسلایدرها، راهنمای ابزار، برگه ها، پنجره های بازشو تصویر و موارد دیگر را پیاده سازی کنید.

9. جلوه CSS3 را شناور کنید

10. منوی کشویی CSS3

11.iOSlider

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

12. نشانگر بارگذاری CSS3

13. افکت شناور CSS3

14. افزونه jQuery "Product Colorizer".

این افزونه یک راه حل سبک وزن برای مشاهده محصولات در رنگ های مختلف است (مرتبط، به عنوان مثال، برای فروشگاه های آنلاین لباس، به بازدید کنندگان اجازه انتخاب طرح رنگیمحصول از چندین گزینه). این افزونه برای هر محصول تنها به دو تصویر نیاز دارد (همه رنگ ها به صورت ماسک قرار می گیرند). این افزونه در تمام مرورگرهای اصلی از جمله IE7+ کار می کند (اگر صفحه نمایش را تعمیر کنید در IE6 نیز کار خواهد کرد. شفافیت PNG). پروژه در GitHub.

15. نمودارهای متحرک CSS3

16. ایجاد افکت همپوشانی هنگام کلیک بر روی تصویر

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

17. پیمایش صفحه در قالب یک منوی کشویی

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

18. گالری CSS3 با افکت شناور

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

19. jQuery Parallax Slider

20. انیمیشن شناور CSS3 روی بلوک ها

21. پانل پاپ آپ CSS3 jQuery

برای مشاهده آیکون های پاپ آپ روی فلش پایین صفحه در صفحه نمایشی کلیک کنید.

22. گالری تصاویر رایگان HTML5 "Juicebox Lite"

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

23. پلاگین "JQVMap"

24. CSS3 Parallax Slider

25. گالری عکس جی کوئری با ریز عکسها

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

26. افزونه اسلایدر محتوای جی کوئری "هوریناجا"

این افزونه آسان برای نصب، قابل تنظیم، مرورگر متقابل است. هر محتوای HTML می تواند به عنوان یک اسلاید عمل کند، نه فقط تصویر. در حالی که مکان نما در ناحیه اسلاید است، می توانید با استفاده از چرخ ماوس در میان اسلایدها حرکت کنید.

27. پلاگین لغزنده jQuery Pikachoose

در سه تغییر: اجرای یک تغییر ساده تصاویر بدون شرح و ریز عکسها. نوار لغزنده با شرح تصاویر و ریز عکسها. نوار لغزنده با ریز عکسها و اضافه کردن باز کردن یک تصویر بزرگتر در یک پنجره بازشو با افکت FancyBox. آخرین نسخه را همیشه می توان در Github یافت.

28. برخی از سبک های CSS سفارشی برای کشویی

پنج سبک مختلف کشویی با استفاده از تکنیک های مختلف CSS.

29. منوی رستوران با افکت سه بعدی متحرک

ارائه CSS jQuery جالب از اطلاعات در صفحه. با کلیک بر روی لینک، منوی کتابچه باز می شود و بازدیدکننده می تواند اطلاعات بیشتری در مورد غذاهای ارائه شده در پنجره بازشو داشته باشد. انیمیشن به درستی در IE نمایش داده نمی شود.

30. افزونه Elastislide

اجرای چرخ فلک تطبیقی ​​لاستیکی (چرخ فلک عمودی و افقی تصاویر) و گالری تصاویر. وقتی پنجره مرورگر کاهش می یابد، تعداد تصاویر به مقدار مشخصی کاهش می یابد حداقل مقدارو سپس اندازه تصاویر باقی مانده کوچک می شود. پروژه در Github.

31. اسلایدر شکاف CSS3 جی کوئری تازه

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

32. نسخه جدید نوار لغزنده تصویر سه بعدی "Slicebox"

یک نسخه جدیدبا تغییرات ایجاد شده و افزودن ویژگی های جدید: اکنون نوار لغزنده سه بعدی مقیاس پذیر شده است، وقتی پنجره مرورگر را کاهش می دهید می توانید این را مشاهده کنید. پشتیبانی اضافه شده برای فایرفاکس. در توضیحات اسلاید، از قبل می توانید از محتوای HTML استفاده کنید (قبلاً، توضیحات از ویژگی پیوند بدون امکان استفاده خارج شده است. تگ های HTML). در صفحه نمایشی، می توانید 4 گزینه برای استفاده از افزونه را مشاهده کنید. آخرین نسخهدر Github.com زندگی می کند.

این افکت بسیار شبیه به گالری 3D CU3ER Flash است (دمو، دانلود)، فقط این اسلایدر سه بعدی با فلاشفن آوری ها، اما با کمک جاوا اسکریپت.

33.jQuery پلاگین "PFold"

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

پلاگین 34.jQuery "Windy"

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

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

قسمت 1.

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

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

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

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

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

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

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

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

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

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

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

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

حالا بیایید تغییر کنیم دارایی سرریزبرای div:

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

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

@keyframes slidey ( 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%(opacity:0;) 8% (opacity:1;) 25% (تاری: 1; ) 33% (تاری: 0;) 100% (مادرگی: 0;) ) /* برای یک نوار لغزنده پنج اسلاید */ @keyframes slider__item-autoplay_count_5 ( 0% (تعوض: 0;) 7% (معروف: 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-autoplay_count_3 15s infinite. -of-type(2) ( -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; animation-delay:5s;) .item:nth-of-type (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 یا :checked در یکی از عناصر صفحه استفاده کنیم. شبه کلاس :focus فقط می تواند یک عنصر در هر صفحه داشته باشد، :target تاریخچه مرورگر را آلوده می کند و به برچسب نیاز دارد. شبه کلاس :checked وضعیت را قبل از خروج از صفحه به خاطر می آورد و در مورد دکمه های رادیویی، فقط می توان روی یک عنصر در گروه انتخاب کرد. بیایید از این استفاده کنیم. درج قبل