افراد مختلف خیلی از اوقات از جاوااسکریپت استفاده می کنند اما خیلی از اوقات آن‌ها هیچ نیازی به آن ندارند. بسیاری از افراد موافق وجود جاوااسکریپت در دنیای طراحی وبسایت های امروزی هستند، اما این موضوع هیچ ربطی به اجبار وجود ندارد و حتما در هر حالتی ما به جاوااسکریپت نیاز نداریم. اگر وبسایت شما تقریبا کمی همراه با ویژگی‌های اپلیکیشن‌ها همراه است، آیا واقعا نیازی هست که برای تمام افکت‌های وبسایت از جاوااسکریپت استفاده کنید؟
خب همیشه نه. هزاران مثال دیگر وجود دارد که در آن‌ها نمونه‌هایی از CSS خالص توانسته‌اند که جای افکت‌های جاوااسکریپتی را بگیرند. با پیوند دادن آن‌ها به همدیگر به سادگی می توانید موارد بسیار حرفه‌ای و خوبی از انیمیشن را ایجاد کنید. در چنین حالتی مرورگر شما می تواند بهتر و بهتر عمل کند و همچنین سریع‌تر از همیشه باشد، در چنین حالتی دیگر مشکل پشتیبانی کردن نخواهید داشت.
دیگر مزایا: انیمیشن‌های سی اس‌اس برای رندر کردن استفاده بسیار بهینه تری از سخت افزار می‌کنند و کار شما را تسریع می‌بخشند. استفاده کردن از جاوااسکریپت و مدیریت خطاهای آن اغلب اوقات با مشکلات خاص خود همراه است و این حالت می تواند زمان توسعه شما را نیز افزایش دهد.
پس بهتر است نگاهی به گزینه‌های بسیار مناسب CSS بیاندازید که به صورت خالص با CSS ایجاد شده اند و می توانند به درستی برای شما کار کنند.
پارالکس
تکنیک پارالکس حالتی نیست که به طور گسترده توسط افراد زیادی استفاده شود اما با این وجود این حالتی است که معروف است و افرادی وجود دارند که از آن استفاده می کنند. تقریبا در تمام حالت ها نیز وقتی از این تکنیک استفاده شده در پیاده سازی آن جاوااسکریپت وجود داشته است. طراحان وب در دنیا دیگری نیازی ندارند تا از این حالت جاوااسکریپتی استفاده کنند. به این دلیل که Keith Clark در سال ۲۰۱۴ یک نسخه از این حالت را طراحی کرد و با تکنیک‌های دیگری آن را در سال ۲۰۱۵ مجددا بازخوانی نمود.
برای یک جایگزین پیاده سازی و ایده جالب‌تر می توانید به این مثال از Joshua Bemenderfer نگاهی بیاندازید.
اسلایدشو
درسته، اسلایدشوها هم می توانند به راحتی با استفاده از سیاساس پیاده سازی شوند. تا به حال ما همواره برای چنین کاری از jQuery استفاده کرده‌ایم. اما خب به نظر برای درک کردن کمی سخت می‌آمد. در لینک‌هایی که در زیر آمده است می توانید مواردی را مشاهده کنید که در آن اسلایدشو‌هایی درست براساس سیاساس طراحی شده اند.
اسلایدشو واکنشگرا / تنها با استفاده از CSS و HTML5
اسلایدر Testimonial با استفاده از سیاساس
حالت کشویی
به نظر می‌رسد که این مورد یکی از مرسوم ترین حالت‌هایی است که در تمام وبسایت‌ها وجود دارد و پیاده سازی آن توسط جاوااسکریپت انجام می شود. به یاد می‌آورم زمانی که می خواستیم در وبلاگ‌ها منوهای کشویی با استفاده از سیاساس را پیاده سازی کنیم به مشکل برمی‌خوردیم، اما حال این تکنیکی کاملا مشهود است که توسط تمام مرورگرها نیز اجرا می شود. در این لینک می توانید مثالی که توسط Andor Nagy ایجاد شده را مشاهده کنید.
پنجره‌های MODAL و گالری‌های تصویری
آیا محتوای مخفی دارید که بخواهید با استفاده از یک دکمه آن‌ها را نشان دهید؟ خب سیاساس می تواند این کار را به خوبی برای شما انجام دهد. شما مطمئن می توانید یک پنجره ساده Modal را ایجاد کنید، همچنین در کنار آن به خوبی می توانید گالری‌های تصویری را ایجاد نمایید.
قبلا نیز در وبسایت در مقاله‌ای تحت عنوان «۱۰ قطعه کد خالص CSS برای ساختن Modal Window» این مورد را بررسی کرده‌ایم. اما برای قسمت گالری تصویری، بهترین موردی را که توانستم پیدا کنم، کاری در گیت‌هاب بود که توسط کاربری به اسم mas-5 ایجاد شده است. در این لینک می‌توانید مخزن اصلی را مشاهده کنید و در این لینک نیز می‌توانید پیشنمایشی از حالت موجود را ببینید.
دکمه‌ها و افکت های شناور
خب، این موضوع تقریبا حالتی است که توسعه دهندگان قبلا نیز با آن کار کرده اند. اما در سیاساس ۳ به نظر تلاش بسیاری برای ساختن افکت‌های مختلف شده که برای دکمه‌ها و منوها می‌توانیم در نظر بگیریم، البته نه فقط برای دکمه‌ها و منوها بلکه برای هر المانی که می تواند کلاس hover را دریافت کند. پیدا شدن HTML5 و موضوع Canvas در کنار SVG طراحان را یاری نموده تا بتوانند کارهای خارق‌العاده دیگری را نیز انجام دهند.
برای انیمیشن‌های مربوط به دکمه و افکت‌های مربوطه می‌توانید لینک‌های زیر را مطالعه نمایید.
مجموعه دکمه‌ها توسط Christophe Guerrin
افکت‌های موج دار توسط Pau Giner
افکت تایپ‌رایتر تصادفی
من هیچ دسته بندی خاص برای این موضوع پیدا نکرده‌ام، اما می‌توانید برای بهتر متوجه شدن از آن این لینک را مشاهده کنید. این یک افکت تایپ‌رایتر است که معمولا افراد با استفاده از جاوااسکریپت آن را انجام می‌دهند. برای مطالعه بیشتر در رابطه با این موضوع می توانید این مقاله از Geoff Graham را مطالعه نمایید.
مطالعه بیشتر
در این مقاله قصد معرفی موردی، را نداشته‌ایم، بلکه سعی کردیم که تا عصر جدیدی از مواردی که سیاساس می تواند انجام دهد را به شما معرفی نماییم. در حال حاضر جاوااسکریپت باید برای کارهایی استفاده شود که HTML و CSS در انجام دادن آن توانایی ندارند. برای مطالعه موردی این موضوع می‌توانید این مقاله را مطالعه کنید. در این مقاله می توانید لیستی از ۶۰ المان ساخته شده توسط سیاساس را مشاهده نمایید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید