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

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



بستن
سئو کلی
minajafari mashinbank 2 80
این فلش صفحه کلید دارد!
niloofarmajdi niloofarmajdi 0 15
میکرو درایو های abb
ava96 ava96 0 27
نشانه‌های زرد زخم چیست؟
azar33 elii12 1 147
سیمواستاتین(زوکور)
tala95 elii12 1 182
نمایندگی تعمیرات باکنشت
nopardaz elii12 1 102
جراحی سینه و بیمه
jarahezibai elii12 1 184
از نتایج جراحی سینه (کوچک کردن سینه)
jarahezibai elii12 1 173
ویژگی های شخصیتی متولدین ماه ها بر اساس طالع بینی برج فلکی
luna elii12 2 106
مشاهده ی تمام مشخصات کامپیوتر
wo0olf elii12 2 2592
Ip چه کاربردی دارد؟
navids elii12 2 1848
همین الان تو چه فکری هستی؟ (22)
گلایه mohadese 551 27061
بهترین شرکت طراحی سایت
elii12 elii12 0 36
انتخاب بهترین شرکت طراحی سایت
elii12 elii12 0 36
رشته داروسازی در ترکیه
elii12 elii12 0 34
داروسازی در ترکیه
elii12 elii12 0 33
رنگ زندگی از دیدگاه شما
sana sana 126 11810
تو آواکس چند ساله ای ؟؟!!
mahya sana 383 52226
گالری عکس داریوش اقبالی
mosy rele sana 82 122823
سیو و ترینر بازی های مختلف 2
خاکسبز elii12 1 418
انتخاب اجباری برای نفر بعدی (6)
گلایه mohadese 665 48377
همه چیز در مورد تعمیر کولر گازی که باید بدانید
samirad samirad 0 40
مقصود از سوئیچ شبکه
elii12 elii12 0 34
سوئیچ شبکه چیست
elii12 elii12 0 38
سوئیچ شبکه
elii12 elii12 0 50
کاربرد های اصلی بالابر صنعتی در مشاغل مختلف
asiaborjj asiaborjj 0 34
پسرا یکی اضافه کنن....دخترا یکی کم کنن!(سری جدید 3)
شقایق luna 332 26959
گفتگوی آزاد
admin niloofar 2656 154630
نحوه تعویض کوئل خودرو
saharim saharim 0 36
سرویس و تعمیرات داکت اسپلیت
samirad samirad 0 40
عوامل مهم در خرید جاروبرقی خانگی
kimib kimib 0 31
حمل جهیزیه عروس با تخفیفات ویژه تازه عروس و داماد ها
seoupdate seoupdate 0 27
حمل جهیزیه عروس با تخفیفات ویژه تازه عروس و داماد ها
seoupdate seoupdate 0 29
حمل جهیزیه عروس با تخفیفات ویژه تازه عروس و داماد ها
seoupdate seoupdate 0 33
سرور مجازی بورس
MWEBSPOUYAN MWEBSPOUYAN 0 36
دانلود بازی(Lock On Modern Air Combat )
nokia farzadian 2 2177
اسم بلوتوث شما چیه ؟
aria niloofar 359 65610
داری؟نداری؟ (5)
moonlover niloofar 444 18816
یه تیکه از اولین آهنگی ک میاد تو ذهنت ....
سنا niloofar 318 44093
با اخر اسم من یه اسم بنویس(2)
گلایه niloofar 488 36983

نماد ها
دسترسی سریع به تاپیکهای مهم
تبلیغات
مطالب منتخب
مطالب پربازدید
مطالب پربازدید
چگونه در سایت های ریسپانسیو از انیمیشن استفاده کنیمزمان کنونی: Tuesday 14 July 2020, 07:46
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: webcando
آخرین ارسال: webcando
پاسخ: 1
بازدید: 340
 
امتیاز دهید:
  • 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 242 Saturday 22 June 2019 19:50
آخرین ارسال: sitecode
  چگونه در اینترنت از طراحی سایت خود محافظت کنیم sitecode 0 746 Sunday 29 April 2018 16:53
آخرین ارسال: sitecode
  طراحی سایت با استفاده از کلمات کلیدی در عنوان اصلی sharmin555 1 1,312 Tuesday 06 June 2017 10:56
آخرین ارسال: 7seo
  چگونه محتوای خوبی برای وب سایت خود بنویسیم؟ sharmin555 0 845 Monday 29 May 2017 11:36
آخرین ارسال: sharmin555
  استفاده از تکنولوژی واقعیت مجازی در طراحی سایت از رویا تا واقعیت sahar_tym 0 617 Sunday 21 May 2017 10:34
آخرین ارسال: sahar_tym

پرش به انجمن:



زمان کنونی: Tuesday 14 July 2020, 07:46