خوش آمدید , میهمان گرامی! ورود or ثبت نام

تغییر رنگ قالب



بستن
نشانه‌های زرد زخم چیست؟
azar33 elii12 1 139
سیمواستاتین(زوکور)
tala95 elii12 1 172
نمایندگی تعمیرات باکنشت
nopardaz elii12 1 94
جراحی سینه و بیمه
jarahezibai elii12 1 174
از نتایج جراحی سینه (کوچک کردن سینه)
jarahezibai elii12 1 164
سئو کلی
minajafari elii12 1 66
ویژگی های شخصیتی متولدین ماه ها بر اساس طالع بینی برج فلکی
luna elii12 2 97
مشاهده ی تمام مشخصات کامپیوتر
wo0olf elii12 2 2584
Ip چه کاربردی دارد؟
navids elii12 2 1839
همین الان تو چه فکری هستی؟ (22)
گلایه mohadese 551 27009
بهترین شرکت طراحی سایت
elii12 elii12 0 28
انتخاب بهترین شرکت طراحی سایت
elii12 elii12 0 29
رشته داروسازی در ترکیه
elii12 elii12 0 26
داروسازی در ترکیه
elii12 elii12 0 28
رنگ زندگی از دیدگاه شما
sana sana 126 11800
تو آواکس چند ساله ای ؟؟!!
mahya sana 383 52206
گالری عکس داریوش اقبالی
mosy rele sana 82 122703
سیو و ترینر بازی های مختلف 2
خاکسبز elii12 1 412
انتخاب اجباری برای نفر بعدی (6)
گلایه mohadese 665 48341
همه چیز در مورد تعمیر کولر گازی که باید بدانید
samirad samirad 0 31
مقصود از سوئیچ شبکه
elii12 elii12 0 28
سوئیچ شبکه چیست
elii12 elii12 0 33
سوئیچ شبکه
elii12 elii12 0 44
کاربرد های اصلی بالابر صنعتی در مشاغل مختلف
asiaborjj asiaborjj 0 27
پسرا یکی اضافه کنن....دخترا یکی کم کنن!(سری جدید 3)
شقایق luna 332 26932
گفتگوی آزاد
admin niloofar 2656 154534
نحوه تعویض کوئل خودرو
saharim saharim 0 27
سرویس و تعمیرات داکت اسپلیت
samirad samirad 0 32
عوامل مهم در خرید جاروبرقی خانگی
kimib kimib 0 25
حمل جهیزیه عروس با تخفیفات ویژه تازه عروس و داماد ها
seoupdate seoupdate 0 21
حمل جهیزیه عروس با تخفیفات ویژه تازه عروس و داماد ها
seoupdate seoupdate 0 23
حمل جهیزیه عروس با تخفیفات ویژه تازه عروس و داماد ها
seoupdate seoupdate 0 26
سرور مجازی بورس
MWEBSPOUYAN MWEBSPOUYAN 0 26
دانلود بازی(Lock On Modern Air Combat )
nokia farzadian 2 2172
اسم بلوتوث شما چیه ؟
aria niloofar 359 65575
داری؟نداری؟ (5)
moonlover niloofar 444 18800
یه تیکه از اولین آهنگی ک میاد تو ذهنت ....
سنا niloofar 318 44062
با اخر اسم من یه اسم بنویس(2)
گلایه niloofar 488 36951
دوستان آواکسی هر وقت وارد سایت آواکس شدی یه جمله اینجا بنویس.
rapr niloofar 742 91343
چی باعث شده بعد از این همه سال بازم به آواکس سر بزنی؟؟
mohadese luna 3 93

نماد ها
دسترسی سریع به تاپیکهای مهم
تبلیغات
مطالب منتخب
مطالب پربازدید
مطالب پربازدید
چگونه در سایت های ریسپانسیو از انیمیشن استفاده کنیمزمان کنونی: Sunday 12 July 2020, 08:26
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: webcando
آخرین ارسال: webcando
پاسخ: 1
بازدید: 339
 
امتیاز دهید:
  • 0 رأی - میانگین امیتازات : 0
  • 1
  • 2
  • 3
  • 4
  • 5
چگونه در سایت های ریسپانسیو از انیمیشن استفاده کنیم
Saturday 06 August 2016, 10:18
ارسال: #1
چگونه در سایت های ریسپانسیو از انیمیشن استفاده کنیم
[تصویر: Responsive-Web-Design-1.jpeg]


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

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


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


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


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

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


[تصویر: Responsive_Web_Design_1.jpg]


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


[تصویر: Responsive_Web_Design_2.jpg]


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





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

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


[تصویر: Responsive_Web_Design_3.jpg]


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

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


[تصویر: Responsive_Web_Design_4.jpg]


و در انتها:


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


موضوع های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
  چگونه طراحی سایت بی نظیر داشته باشیم sitecode 0 241 Saturday 22 June 2019 19:50
آخرین ارسال: sitecode
  چگونه در اینترنت از طراحی سایت خود محافظت کنیم sitecode 0 745 Sunday 29 April 2018 16:53
آخرین ارسال: sitecode
  طراحی سایت با استفاده از کلمات کلیدی در عنوان اصلی sharmin555 1 1,310 Tuesday 06 June 2017 10:56
آخرین ارسال: 7seo
  چگونه محتوای خوبی برای وب سایت خود بنویسیم؟ sharmin555 0 844 Monday 29 May 2017 11:36
آخرین ارسال: sharmin555
  استفاده از تکنولوژی واقعیت مجازی در طراحی سایت از رویا تا واقعیت sahar_tym 0 617 Sunday 21 May 2017 10:34
آخرین ارسال: sahar_tym

پرش به انجمن:



زمان کنونی: Sunday 12 July 2020, 08:26