محصول فارسی و راست چین شده
یکی از چالش های هر طراح و توسعه دهنده وب، نحوه نمایش بخش های مختلف وب سایت است. همان طور که می دانید هر وب سایت از بخش های مختلف با محتوایی از جنس های متنوع ایجاد شده است. اما همه محتوا را نمی توان به یک شکل به نمایش گذاشت. حتی اگر این کار امکان پذیر باشد، وب سایت شما برای بازدید کنندگان بسیار خسته کننده و یکنواخت خواهد بود.
به عنوان مثال شما می توانید برای نمایش عکس های ویژه یک وب سایت از جمله پکیج های فروش و رویداد های مهم شرکت، از اسلایدر ها استفاده کنید. یا می توانید برای ایجاد فرم ثبت نام در سایت و ورود به ناحیه کاربری از پاپ آپ ها استفاده کنید. اما پاپ آپ ها به هیچ عنوان برای نمایش و معرفی تمامی محصولات سایت مناسب نیستند. بنابراین هنگام طراحی یک وب سایت باید در انتخاب نحوه نمایش اجزاء سایت دقت داشته باشید.
باکس های چرخشی نوعی از باکس های نمایش محتوا در وب سایت ها هستند که به خوبی سایت شما را پویا کرده و آن را برای بازدید کنندگان سایت شما زنده به نمایش می گذارد. این نوع باکس ها در حالت عادی شبیه به باکس های معمولی هستند که در اکثر سایت ها مشاهده می کنید. اما تفاوت اصلی آن ها هنگامی است که کاربر موس خود را بر روی آن قرار می دهد. به این صورت که هنگام قرارگیری موس بر روی باکس، باکس شما همراه با انیمیشنی زیبا برگردانده شده و محتوای بیشتری را به کاربران نمایش می دهد. همچنین گاهی اوقات این انیمیشن هنگام کلیک کاربر بر روی باکس اتفاق می افتد.
سورسی که امروز برای شما فراهم کرده ایم، دو نمونه باکس چرخشی به صورت html و css می باشد. تفاوت این دو باکس در نوع محتوایی است که شما می خواهید به نمایش بگذارید.
در حالت پیش فرض این باکس ها در دو حالت ساده پیاده سازی شده اند. اما شما می توانید با کمی تغییرات جزئی، تغییراتی همچون سایز، انیمیشن و نحوه نمایش محتوا را سفارشی سازی کنید.
برای بکارگیری این سورس کافیست فایل های css و js قرار گرفته در این سورس را به صفحه مورد نظر وب سایت مورد استفاده قرار دهید. (البته لازم به ذکر است که در پیاده سازی این قالب از فریمورک semantic برای واکنش گرایی باکس ها استفاده شده است.)
سپس تگ های html نمونه باکس مورد نظر را کپی کرده و در صفحه خود قرار دهید. در مرحله آخر وارد فایل scripts.js شده و قسمت هایی را که از تگ های html استفاده شده پیدا کرده و مطابق میل خود ویرایش کنید. این بخش ها مربوط به محتوای طرف دوم باکس ها هستند.
در صورت استقبال شما عزیزان از این سورس، در آینده مجموعه کامل تری از باکس های نمایش محتوا را در اختیار شما قرار خواهیم داد.
از اینکه با نظرات ارزشمندتان باعث پیشرفت روز به روز وب روبیک می شوید سپاسگذاریم.
عالیه بیشتر ازینا بزارین
مثلا یه کار کنید فقزی موس میره رو عکس عکس بر هوا و بعد قیب بشه و عکس مشتش نمایش داده بشه و وقتی موس از روش رفت عکس اولی بیاد پایین
سلام. تشکر از پیشنهاد و همراهی ارزشمند شما. حتما بزودی فایل های متنوع و بیشتری رو در اختیار شما قرار میدیم. 🙏🌹
اینستاگرام
لینکدین