بررسی ScrollMagic


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

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

http://www.primeit.pt/en/sectors/telecom درواقع اسکرول مجیک به شما اجازه میدهد که یک سفر کوتاه سه بعدی به چین داشته باشید!

https://sonikpass.com/ یه سایت بسیار جذاب که نقطه قوتش تنها استفاده از این کتابخانه ست.

بعد از دیدن این وبسایت ها احتمالا حالا شما تا حدودی فهمیده اید که با ScrollMagic چه کار هایی میتونید انجام دهید.

و میتونید به این سوال پاسخ بدید که “آیا ScrollMagic همون کتابخانه ایه که من میخواستم؟”.

روش ScrollMagic برای فهمیدن آنکه در کدام قسمت از صفحه چه کاری را انجام دهد،  این است که از کنترلری استفاده میکند که برای هر شی ای که برای محتویاتش اسکرول تعریف شده چندین حالت شبیه به سکانس در نظر میگیرد. و اینطور درمیابد که در کدام نقطه کدام انیمیشن اجرا شود. گرچه به شما قدرت کنترل کردن رو میده اما ممکنه کمی گیج گننده هم باشه. مخصوصا اگر از JavaScript هم استفاده کرده باشید.

چگونه از ScrollMagic در وبسایت خودمون استفاده کنیم؟

برای استفاده از ScrollMagic تنها کافی است در فایل HTML وبسایتتون کتابخانه اش را اضافه کنید:

برای استفاده از ScrollMagic تنها کافی است در فایل HTML وبسایتتون کتابخانه اش را اضافه کنید

در اینجا یک پلاگین در ScrollMagic هست که برای دیباگ کردن نقطه ی تریگر در هنگام اسکرول کردن صفحه است که متونید به فایل HTML تون اضافه اش کنید:

یک پلاگین در ScrollMagic هست که برای دیباگ کردن نقطه ی تریگر در هنگام اسکرول کردن صفحه است که متونید به فایل HTML تون اضافه اش کنید

حالا بریم که بنویسیم اولین صحنه ی ScrollMagic رو بنویسیم

حالا بریم که بنویسیم اولین صحنه ی ScrollMagic رو بنویسیممیخواهیم یک مثال از اضافه کردن یک کلاس “fade_in” به یک المان با آیدی Element_ID رو ببینیم.

اولین کاری که باید انجام بدیم این هستش که اولین اسکرول مجیک رو بسازیم، میتونیم این کار رو با ساخت یک کنترلر به شیوه ی

new ScrollMagic.Controller()

انجام بدیم.این کد به بروزر میگوید که در اسکرول بار از تریگر انیمیشن استفاده شده است.

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

ScrollMagic.scene()

المان تریگری که برای انیمیشن بهش نیاز داریم رو بهش اضافه میکنیم. و همچنین

.setToggleClass()

رو تعریف میکنیم برای اضافه کردن کلاس “fade_in” به المان و سپس اون رو به کنترلری که استفاده میکنیم با تابع

.addTo()

اضافه اش میکنیم.

خیلی چیزهای دیگه هستند که میتونید اونها رو به ScrollMagic.scene() اضافه اش کنید، مثل

reverse:’false’

که جلوی برگرداندن انیمیشن را در حال اسکرول کردن وبسایت میگیرد.

(اگر این مقاله براتون مفید و جالب بوده مقاله های دیگه ی مارو هم مطالعه کنید 🙂

اضافه کردن راهنما

اضافه کردن راهنماقبل از اضافه کردن یک کنترل میتونیم از یک راهنما برای تریگرمون  ایجاد کنیم که به دیباگ کردن برناممون کمک کند با دستور

.addIndicator()

که در این تابع میتونیم رنگ تریگر یا اسمش رو با کد های زیر تغییر بدیم:

colorTrigger:’any_color’

name:’trigger_name’

برای یادگیری بیشتر درمورد این کتابخانه میتونید از لینک زیر کمک بگیرید:

به این مطلب امتیاز دهید
[کل: 1 میانگین: 5]

آموزشطراحی اپلیکیشن iOSطراحی اپلیکیشن اندرویدمقالات آموزشی

backendJavaScriptScrollMagicکتابخانه ی واکنش گرا به اسکرولکتابخانهScrollMagicموشن

سیده زهرا میرکاظمیمشاهده نوشته ها

دانشجوی مهندسی کامپیوتر، علاقه مند به ui/ux و front-end

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *