ساده ترین راه برای ساخت پارالکس با simpleParallax

simpleParallax یک کتابخانه بسیار ساده و کوچک جاوا اسکریپت هست که باهاش میتونیم به هر عکسی توی صفحه انیمیشن پارالکس بدیم.

افکت پارالکس مستقیما به خود تگ img داده میشه و نیازی به background-image نیست. به وسیله این کتابخانه ما میتونیم افکت پارالکس رو بدون تغییر لایه ها به صفحه اضافه کنیم.

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

نصب کتابخانه

نصب کتابخانه بسیار ساده است. میتونیم اونو به شکل مستقیم به صفحه اضافه کنیم

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

و یا از npm یا yurn اسفاده کنیم.

#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">

و کد زیر رو اضافه کنید

let image = document.getElementsByClassName('thumbnail')
new simpleParallax(image)

و یا میتونین تمامی تگ های img صفحه رو انتخاب کنید. برای مثال:

let images = document.querySelectorAll(img)
new simpleParallax(images)

موارد اصلی

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

میتونیم این حرکت پیشفرض رو به مقادیر زیر تغییر بدیم:

• up
• right 
• down 
• left 
• up left 
• up right
• down left
• down right

اگه نیاز داشته باشیم تنظیمات متفاوتی برای تصاویر متفاوت اعمال کنیم، میتونیم به شکل زیر عمل کنیم:

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

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

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

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

افکت پارالکس با یک میزان بزرگنمایی اعمال میشه. یعنی درواقع تصاویر به میزان 1.3 بزرگ میشن ( scale ). این مقدار پیشفرض هست ولی میشه اونو تغییر داد:

new simpleParallax(image, { 
    scale: 2 
})

هرچی این مقدار رو بیشتر کنیم، اثر پارالکس رو بیشتر میبینیم و یه جورایی تصویر سریعتر حرکت میکنه.

همچنین مقدار overflow به شکل پیشفرض false هست. میشه این مقدار رو هم به شکل زیر تغییر داد:

new simpleParallax(image, { 
    overflow: true 
})

مثال ها و تنظیمات بیشتر رو از سایت simpleParallax ببینین و تجربه خودتون رو با ما به اشتراک بذارین