به نام خدا
سلام به همه تمشکی ها?
دیروز داشتم یک وبسایت ساده طراحی میکردم، اما انگار یک مشکل بزرگ داخل وبسایت بود اما من متوجه نمیشدم!
تصمیم گرفتم تا وبسایت را با دوستان و خانواده ام به اشتراک بگذارم تا ببینم نظر و تجربه کاربری (UX) آنها نسبت به وبسایت چی هست. (یه جورایی از خانواده ام به عنوان دیباگر استفاده کردم??)
خدارو شکر بعد از یک هفته خیره شدن به وبسایت متوجه نکته خیلی ریزی شدم!
پس زمینه سایت! درسته! پیداش کردم!
مشکل اصلی پس زمینه وبسایت بود که یک رنگ سفید و ساده بود و همین باعث شده بود اون همه انیمیشن وبسایت خیلی به دل نشینه!?♂️
حالا که مشکل رو متوجه شده بودم باید دنبال راه حل مشکل میگشتم.
اول رنگ های وبسایت رو عوض کردم اما تاثیر خیلی زیادی نداشت! برای همین انواع دیگر پس زمینه ها رو هم تست کردم اما پس زمینه های متحرک بهترین عملکرد و جذابیت رو داشتند. ?
حالا که مشکل اول رو رفع کردم مشکل دوم خودش رو نشون داد?♂️، من از گیف (gif) برای پس زمینه استفاده میکردم که باعث میشد زمان باز شدن صفحات وبسایت حتی پس از بافر کردن تصویر توسط مرورگر هنوز هم صفحه حدود 30 ثانیه تاخیر تا باز شدن کامل صفحه توسط مرورگر نسبت به حالت عادی داشته باشه که خییییلی زیاد هست!
از همه بدتر چون که از تصویر گیف (gif) استفاده میکردم رم دستگاه های قدیمی اشغال میشد و صفحه به طور کامل نشان داده نمیشد..... از اون هم بدتر اینکه صفحه خیلیی کند میشد چون که پردازنده باید تصویر پس زمینه رو هم پردازش کنه?
بعد از گوگل کردن های فراوان دیدم که میشه با css انیمیشن های خیلی زیبایی رو برای پس زمینه ساخت که وبسایت رو میشه گفت اصلا کند نمیکرد?
پس دست به کار شدم و چند تا انیمیشن ساده رو ساختم که خیلی هم خوب شدند?
امروز هم میخواهم در این نوشته سه از اونهارو به شما معرفی کنم، پس با تمشک همراه باشید ^_^
خب، من این پس زمینه رو فقط با CSS نوشتم که ترکیبی از مثلث هاست که مدام جاشون عوض میشه و انیمیشن جذابی رو به وجود میاره. (شما میتونید اونرو در هر وبسایتی به کار ببرید!?)
من توی این انیمیشن اومدم از چند خط با رنگ های متفاوت استفاده کردم که هیچکدوم آروم و قرار ندارند و همیشه به سمت چپ و راست حرکت میکنند?
من این پس زمینه رو با HTML و CSS نوشتم . (شما میتونید اونرو در هر وبسایتی به کار ببرید!?)
3. آخرین و بهترین!
خب، به آخرین پس زمینه رسیدیم. این پس زمینه که خیلی هم ساده هست با CSS و HTML نوشته شده که روی همه وبسایت ها قابل استفاده هست.
به این صورت هست که انگار رنگ صفحه مدام و به صورت ملایم در حال تغییر است که جلوه خاصی را به وبسایت میدهد?
