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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 1075 ۲۶ فروردین ۹۴

در این مطلب میخوام یک پلاگین 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 رو براش فراخوانی کردیم.

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

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram