آسان‌ترین راه ساختن پارالاکس به وسیله simpleParallax

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

انیمیشن  پارالاکسی مستقیماً روی خود عکس‌ها اعمال می‌شود و نیازی نیست مانند دیگر کتابخانه‌های پارالاکسی از عکس پس‌زمینه استفاده کنیم.

در حقیقت شما می‌توانید این حالت را بدون اینکه چیدمان سایت خود را تغییر دهید ایجاد کنید.

شما می‌توانید این انیمیشن را روی همه عکس‌های سایت خود ایجاد کنید و شاهد انیمشین‌های ساده و روانی باشید.

نصب : 

نصب این کتابخانه بسیار ساده است. شما می‌توانید آن‌را مستقیماً در کد‌های HTML خود استفاده کنید.

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

یا می‌توانید از بسته‌های مدیریت پکیج مثل npm یا yarn

برای نصب استفاده کنید : 

#npm
npm install simple-parallax-js

#yarn
yarn add simple-parallax-js

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

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);

موارد اصلی : 

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

ما می‌توانیم از جهت‌های بالا-راست-پایین-چپ-بالاچپ-بالاراست-پایین‌چپ-پایین‌راست استفاده کنیم.

اگر شما می‌خواهید برای عکس‌های مختلف انیمیشن‌های مختلفی استفاده کنید در اینکه برای هر عکس باید مقداردهی‌های مختلف کنید شکی نیست.این کتابخانه مقدارهی‌های شما را به صورت اتوماتیک به عکس‌های مورد نظر اختصاص می‌دهد واین‌کار شما باعث کاهش کیفیت کار شما نمی‌شود.

<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' 
});

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

بزرگ‌نمایی از دیگر ویژگی‌های موجود در این کتابخانه می‌باشد که هر چه این عدد بزرگ‌تر باشد این انیمشین قابل ملاحضه‌تر خواهد شد.

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

 Overflow  از دیگر تنظیمات موجود در این کتابخانه می‌باشد که به صورت پیش‌فرض Flase تنظیم شده است اگر ما مقدار آن را به True تغییر دهیم این‌کار باعث می‌شود عکس خارج از حالت طبیعی خود قرار بگیرد.

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

 منبع

همچنین اگر قصد یادگیری جاوااسکریپت دارید؛می‌توانید از دوره‌ی آموزشی جاوااسکریپت در وبسایت راکت استفاده کنید.