midnight.js : پلاگین jQuery برای تغییر حالت متن هدر بصورت زیبا

- visibility ۰ mode_comment

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

midnight

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

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

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

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

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

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

اولین کاری که باید بکنید اینه که کدهای header رو قرار بدین :

میبینید که در ابتدا یک div با کلاس fixed قرار دادم و درون اون هم متن خودم رو در یک h1 با کلاس logo قرار دادم. با دادن کلاس fixed به div مورد نظر موقعیتش ثابت میشه ولی مقدار خاصیت top اون 0 هست که با استفاده از کد زیر میتونین مقدار top رو تغییر بدین :

همچنین برای اینکه فونت کلاس logo رو افزایش بدیم ، بصورت زیر عمل میکنیم :

حالا میایم و هر چند بخشی که میخوایم رو قرار میدیم :

استایل ساده برای هر کدام :

حالا باید با استفاده از خاصیت data-midnight برای هر بخش مشخص کنید که ، متن هدرتون چه کلاسی داشته باشه :

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

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

در آخر هم باید در تگ اسکریپت نهایی کد زیر رو برای فعالسازی پلاگین قرار بدین :

میبینید که div با کلاس fixed رو انتخاب کردیم و بعد از اون متد midnight رو براش فراخوانی کردیم.

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

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

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

comment دیدگاه کاربران

نیاز به لاگین

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