• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!
0 4412 ۲۳ آبان ۹۳ محمد اسفندیاری

در این مطلب میخوام ساختن یک روبان ( ribbon ) زیبا رو بهتون آموزش بدم. این نمونه روبان رو شاید در بیشتر سایتها دیده باشید که در گوشه و سمت بالا قرار دارن. ولی هر وقت که روی اونا هاور میکنیم ، هیچ اتفاقی نمیوفته. اما در این مطلب میخوام حالت انیمیشنی مناسبی رو بهتون آموزش بدم که مطمئنم خیلی خوشتون میاد.

همچنین پشتیبانی خوبی از مرورگرها داره.

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

برای شروع به صفحه مورد نظر در سایت Github برید و فایلهاشو دانلود کنید. ما در این مطلب به فایلهای forkit.css و forkit.js نیاز داریم. من این فایلهارو در انتها براتون قرار دادم و میتونین اونو دانلود کنید و از اون استفاده کنید.

نحوه استفاده :

ابتدا یک فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

تا اینجا کدهای CSS و HTML رو قرار دادیم و ظاهر رو مشخص کردیم. فایل forkit.css رو در قسمت head و فایل forkit.js رو در انتها اضافه کردیم. در انتها هم یک تگ باز و بسته script رو قرار دادیم که کدهای مورد نظرمونو در اون قرار بدیم.

برای قرار دادن روبان در گوشه بالا ، کافیه که یک تگ a رو قرار بدین و کلاس forkit رو به اون بدین. بصورت زیر :

با اینکار روبان قرار میگیره ، ولی چیزی روش نوشته نشده. برای اینکه چیزی روی اون بنویسید ، باید از خاصیت data-text استفاده کنید. بصورت زیر :

حالا اگر صفحه رو Refresh کنید میبینید که بر روی روبان متن نمونه 1 نوشته شده است. وقتی روی روبان هاور میکنید ، میتوان کاری کرد که متن آن تغییر کند. برای اینکار از خاصیت data-text-detached استفاده میکنیم. بصورت زیر :

حالا میرسیم به اون قسمتی که در ابتدا مخفی هست و با کشیدن روبان به سمت پایین ظاهر میشه. برای ساختن اون قسمت باید یک div درست کنید و کلاس forkit-curtain رو به اون بدین. به همین سادگی. حالا فقط کافیه که اطلاعاتی که میخواین کاربر در هنگام پایین کشیدن روبان اونارو ببینه ، در این div قرار بدین. برای بسته شدن این قسمت هم باید یک div بسازید و کلاس close-button رو به اون بدین. حالا اگر روی این div کلیک کنید ، به صفحه اصلی برمیگردیم.

با استفاده از کدهای جاوااسکریپت میتونین کاری کنید که هنگام باز شدن و بسته شدن ، کدهایی اتوماتیک اجرا بشوند. برای اینکار باید کدها رو در تگ باز و بسته script که در انتها وجود دارد ، قرار دهیم.

کدهایی که در هنگام باز شدن اجرا میشن :

کدهایی که در هنگام بسته شدن اجرا میشن :

خودتون که یک مقدار باهاش کار کنید ، با قابلیتهای دیگه اون هم آشنا میشین.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

نوع کد رايگان

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram