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

- visibility ٢ mode_comment

در این مطلب میخوام یک پلاگین 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 هست که میتونین برای اون المنت یک مقدار رو مشخص کنین و اون رو از جای اصلیش بالاتر و پایینتر ببرین. اگر مقدار منفی بدین ، المنت به سمت پایین و اگر مقدار مثبت بدین ، المنت به سمت بالا برده میشه.

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

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

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

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

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

محمد اسفندیاری

موفق باشید

نیاز به لاگین

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