4 تکنیک جدید برای ساخت پس زمینه سایت که ارزش امتحان کردن را دارد
این گونه به نظر می رسد که در حوزه طراحی، توجه زیادی به پس زمینه ها نمی شود. و خب! این درست نیست! قبل از اینکه CSS شروع به فتح قله های طراحی کند، پس زمینه نقش اصلی در ساختن ظاهر و دکوراتیو یک سایت را بر عهده داشت.
در حال حاضر هم می شود گفت که وضعیت تغییر چندانی نکرده است. در اغلب موارد، پس زمینه به عنوان یک نیروی محرکه اولیه بصری عمل می کند که در تم کلی، نقشی مهم را ایفا می کند.
سابقا، تصاویر و ویدئو ها اولین انتخاب برای یک پس زمینه یا backdrop بودند. حقیقت این است که این روش خوب اما تکراری است که همه از آن استفاده می کنند: هر وب سایت دیگری نیز با استفاده از پس زمینه های مبتنی بر تصویر یا مبتنی بر ویدئو به استقبال مخاطبان آنلاین می رود. و این باعث می شود که وب ( و به خصوص رابط کاربری شما) همه جا مشابه هم و از نظر تجربه کاربری قابل پیش بینی باشد.
همچنین بخوانید:
- آموزش حرکت تصویر پس زمینه با حرکت موس توسط جی کوئری و css
- آموزش قراردادن ویدیو در پس زمینه با html5 و css در وب
یک راه چاره این است که با استفاده از تکنیک های جدید و بازی با CSS3، HTML5 و جاوا اسکریپت، راه حل های جدیدی پیدا کنید. در واقع، برای این گزینه ها ترفندهای مشخصی وجود دارد. حداقل 4 روش برای پس زمینه های پویای جدید وجود دارد که قادر به رقابت در این زمینه هستند.
اجازه دهید به این چهار روش نگاهی بیندازیم:
انیمیشن پارتیکل یا انیمیشن ذره ای
انیمیشن پارتیکل در حال حاضر یکی از محبوب ترین گزینه ها می باشد. وب سایت های زیادی با این ایده ظریف که از زیبایی کیهان الهام گرفته شده، موفق شده اند به رابط کاربری خود جلوه دهند. این ایده در ترکیب با بوم رنگ ساده، تصویر، نقاشی های برداری، و حتی عکس ها نیز خوب عمل می کند.
در نظر داشته باشید که این انیمیشن ها تنوع دارند. می توانند یک بسته نرم افزاری از نقاط متحرکی باشند که در سراسر صفحه پراکنده شده اند و از یک آسمان پر از ستاره یا باران ستاره، الهام گرفته شده باشند. یا برج های فلکی باشند که ستاره ها را با خطوط نازک بهم متصل کرده اید. این همه کاری که می توانید اجرا کنید نیست؛ گاهی اوقات می توانید کاری کنید که حرکت ماوس روی این ذرات پس زمینه تاثیر بگذارد و حالت شناوری به آن دهد، مثلا در این مورد، ذرات با قرار گرفتن ماوس روی آن ها به دور رانده شوند، یا چرخش کنند، یا به مکان نمای موس متصل شوند و شکل یک دنباله به خود بگیرند، و کارهای مشابه دیگر.
Huub، نمونه سایتی است که از انیمیشن پارتیکل استفاده کرده است. یک حرکت خوشه ای شسته و رفته از نقاط که با یک رنگ کاملا تیره و یک نقشه که در پشتش قرار گرفته است.
نکته : اگر می خواهید با پس زمینه پویای Huub آشنا شوید، باید نگاهی به پروژه Dominic Kolbe با نام mouse parallax ، داشته باشید. به نظر می رسد این دو مشابه هم باشند. اما اگر به یک راه حل فوری نیاز دارید، کتابخانه جاوا اسکریپت Vincent Garreau که به صورت Particles.js صدا زده می شود، همان چیزی است که دنبال آن هستید و می تواند به شما کمک کند.
امواج پارتیکل یا امواج ذرات
مثال قبلی، اثری است که با دستکاری های هوشمندانه با HTML5 و CSS3 و اندکی جادوی جاوا اسکریپت به دست می آید، این مورد یک تجربه هوشمندانه با کتابخانه Three.js است. با شکل های طاق دار و حرکات نرم شبیه موج، که یادآور جز و مد است. این راهکار، حس یک بوم زنده را ایجاد می کند. با استفاده از مکان نما می توانید آن را در جهات مختلف بچرخانید، صورت های افقی و عمودی آن را امتحان کنید.
StuurMen یک بخش خوش آمدگویی ساده و شیک دارد. مینیمال، تر و تمیز و نفیس است. محتوا به طور ناگهانی در زمینه وارد می شود در حالی که پس زمینه تپنده یک حالت مناسب برای پروژه را ایجاد می کند.
نکته: در اینجا میتوانید یک اسکریپت اصلی ThreeJS و تطابق موفق آن به وسیله Deathfang با یک نسخه ی نمایشی با نام three.js canvas – particles – waves را پیدا کنید.
اختلاف منظر شناور ماوس یا Mouse hover parallax
اختلاف منظر یا پارالاکس لایه ای یکی دیگر از ترندهای رو به رشد است. این روش همراه با انیمیشن پارتیکل، می تواند پس زمینه استاتیک و خسته کننده را به یک ترکیب با حس سه بعدی ظریف تبدیل کند. نکته عالی در مورد آن این است که شما مجبور نیستید که خود را برای انتخاب تصویر دلخواه محدود کنید، فقط کافی است از پارالاکس استفاده کنید تا آن را کمی جذاب تر کنید.
این برای زمان هایی که به زنده و برجسته کردن عنوان، لوگو، صحنه ای سورئال و یا یک تصویر نیاز دارید، بسیار مفید است. همچنین برای انیمیشن های انتزاعی مختلف نیز مناسب است. شناور بودن همراه با حرکت ماوس نه تنها ابعاد دیگری به آن اضافه می کند، بلکه اجازه می دهد تا کاربران با محیط بازی کنند.
به عنوان نمونه، Alexandre Rochet صفحه برجسته و صدا داری دارد.
نکته : برای ایجاد پارالاکس، کتابخانه های متعدد و قطعه کد های مناسبی وجود دارد. یکی از محبوب ترین آن ها پلاگینی به نام Parallax.js است که توسط Matthew Wagerfield ایجاد شده است.
تجربه های WebGL
تجربه های WebGL، البته، مخصوص توسعه دهنده های سخت کوش و کارهای پیچیده و مشتری هایی با بودجه بالا می باشند. آن ها می توانند درخشان، هیجان انگیز و کمی پر شکوه باشند. و ارزش هر ریالی که برای آن ها خرج شود را دارند. داشتن قدرت بیشتر، مسئولیت بیشتری به همراه می آورد، با WebGL نیز هرگز نباید میزان منابع مصرف شده و عدم سازگاری کامل مرورگر را فراموش کنید.
Solarin همه آن چه یک تجربه کاربری دیوانه کننده و فراموش نشدنی می تواند داشته باشد را دارد. این یک تجربه WebGL سه بعدی است که پر است از ویژگی های هیجان انگیز و نوآورانه. پس زمینه هدر یک محوطه بزرگ است که به نشانگر ماوس پاسخ می دهد و یک تصور بزرگ ایجاد می کند.
نکته : فهمیدن این که چه نبوغی در MediaMonks استفاده شده مشکل است. در وب، شما همیشه می توانید یک نقطه شروع پیدا کنید که امکان پیشرفت شما را فراهم آورد. WebGL API در اینجا همان نقطه شروع است، و همچنین کد Yoichi Kobayashi که پروژه ای با نام “The wriggle sphere” را ارائه کرده است.
نتیجه گیری
در حالیکه استفاده از تصاویر و فیلم ها یک روش اثبات شده و راحت تر برای پس زمینه است، اما گزینه های امیدوار کننده دیگری نیز وجود دارند که می توانند نتایج دلخواهی را به دست دهند. اجرای خیلی از آن ها چالش برانگیز است و حتی ممکن است از نظر پولی، نیازمند صرف هزینه باشد، با این حال این اقدامات توجیه پذیر و بسیار منطقی هستند.
این گزینه چه یک انیمیشن پارتیکل ساده باش چه یک تجربه WebGL قابل توجه، می تواند زندگی جدیدی را به هسته رابط کاربری شما ببخشد و برای وب سایت شما یک شروع جدید باشد.
نظرات کاربران