ستروکیت

SimpleParallax یک کتابخانه بسیار ساده جاوا اسکریپ است که می‌توانید با آن به هر تصویر انیمیشن پارالکس بدهید.

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

همچنین می‌توانید پارالکس را بر روی تگ یا srcset تصاویر اعمال کنید. اجرای آن کاملا ساده است و انیمیشن آن طبیعی است.

نصب

نصب بسیار ساده است. می‌توانید اسکریپت را مستقیما در HTML خود وارد کنید:

<script src="simpleParallax.js"></script>

یا نصب از طریق npm/yarn را انتخاب کنید:

#npm
npm install simple-parallax-js

#yarn
yarn add simple-parallax-js

پس از نصب آن از طریق مدیریت بسته(package manager)، می‌توانید آن‌را بصورت زیر وارد کنید:

import simpleParallax from 'simple-parallax-js';

مقداردهی اولیه

برای اضافه کردن افکت پارالکس، می‌توانید هر تصویری را که می‌خواهید هدف قرار دهید. مثلا:

<img class="thumbnail" src="image.jpg" alt="image">

کد جاوااسکریپ زیر را به سادگی وارد کنید:

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image);

همچنین می‌توانید پارالکس را روی چندین تصویر اعمال کنید، چیزی مانند:

var images = document.querySelectorAll(img);
new simpleParallax(images);

موارد اصلی 

به طور پیش فرض اگر هیچ پارامتری را مشخص نکنید، simppleParallaax از up orientation استفاده می‌کند. نتیجه آن خواهد شد که تصویر به هنگام اسکرول به پایین از پایین به بالا، و از بالا به پایین هنگام اسکرول به بالا حرکت خواهد کرد.

می‌توانید از این مقدارها برای جهت حرکت انتخاب کنید: up - right - down - left - up left - up right - down left - down right.

اگر می‌خواهیدتنظیمات مختلف روی تصاویر مختلف اعمال کنید از اعمال چندین نمونه simpleParallax دریغ نکنید. این کتابخانه به طور خودکار موارد مشابه را در همان حلقه فرآیندهای نمونه‌های فعلی اضافه می‌کند. بنابراین هیچ عملکرد اضافی مصرف نخواهد شد.

<img class="left" src="image.jpg" alt="image">
<img class="right" src="image.jpg" alt="image">

var imageLeft = document.querySelector('.left'),
 imageRight = document.querySelector('.right');

new simpleParallax(imageLeft, { 
 orientation: 'left' 
});
new simpleParallax(imageRight, { 
 orientation: 'right' 
});

تنظیمات بیشتر

افکت پارالکس با اثر مقیاس گذاری(scalling effect) روی تصویر ایجاد می‌شود. اندازه مقیاس‌پذیر به را حتی قابل تغییر است (مقدار پیش فرض 1.3 است ). هر چه مقیاس بالاتر تنظیم شود، پارالکس سریع‌تر و قابل مشاهده‌تر خواهد بود.

 new simpleParallax(image, { 
 scale: 2 
});

overflow یکی دیگر از تنظیمات جالب است. overflow به طور پیش فرض false تنظیم شده است، اگر true تنظیم شود تصویر از جایگاه طبیعی خود حرکت خواهد کرد.

new simpleParallax(image, { 
 overflow: true 
});