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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

stellar : پلاگین jQuery برای ساخت خاصیت Parallax

2 2990 ۱۸ دی ۹۳

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

با استفاده از این پلاگین میتونین به راحتی هر چه تمامتر کاری کنید که Background ها و تصاویر و ... با اسکرول شدن صفحه ، با سرعتهای متفاوتی اسکرول بشن و حالت زیبایی به وجود بیاد.

میتونین برای دیدن دمو ، اون رو از آخر مطلب دانلود کنید و ببینید

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

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

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

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

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

تا اینجا 4 تا div قرار دادیم و برای اونا هم تصویر پس زمینه قرار دادیم و همچنین 2 عکس در div سوم قرار دادیم و استایل مناسب رو برای هر کدوم نوشتیم.

حالا اگه بخوایم کاری کنیم که سرعت اسکرول Backgroud ها عوض بشه ، میتونین از خاصیت data-stellar-background-ratio استفاده کنید و عدد مورد نظرتون رو درون اون قرار بدین. عددی از 0 به بالا میتونین به اون بدین ، هر چه این عدد بیشتر باشه ، سرعت اسکرول Background بیشتر میشه. برای مثال برای div اول بصورت زیر قرار میدیم :

میبینید که عدد 2.5 رو برای اون در نظر گرفتیم. علاوه بر تغییر سرعت Background میتونین سرعت رو برای عکس هم تغییر بدین. برای اینکار باید از خصوصیت data-stellar-ratio استفاده کنید. مثلا برای عکس اول داریم :

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

با اینکار به پلاگین میگیم که ، هر زمان window ( اسکرول صفحه ) ، بالا یا پایین شد ، stellar انجام بشه و خاصیت parallex رو برای ما بوجود بیاره. بجای window میتونین هر عنصر دیگه ای که قابلیت اسکرول شدن رو داره ، قرار بدین.

یک خاصیت مهم دیگه که وجود داره ، خاصیت data-stellar-vertical-offset هست که میتونین برای اون المنت یک مقدار رو مشخص کنین و اون رو از جای اصلیش بالاتر و پایینتر ببرین. اگر مقدار منفی بدین ، المنت به سمت پایین و اگر مقدار مثبت بدین ، المنت به سمت بالا برده میشه.

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

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

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

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

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    سلام ممنون از آموزشی که گذاشتید.

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram