در طراحی سایت چگونه متحرک سازی ایجاد کنیم؟

[nazano]

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


معین کردن استایل های متفاوت در طراحی سایت شما را قادر می سازند تا بتوانید از طریق تغییر و مرجع دهی به استایل های مختلف گونه ای حرکت کردن را در طراحی سایت خود به وجود آورید. در زیر برایتان نمونه ای از چگونگی جاسازی کدهای CSS3 را در تگ div نشان داده ایم.





div {


-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */


animation: myfirst 5s;


}


/* Chrome, Safari, Opera */


@-webkit-keyframes myfirst {


from {background: red;}


to {background: yellow;}


}


/* Standard syntax */


@keyframes myfirst {


from {background: red;}


to {background: yellow;}


}


همانطور که در بالا گفته شد شما هر وقت بخواهید به راحتی می توانید در بین استایل های مختلفی که ایجاد کرده اید تغییر و جابجایی بدهید و نحوه کار هم خیلی آسان است فقط کافی است که از ویژگی های درصد یا از کلمه کلیدی "from" و "to" این کار را به اجرا در آورید. در زیر نمونه ای از به کارگیری ویژگی درصد را ببیند.


/* Chrome, Safari, Opera */


@-webkit-keyframes myfirst {


0% {background: red;}


25% {background: yellow;}


50% {background: blue;}


100% {background: green;}


}


/* Standard syntax */


@keyframes myfirst {


0% {background: red;}


25% {background: yellow;}


50% {background: blue;}


100% {background: green;}


}


دیدید کار خیلی راحت است، شما توانستید با استفاده از کدهای CSS3 در طراحی سایت خویش جلوه ها و نماهای بسیار زیبایی را که دارای سرعت بالایی هم هستند ایجاد کنید که این کار هم باعث توجه نظر کاربر (کاربرپسند) می شود و هم در بهینه سازی سایت شما نقش مهمی را بازی می کند.



منبع سایت طراحی سایت آلپ نت - وب وی