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

موضوع: چگونه در سایت های ریسپانسیو از انیمیشن استفاده کنیم

  1. #1
    webcando آنلاین نیست.
    webcando
    کاربر سايت
    23نوشته1مورد پسند

    تاریخ عضویت
    Jun 2016
    شماره عضویت
    11690
    پسندیده است
    0 پست
    بلاگ
    پست
    میزان امتیاز
    11
    No Set

    چگونه در سایت های ریسپانسیو از انیمیشن استفاده کنیم

    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی


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

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


    اگر کدهای ریسپانسیو شما یا همان 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ها بهره می گیریم.


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی


    و در انتها:


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

  2. نوين وردپرس تبلیغات شما

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. درخواست راهنمایی در زمینه دیزاین ( کدنویسی )
    توسط Daniyal.K در انجمن گفت و گوی آزاد
    پاسخ: 6
    آخرين نوشته: 08-07-2016, 03:23 AM
  2. اضافه کردن یک قابلیت خوب به افزونه ویبولتین(اگر vb داری بیا تو)
    توسط AMIN008 در انجمن رسیدگی به مشکلات انجمن شما ( پرسش و پاسخ )
    پاسخ: 5
    آخرين نوشته: 07-31-2016, 04:21 PM
  3. میزبانی هاست + ssl رایگان + دامنه رایگان
    توسط SilverLearn در انجمن بخش هاست های وارز
    پاسخ: 0
    آخرين نوشته: 07-30-2016, 11:56 PM
  4. پاسخ: 0
    آخرين نوشته: 07-29-2016, 02:27 PM
  5. build link از طریق کامنت اسپم، آری یا خیر؟!!
    توسط rojin_1365 در انجمن آموزش سئو و بهینه سازی
    پاسخ: 1
    آخرين نوشته: 07-04-2016, 06:31 PM

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی