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

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



بستن
دانلود بازی(Lock On Modern Air Combat )
nokia farzadian 2 2147
گفتگوی آزاد
admin admin 2655 154219
پسرا یکی اضافه کنن....دخترا یکی کم کنن!(سری جدید 3)
شقایق niloofar 329 26875
اسم بلوتوث شما چیه ؟
aria niloofar 359 65514
داری؟نداری؟ (5)
moonlover niloofar 444 18763
یه تیکه از اولین آهنگی ک میاد تو ذهنت ....
سنا niloofar 318 43894
انتخاب اجباری برای نفر بعدی (6)
گلایه niloofar 659 48260
با اخر اسم من یه اسم بنویس(2)
گلایه niloofar 488 36900
دوستان آواکسی هر وقت وارد سایت آواکس شدی یه جمله اینجا بنویس.
rapr niloofar 742 91268
چی باعث شده بعد از این همه سال بازم به آواکس سر بزنی؟؟
mohadese luna 3 77
انواع کانکس‌های پلیس و ویژگی های آن
pouriaci pouriaci 0 28
نمی‌دانید بیت کوین چیست؟
bitmehr bitmehr 0 27
آموزش خرید و فروش تتر به صورت لحظه ای
bitmehr bitmehr 0 27
تو آواکس چند ساله ای ؟؟!!
mahya mohadese 382 52147
با ورود به آواکس اولین اسمی که به یادش می افتی اسم زیبای چه کسی هست ؟
پسر شیطون mohadese 124 11955
چند خط برای ...
sama mohadese 1810 259691
غذا برای لاغری شکم
Nade90 Nade90 0 33
تعمیر مایکوفر، کولر گازی و جارو.برقی بوش شمال تهران
fataaaneee fataaaneee 0 35
علت خاموش شدن یخچال ویرپول
fataaaneee fataaaneee 0 33
انواع ارورهای یخچال ویرپول
fataaaneee fataaaneee 0 30
درایو ABB
ava96 ava96 0 24
یخچال صنعتی | قیمت خرید انواع یخچال و فریزر های صنعتی
seoupdate seoupdate 0 25
روش های سفت شدن سینه بعد از دوران بارداری
Nade90 Nade90 0 53
ddos سرور مجازی چیست و چگونه می توان با آن مقابله کرد – بخش سوم
pouyanweb9 pouyanweb9 0 47
صفحه کلید کامپیوتر را چگونه تمیز کنیم؟
niloofarmajdi niloofarmajdi 0 47
نگهداری از نوزاد نارس در خانه
Nade90 Nade90 0 49
دانلود
9183413732 9183413732 0 59
الان داری چه آهنگی گوش میدی ؟
moonlover luna 514 105920
معرفی بهترین خدمات نمایندگی تعمیرات دوو
foroootaan foroootaan 0 54
مهمترین علت خاموش شدن یخچال
foroootaan foroootaan 0 42
نمایندگی مجاز تعمیرات دوو در غرب تهران
foroootaan foroootaan 0 43
خرید پرفکت‌مانی برای ایرانیان
bitmehr bitmehr 0 46
علم پزشکی در دست هوش مصنوعی تا سال 2020
Nade90 Nade90 0 55
همه چیز در مورد قیمت بیت کوین
bitmehr bitmehr 0 48
واشر سرسیلندر | رفع عیب سوختن واشر سرسیلندر پژو
seoupdate seoupdate 0 39
واشر سرسیلندر | رفع عیب سوختن واشر سرسیلندر پژو
seoupdate seoupdate 0 42
واشر سرسیلندر | رفع عیب سوختن واشر سرسیلندر پژو
seoupdate seoupdate 0 42
واشر سرسیلندر | رفع عیب سوختن واشر سرسیلندر پژو
seoupdate seoupdate 0 42
واشر سرسیلندر | رفع عیب سوختن واشر سرسیلندر پژو
seoupdate seoupdate 0 44
واشر سرسیلندر | رفع عیب سوختن واشر سرسیلندر پژو
seoupdate seoupdate 0 43

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

پرش به انجمن:



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