شما اینجا هستید :

Home » مقالات » توسعه وب » ۶ افکت جاوا اسکریپت که میتوان با سی‌اس‌اس انجام داد

۶ افکت جاوا اسکریپت که میتوان با سی‌اس‌اس انجام داد

خیلیا هستن که از جاوا اسکریپت استفاده میکنن در حالی که خیلی از اوقات لزومیم نداره. خیلیا موافق وجود جاوا اسکریپت در دنیای طراحی وبسایت های امروزی هستن، ما همیشه به جاوا اسکریپت نیاز نداریم. اگر وبسایتتون تقریبا کمی از ویژگی‌های اپلیکیشنارو داره، آیا واقعا نیازه که برای تمام افکت‌های وبسایتتون از جاوا اسکریپت استفاده کنین؟

خب همیشه نه. مثال های زیادی میشه زد که تو اونا نمونه‌هایی از CSS خالص تونستن که جای افکت‌های جاوا اسکریپتی رو بگیرن. با پیوند‌ دادن اونا به همدیگه به سادگی می تونین موارد بسیار حرفه‌ای و خوبی از انیمیشن رو به وجود بیارین. در چنین حالتی مرورگر شما می تونه بهتر و بهتر عمل کنه و  سریع‌تر از همیشه باشه، در چنین حالتی دیگه مشکل پشتیبانی کردن براتون پیش نمیاد.

از انیمیشن های سی اس اس خیلی راحت تر میشه خروجی گرفت و این کار شما رو ساده تر و سریعتر میکنه . استفاده کردن از جاوا اسکریپت و مدیریت خطاهای اون اغلب اوقات با مشکلات خاصی روبه روئه و این حالت می تونه زمان توسعه شما را نیز افزایش بده.

پس حتما نگاهی به گزینه‌های بسیار مناسب CSS بندازین چون به صورت خالص با CSS ایجاد شدن و می تونن به درستی برای شما کار کنن.

پارالاکس

تکنیک پارالاکس حالتی نیس که به طور گسترده توسط افراد زیادی استفاده بشه اما خب خیلی معروفه و افرادی وجود دارن که از اون استفاده می کنن. تقریبا در تمام حالت ها وقتی از این تکنیک استفاده شده تو اون جاوا اسکریپت بکار رفته. طراحای وب  دیگه نیازی ندارن تا از این حالت جاوا اسکریپتی استفاده کنن چون که Keith Clark در سال ۲۰۱۴ یک نسخه از این حالت رو طراحی کرد و با تکنیک‌های دیگه ایی اونو در سال ۲۰۱۵ مجددا بازخوانی کرد.

به این مثال هم میتونین یه نگاهی بندازین Joshua Bemenderfer

اسلایدشو

همونطور که میدونین اسلایدشوها هم می تونن به راحتی با استفاده از سی‌اس‌اس پیاده سازی بشن.ما برای اینکارهمواره  از jQuery استفاده کردیم. اما خب به نظر برای درک کردن کمی سخت می‌اد. تو لینک‌های پائین می تونین ببینین که اسلاید شوهایی کاملا بر اساس سی‌اس‌‌اس طراحی شدن.

اسلایدشو واکنشگرا / تنها با استفاده از CSS و HTML۵

اسلایدر Testimonial با استفاده از سی‌اس‌اس

حالت کشویی

حالت کشویی مرسوم ترین حالتی که در تمام وبسایت‌ها وجود داره و پیاده سازیش توسط  خود جاوا اسکریپت انجام میشه. این تکنیکیه که کاملا مشهوده و توسط تمام مرورگرها هم اجرا مشه. تو این لینک می تونین مثالی که توسط Andor Nagy ایجاد شده رو ببینین.

پنجره‌های MODAL و گالری‌های تصویری

اگه محتوای مخفی دارین و میخواین با استفاده از یه دکمه اونو نشون بدینخب سی‌اس‌اس می تونه این کار را به خوبی برای شما انجام بده. شما  می تونین یک پنجره ساده Modal رو ایجاد کنن همچنین در کنار اون به خوبی می تونین گالری‌های تصویری ایجاد کنین.

دکمه‌ها و افکت های شناور

خب، این موضوع تقریبا حالتیه که توسعه دهندها قبلا هم با اون کار کردن. اما در سی‌اس‌اس ۳ به نظر تلاش بسیاری برای ساختن افکت‌های مختلف شده که برای دکمه‌ها و منوها می‌تونیم در نظر بگیریم، البته نه فقط برای دکمه‌ها و منوها بلکه برای هر المانی که می تونه کلاس hover رو دریافت کنه. پیدا شدن HTML ۵ و موضوع Canvas در کنار SVG دست طراحارو باز کرده تا بتونن کارهای حیرت انگیزی دیگه اییم انجام بدن.

برای انیمیشن‌های مربوط به دکمه  ها و افکت‌های مربوطه می‌تونین به لینک‌های پایین مراحعه کنین.

مجموعه دکمه‌ها توسط Christophe Guerrin

افکت‌های موج دار توسط Pau Giner

افکت تایپ‌رایتر تصادفی

هیچ دسته بندی خاصی برای این موضوع وجود نداره اگرم هست من پیدا نکردم، اما می‌تونین برای بهتر متوجه شدنش این لینک رو مشاهده کنین. این یک افکت تایپ‌ رایتره که معمولا افراد با استفاده از جاوا اسکریپت اونو انجام میدن. برای مطالعه بیشتر در رابطه با این موضوع به این مقاله از Geoff Graham مراجعه کنین.

برای مطالعه بیشتر در مورد مواردی که سی‌اس‌اس می تونه انجام بده پیشنهاد میکنم این مقاله را مطالعه کنید. در این مقاله می توانید لیستی از ۶۰ المان ساخته شده توسط سی‌اس‌اس را مشاهده نمایید.

مــطالب مشـــابه

تفاوت میان برنامه‌نویسی شئ‌گرا و تابعی

دو مورد از الگوها و سر مشق های برنامه‌نویسی که توسعه‌دهنده ها به وجود آوردن و برنامه‌های خودشون رو مطابق با اونا مینویسن، برنامه‌نویسی تابعی و شئ‌گراست. تو این مقاله قصد دارم در مورد این دو پارادایم و تفاوت هایی که با هم صحبت کنم….

ارسال شده در شهریور ۷, ۱۳۹۷

جوملا چیه؟

جوملا یه سیستم مدیریت محتوای تحت وبه که مدیریت و انتشار مطالب رو به شکل ساده امکان پذیر میکنه، جوملا امکانات گسترده ایی و با ابزار های خودش امکان گسترش نرم افزارها رو فراهم میکنه. با جوملا میتونین وبسایت ها و سامانه های تحت وب…

ارسال شده در شهریور ۶, ۱۳۹۷

عناصر مهم در ایجاد یک وبسایت فوق العاده

چطوری میتونیم یه وبسایت عالی داشته باشیم؟ هیچ دستور جادویی و یا الگوی خاصی برای حل این سوال وجود نداره. داشتن یه وبسایت فوق العاده میتونه به عوامل و فاکتور های مختلفی بستگی داشته باشه، مثلا مهارت شما یا بودجه ای که در اختیار دارین…

ارسال شده در شهریور ۴, ۱۳۹۷

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *