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

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 مراجعه کنین.

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

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

۵ افزونه وردپرس برای تقویت کسب و کار تان

در این مقاله قصد داریم تا ۵ افزونه ی وردپرسف برای تقویت کسب و کار را خدمت شما عزیزان معرفی کنیم.

ارسال شده در اردیبهشت ۲۹, ۱۳۹۸

۳ فریم ورک برتر Front-end در سال ۲۰۱۹

در این مقاله به معرفی ۳ فریم ورک برتر Front-end در سال ۲۰۱۹ می پردازیم.

ارسال شده در اردیبهشت ۲۸, ۱۳۹۸

حل مثالی از زبان برنامه نویسی php

در سلسله پست هایی قرار است که مثال هایی از زبان برنامه نویسی php برای شما بزنیم تا هر چه آسان تر شما را با زبان برنامه نویسی php آشنا کنیم. در پایین مثال اول را بررسی خواهیم کرد: مسئله شماره ۱ اگر لیست اعداد…

ارسال شده در اردیبهشت ۲۷, ۱۳۹۸

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

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