بهترین کروسل اسلایدرهای سه بعدی کشویی (CSS and JavaScript)

در این مقاله به معرفی ۱۵ مورد از بهترین کروسل اسلایدرهای سه بعدی کشویی که با سی اس اس و جاوااسکریپت نوشته شده اند می پردازیم (Best 3D Carousel Slider with CSS and JavaScript)

نویسنده سید علی اندرزگو

بهترین کروسل اسلایدرهای سه بعدی کشویی (CSS and JavaScript)

در این مقاله به معرفی ۱۴ مورد از بهترین کروسل اسلایدرهای سه بعدی کشویی که با سی اس اس و جاوااسکریپت نوشته شده اند می پردازیم (Best 3D Carousel Slider with CSS and JavaScript)

ابزار اصلی برای طراحی اسلایدرهای کشویی چرخ فلکی ۳D CSS و JavaScript است. اسلایدر چرخ فلک CSS صرفاً مبتنی بر CSS است در حالی که کشویی چرخ فلک جاوا اسکریپت می تواند حتی چند خط کد CSS داشته باشد.

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

۱ . ۳D Rotating Carousel

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

نویسنده این اسلایدر شان امل با استفاده از HTML و CSS فقط به این اثر چرخ فلک چرخان دست یافته است. تصاویر نسخه ی نمایشی از لینک های مختلف وب بازیابی شده اند. بنابراین می توان از این جذابیت گرافیکی برای تصاویر و سایت های مورد نظر به راحتی استفاده کرد.

Demo/Code

۲ . ۳D Carousel

نویسنده hoangtran روش زیبایی را برای زنده کردن لحظات خاطره انگیزتان با موارد خاص و خلاقیت خود نشان می دهد. در نگاه اول آنچه بیشتر به چشم می آید شروع این اسلایدر است. هر تصویر در ابتدا گردآوری شده است، سپس از سمت راست و چپ به صورت هم تراز چرخان می چرخند. همچنین حاوی موسیقی پس زمینه با دکمه play / stop برای جادویی تر کردن است. تصاویر منتخب به آرامی می چرخند و مرزها کمی با تابش نور روشن می شوند. می توان رووی تصاویر کلیک کرد. تصاویر کلیک شده در تب جدید باز می شوند.

بالای چرخ فلك كاملاً مبتنی بر CSS است در حالی كه این نمونه خوب برای CSS & JavaScript Carousel Slider است.

Demo/Code Fork

۳ . ۳D Carousel Gallery

مفهوم این JavaScript و CSS 3D Carousel بسیار ساده است. نوار لغزنده در درجه اول روی سه چیز متمرکز است، تصویر فعلی در وسط و دو تصویر در هر دو طرف قرار دارد. همچنین طراح این اثر ( Dudley Storey ) فلش های ناوبری را در هر دو طرف تعبیه کرده است.

Demo/Code

۴ . Split 3D Carousel

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

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

Demo/Code

۵ . Rotating Carousel with CSS and JavaScript

نویسنده SitePoint 6 چرخ فلک های چرخشی مختلف را در یک نسخه آزمایشی واحد نشان داده است. این اسلایدر چرخ فلکی CSS و JavaScript را می توان به عنوان تلفیقی از کشویی چرخ فلک چرخ دار در این مقاله در نظر گرفت.

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

Demo/Code

۶ . jR3DCarousel – jQuery 3D Responsive Carousel

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

Demo/Code

۷ . ۳D Carousel

در نگاه اول این چرخ فلک CSS JavaScript 3D ممکن است مانند بقیه به نظر برسد اما ویژگی دارد که آن را از ایر اسلایدر ها پویاتر می کند. در مرحله اول، فیلم ها جایگزین تصاویر شده اند. چرخش و حرکت جزئی از لغزنده ها به شناور موس پاسخ می دهند. سایت ارائه دهنده خدمات استریم مانند آمازون یا نت فلیکس می توانند از این اسلایدر استفاده کنند تا بسیاری از پیشنهادات خود را تحت یک نمای واحد به نمایش بگذارند. کاربران می توانند به راحتی در بسیاری از نمایش ها حرکت کنند و به راحتی آن ها انتخاب کنند.

Demo/Code

۸ . Theta Carousel 3D

گزینه خرید در پیش نمایش موفقیت Theta Carousel 3D را نشان می دهد. این برنامه به راحتی در صفحه اصلی هر وب سایت قرار می گیرد. محبوبیت بالای آن در نتیجه ویژگی های زیادی است که در خود دارد. حرکاتی مانند پارابولیک، مکعب را می توان برای این اسلایدر تنظیم کرد. علاوه بر این، پدیده های جسمی مانند حرکت، چرخش، تنظیم کشش، این چرخ فلک را واقع بینانه تر می کند.

می توانید از فیلمی ۶ دقیقه ایی که در مورد این اسلایدر در یوتیوب وجود دارد استفاده کنید.

۹ . Vue Carousel 3D

این یکی از چرخ فلک سه‌بعدی است که برای خرید در دسترس است. انواع جلوه های انتقال، سبک و قابلیت تنظیم از اصلی ترین ویژگی های اسلایدر چرخ فلک vue 3D است. انتقال اسلایدها را می توان با کلیک کردن بر روی تصاویر یا استفاده از دکمه های ناوبری یا تنظیم خودکار به دست آورد. علاوه بر این، این اثر می تواند برای تصاویر بعدی یا تصاویر دیگری در محدوده استفاده شود.

گالری تلفن های همراه حاوی چنین کشویی چرخ فلکی ۳D برای حرکت در تصاویر است. سفارشی سازی تصاویر از چندین صفحه اصلی، نماهای نمادها از نوار لغزنده مشابه استفاده می کند.

Demo

۱۰ . ۳D Carousel Slider

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

Demo/Code

۱۱ . ۳D Carousel 3

این اسلایدر چرخ فلکی ۳D قطعا شما را به یاد iPod nano می اندازد. هنگامی که صفحه نمایش به صورت افقی قرار می گیرد، اسلایدهای جلد موسیقی با انتخاب جریان در وسط با عرض و ارتفاع بیشتر نشان داده می شوند، در حالی که اسلایدهای پشتی واقعاً کوچکتر هستند.

نویسنده خوان C. Irizar از حداقل کدهای CSS در حین استفاده از افزونه های سازندگان دیگر برای دستیابی به این اسلایدر چرخ فلک جاوا اسکریپت استفاده کرده است. ناوبری حداکثر ۲ تصویر از هر طرف برای این کشویی ۳D امکان پذیر است. سرعت پیمایش بستگی به موقعیت تصویری دارد که برای پیمایش انتخاب شده است. از آنجا که پیکان یا نشانگرهای ناوبری خارجی موجود نیستند. خود تصاویر این کار را انجام می دهند.

Demo/Code

۱۲ . ۳D Carousel Example

انتخاب تصویر و effect slider نشان از یک نمایشگاه هنری دارد. اسلایدر سه بعدی، ۳ تصویر را در هر زمان با فاصله جدا از هم نشان می دهد. در حالیکه تصاویر مجاور نسبتاً کوچک هستند، تصویر اصلی متمرکز و بزرگ می شود. علاوه بر این، هر تصویر داردای یک عنوان است.

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

Demo/Code

۱۳ . ۳D Carousel Gallery II

اسلایدر چرخ فلک دیگر در این لیست توسط نویسنده دادلی استوری نوشته شده است. این یکی از CSS ،HTML و برخی JavaScript های پیچیده استفاده می کند.

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

طیف وسیعی از ویترین های لباس را می توان با استفاده از این اسلایدر چرخ فلکی ۳D طراحی کرد که در آن بینندگان می توانند با بزرگتر شدن تصاویر را واضح تر مشاهده کنند.

Demo/Code

۱۴ . Carousel Slider

خوان C. Irizar اسلایدر سه بعدی دیگری با CSS ،JavaScript را معرفی کرده است. این بار بیشتر به شیوه مدیریت اسناد.

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

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

Demo/Code

نتیجه

نمونه اسلایدرهای چرخ فلک ۳D نشان ذکر شده در بالا با استفاده از CSS و JavaScript برای نمایش شگفت انگیزتر تصاویر ایجاد شده اند. برخی از لغزنده ها کاملاً مبتنی بر CSS هستند در حالی که برخی از ترفندهای ریاضی در JavaScript استفاده می کنند.

۱۰ مورد از بهترین افزونه های اسلایدر وردپرس

منبع

۱۰ فیلم رایگان برای یادگیری طراحی در فتوشاپ
طراحی سایت مقالات

۱۰ فیلم رایگان برای یادگیری طراحی در فتوشاپ

نویسنده سید علی اندرزگو

پاسخی بگذارید

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