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

معرفی محصول

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

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

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


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

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

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

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

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

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

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

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


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

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


کلمات کلیدی
html (اچ تی ام ال) css (سی اس اس) jquery (جی کوئری) rtl (راست چین) web tools (ابزار وب) user interface (رابط کاربری)

نظرات کاربران
هنوز هیچ نظری برای این مطلب ارسال نشده است. شما اولین نفر باشید!
close Car