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

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



  آیا می دانید تا کنون 6334 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

letteringJS : پلاگین jQuery برای ساخت notification های زیبا

0 815 ۹ اردیبهشت ۹۴

در این مطلب میخوام یک پلاگین jQuery بنام letteringJS رو خدمت شما معرفی کنم و اونو آموزش بدم.

letteringjs

 

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

میبینید که 7learn.com نوشته شده و به هر کدام از کاراکترهاش استایل متفاوتی اعمال شده. با هاور کردن بر روی هر کدام از کاراکترها هم ، بالا پایین میشن.

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

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jquery.lettering.js و jquery.min.js نیاز داریم. این فایلهارو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

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

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

همونطور که دیدید یک تگ h1 با id = logo قرار دادیم و متن 7LEARN.COM رو درونش نوشتیم. درون CSS هم سایز فونتش رو 100 پیکسل قرار دادیم.

حالا میایم و این پلاگین رو راه میندازیم. برای اینکار در تگ اسکریپت نهایی کد زیر رو قرار میدم :

میبینید که در ابتدا h1 رو انتخاب کردیم و بعد از اون متد lettering رو براشون فراخوانی کردیم. با اینکار هیچ تغییر ظاهری در خروجی نمایش داده نمیشه ، اما اگر inspector رو باز کنید ، میبینید که هر کاراکتر درون یک span قرار داده شده و id متفاوتی به هر کدام نسبت داده شده :

میبینید که به کارکتر اول id = char1 و به کاراکتر دوم id = char2 و ... نسبت داده شده است. حالا که این جداسازی انجام شد ، شما میتونین برای هر کدام از این کاراکترها  استایل متفاوتی قرار بدین و به کارکترها جون بدین.

من این کد CSS رو براش قرار دادم ، تا ظاهرش شبیه به چیزی که در دمو دیدید شد :

میبینید که برای هر کدوم رنگ و سایه و ترنسفورم و ... قرار دادیم ، تا زیباتر بنظر برسه.

همچنین برای اینکه تقسیم بندی بصورت دیگه ای انجام بشه ، بصورت زیر نیز میتونین انجام بدین :

کلمه ای :

باید کد زیر رو قرار بدین :

در خروجی کلمه به کلمه جدا میشه و هر کدام در span قرار میگیرن و به هر span به ترتیب id های word1 و word2 و ... نسبت داده میشه.

خطی :

باید کد زیر رو قرار بدین :

در خروجی خط به خط جدا میشه و هر کدام در span قرار میگیرن و به هر span به ترتیب id های line1 و line2 و ... نسبت داده میشه.

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram