جابجایی نرم المنت ها در طراحی رسپانسیو

جابجایی نرم المنت ها در طراحی رسپانسیو
طراحی رسپانسیو در حال فراگیر شدن است و هنگامی که درحال کدنویسی یک طرح رسپانسیو هستید، نیاز دارید که المنت ها در صفحه با توجه به سایز صفحه جابجا شوند، اگر کدنویسی شما بر اساس ابعاد مرورگر است و مرورگر ریسایز میشود، المنت های شما در صفحه جابجا میشوند، اضافه کردن کمی انیمیشن به این المنت ها باعث زیبایی هرسایت رسپانیسیو میشود، اما در استفاده از آن زیاده روی نکنید.
خرید شارژ ایرانسل
خرید شارژ ایرانسل، همراه اول، رایتل | خرید بسته های اینترنت ایرانسل | etore.ir
خرید سرور مجازی
ارائه سرور مجازی SSD NVMe برای اولین بار در ایران ؛ نهایت سرعت را تجربه کنید.
خودتان را اینجا معرفی کنید

در این مقاله طریقه انجام این کار را با انیمیشن کردن عرض و شفافیت المنت ها بین مدیاکوئری ها یاد میگیریم.

دمو

لایه بندی

در این مثال ساده از یک div استفاد میکنیم که در آن سه div کوچکتر قرار دارند، این div ها باتوجه به سایز صفحه ی مرورگر جابجا میشوند، کد HTML ما به صورت زیر میشود :
<div class='layout'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
</div>
همچنین کد CSS ما سه div را کنارهم قرار میدهد و همچنین کمی فاصله به راست به آنها میدهد :
.layout {
    width:960px;
    height:600px;
    background:#b34d6f;
    margin:auto;
}
.box {
    width:300px;
    height:200px;
    margin-right:25px;
    background:#4d77b3;
    display:inline-block;
    margin-top:50px;
}
.box:last-child {
    margin-right:0px;
}
با طراحی این لایه، هنگام تغییر عرض مرورگر لایه بندی ما عوض نمیشود، بنابراین باید کمی مدیا کوئری به آن اضافه کنیم.

اضافه کردن مدیا کوئری

جدیدا از مدیاکوئری در اغلب طرح های رسپانسیو استفاده میشود و بیشتر طراحان وب از طریقه کارکرد آن مطلع اند، اما برای کسانی که هنوز چیزی در رابطه با آن نمیدانند یک توضیح کوچک میدهم، مدیاکوئری ویژگی های دستگاهی که کاربر شما با آن به وبسایتتان می آید را چک میکند، مانند عرض، جهت و رزولوشن دستگاه، اگر برای این ویژگی های خاص CSS های مخصوصی نوشته باشید دقیقا این CSS ها در آن ویژگی عمل میکنند، برای مثال برای عرض 1200 پیکسل تا 900 پیکسل یک CSS مخصوص نوشته باشید مدیاکوئری دستگاه های با این عرض را شناسایی می کند و استایل های مخصوص را برای آن ها اجرا میکند. در این مثال از دو مدیاکوئری استفاده میکنیم که عرض زیر 960 پیکسل را چک میکنند و بعد از آن عرض زیر 660 پیکسل را چک میکنند، در این مدیاکوئری عرض المنت ها را تغییر میدهیم و همچنین div آخر را پنهان میکنیم تا فضا برای دو div اول بیشتر شود، کد مورد نظر به صورت زیر میشود :
@media screen and (max-width:960px) {
    .layout {
        width: 870px;
    }
    .box {
        width:270px;
    }
}
@media screen and (max-width: 660px) {
    .layout {
        width:570px;
    }
    .box {
        width:170px;
    }
    .box:last-child {
        opacity:0;
    }
}
اگر کد بالا را اجرا کنید، متوجه میشوید که سایز و شفافیت div آخر هنگامی که مرورگر را ریسایز میکنیم تغییر میکند. توجه کنید که برای مخفی کردن div به آن شفافیت 0 دادیم ( opacity = 0 ) بجای اینکه به آن display = none بدهیم، دلیل این کار این است که میخواهیم به آن انیمیشن بدهیم، شفافیت مقادیر زیادی میتواند بگیرد ( بین 0 تا 1 ) ولی display تنها دو مقدار true یا false میتواند بگیرد و همچنین قابل انیمیشن سازی نیست.

انیمیشن را اضافه کنید

انیمیشن ها در CSS باعث میشوند که برای انیمیشن های کوچکی مانند تغییر رنگ، اندازه، شفافیت و ... نیازی به استفاده از جی کوئری نداشته باشیم. برای اینکه میخواهیم کل المنت های صفحه را انیمیت کنیم، از * استفاده میکنیم. کد مورد نظر به صورت زیر میشود :
*{
    -webkit-transition:all 1s ease;
         -moz-transition:all 1s ease;
               -o-transition:all 1s ease;
                     transition:all 1s ease;
}

نتیجه گیری

اضافه کردن انیمیشن به طراحی رسپانسیوتان باعث زیبایی طرح های شما میشود، اما دقت کنید که در استفاده از آن زیاده روی نکنید.

محمد یه دانشجوی فناوری اطلاعات هست که از سال 92 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .

نظرات و سوالات کاربران

هنوز دیدگاه و یا سوالی ارسال نشده است.
هم اکنون شما اولین دیدگاه را ارسال کنید.