انجمن کدستانMoisrex

طراحی سایت ریسپانسیو و ایجاد انیمیشن در آنها

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

اگر کدهای ریسپانسیو شما یا همان Media Query بر اساس سایز مرورگر تان استفاده شده باشد, پس موضوع مورد نظر به آن شرایط انتقال خواهد یافت. افزودن اندکی انیمیشن میتواند پویایی و داینامیک و دی خیلی زیبایی را در خاطر کاربر و همچنین در کسب و کار تان به وجود بیاورد.

در این نوسته می خواهیم از چگونگی انیمیشن دادن به Opacity و سایر ویژگی های موضوع و المانها در درون صفحه صحبت کنیم. بهره گیری از انیمیشن ها هیچ ربطی به سئو سایت شما ندارد و طراحان سایت بایست بر روی موردهای دیگری در بهینه سازی سایت پافشاری و فوکوس کنند.

پدید آوردن چارچوب اولیه صفحه طراحی سایت

در نمونه کد ذیل از برچسب DIV بهره گرفته شده است که در درونش سه DIV دیگر نیز موجود است. این برچسب ها DIV بر اساس اندازه ویندوی مرورگر تغییر اندازه می دهند.

بعد با کد CSS ذیل قادر خواهیم بود آنها را در شرایط بهتری بگذاریم.

تا اینجا قسمت عمده و مهم ما بدون ریسپانسیو یا Media Query اجرا گشته است. این کدها تا به کنون بر اساس Viewport به خودی خود واکنش انجام نمی دهند.

افزودن کدهای Media Query در طراحی سایت ریسپانسیو

کدهای ریسپانسیو یا Media Query در حال حاضر خیلی زیاد مورد کاربرد دارند. خیلی از طراح های سایت از این شیوه آگاهی دارند و از آن در طراحی سایت های شان بهره می گیرند. در اینجا یک تذکر پراهمیت را برای ادامه کار یادآوری می کنیم: کدهای Media Query توانایی های دستگاه تان را ارزیابی می کنند نظیر: Width, Orientation, resulotion و غیره و بعد بر اساس موقعیت موجود کدهای دلخواه سی اس اس را برای شما بارگذاری می کنند. در کدهای زیر دو گونه Media Query یافت می شود که مرورگرها با اندازه 960 پیکسل به سمت کمتر شدن را ارزیابی می کنند و کد دیگر سایز کمتر از 660 پیکسل را. بعد بر اساس این سایز ها قادر خواهیم بود طول موضوع ها را عوض کنیم و یا سایر موضوع ها را در درون صفحه پنهان کنیم.

افزودن انیمیشن در طراحی سایت

انیمیشن در سی اس اس این نکته را تثبیت کرده که با نگارش تعداد خط های کمتر قادر خواهیم بود انیمیشن های جذابی را در مقایسه با زبان jQeury پدید بیاوریم. البته در به کارگیری از شیوه های انیمیشن در سی اس اس از Browser Prefixها بهره می گیریم.

و در انتها:

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