سورس html و css باکس های چرخشی

سورس html و css باکس های چرخشی
افزودن به علاقه‌مندی‌ها
رایگان
بروزرسانی شده در 07 مرداد 1398


  •   فارسی و راست چین شده توسط وب روبیک
  •   گارانتی کیفیت محصولات وب روبیک
  •   پشتیبانی از طریق بخش نظرات
  •   ارائه بصورت کاملا در وب روبیک

  محصول فارسی و راست چین شده

264 دریافت
دانلود رایگان
سورس html و css باکس های چرخشی به طراحان سایت این توانایی را می‌دهد تا بتوانند با استفاده از این سورس باکس های چرخشی نمایش محتوا را در سایت های مختلف اجرا کنند. این باکس ها هم می‌تواند باعث پویایی سایت طراحی شده شود و هم باعث افزایش پروژه های دریافتی طراحان می‌گردد.

باکس ها و عناصر نمایش محتوا

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

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

 

سورس html و css باکس های چرخشی

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

سورسی که امروز برای شما فراهم کرده ایم، دو نمونه باکس چرخشی به صورت html و css می باشد. تفاوت این دو باکس در نوع محتوایی است که شما می خواهید به نمایش بگذارید.

در ادامه به کاربردهایی که این سورس می تواند برای طراحان سایت داشته باشد اشاره می کنیم:

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

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

راهنمای استفاده:

برای بکارگیری این سورس کافیست فایل های css و js قرار گرفته در این سورس را به صفحه مورد نظر وب سایت مورد استفاده قرار دهید. (البته لازم به ذکر است که در پیاده سازی این قالب از فریمورک semantic برای واکنش گرایی باکس ها استفاده شده است.)

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

 

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

از اینکه با نظرات ارزشمندتان باعث پیشرفت روز به روز وب روبیک می شوید سپاسگذاریم.

هیچ دیدگاهی ثبت نشده است! اولین دیدگاه را شما ثبت کنید.

دیدگاه خود را ارسال کنید

نظر خود را برای این مطلب ارسال کنید. نشانی ایمیل شما منتشر نخواهد شد.

محبوب‌ترین محصولات پیشنهادی

Medical Way - قالب وردپرس شرکتی / شخصی پزشکی مدیکال وی

Medical Way - قالب وردپرس شرکتی / شخصی پزشکی مدیکال وی

قالب رایگان وردپرس پزشکی و سلامت Medical Way به پزشکان و صاحبان مراکز سلامتی-درمانی کمک می‌کند تا بتوانند یک سایت وردپرسی حرفه ای، منحصر به فرد و جذاب را در سریع‌ترین زمان ممکن پیاده سازی کنند و از این جهت هیچگونه محدودیتی نداشته باشند.
5 1
Etrain - قالب بوت استرپ شخصی / شرکتی آموزشی ایترین

Etrain - قالب بوت استرپ شخصی / شرکتی آموزشی ایترین

قالب سایت آموزشی ریسپانسیو Etrain به آموزشکاه‌ها یا مدارس مختلف کمک می‌کند تا بتوانند با استفاده از امکانات این قالب، یک سایت وردپرسی حرفه‌ای و کاربرپسند را طراحی و پیاده‌سازی کنند و از این نظر مشکلی نداشته باشند.
5 2
Karaneh - قالب وردپرس شرکتی بر پایه المنتور کرانه

Karaneh - قالب وردپرس شرکتی بر پایه المنتور کرانه

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

سورس ریسپانسیو رایگان صفحه در دست ساخت

طراحان سایت می‌توانند از سورس ریسپانسیو رایگان صفحه در دست ساخت جهت طراحی بی نقص و حرفه ای یک صفحه در دست ساخت استفاده کنند. این سورس دارای امکاناتی چون شمارنده روزها و فرم عضویت در خبرنامه هست که به شما کمک بسیاری می‌کنند.
5 2