stellar.js | Stellar.js - Parallax | Frontend Framework library

Below code shows my script file included in footer.php, I need to convert HTML theme to WordPress theme. the below code I want to write a function of functions.php. so how can I create wp_register_script, and wp_enqueue_script??

EDIT: sample of the problem: https://codepen.io/wa23/pen/yooGyO Make the live render window as tall as possible to see the effect. Start scrolling from the picture of earth and by the time you get to the 3rd div, the image is already shifted so that it is almost out of view entirely.

I have 4 divs like so:

I'm still learning jQuery, and I'm trying to figure out why this script isn't working.

The goal is to turn off Stellar.js parallax for mobile, which I've done by detecting a specific CSS class. I'm also trying to turn it off on Safari and IE because of jumpy performance when using a mousewheel to scroll. Any assistance troubleshooting, since I know the code is syntatically valid, would be awesome.

(It's wrapped in the "jQuery(document).ready(function($)" to function well in WordPress.)

I am new using Laravel Mix, I cant' add the jquery library stellar, it show me this error, when I try npm run dev: This dependency was not found: * jquery.stellar in ./resources/assets/js/bootstrap.js

But I already installed it using npm install --save jquery.stellar or npm install jquery.stellar

this is my webpack file: webpack.mix.js:

I just had an issue, that I have 2 hero image sections on the same page, and I had to use background-attachement: fixed on them. Don't have to say, that the scroll is very slow on most browsers (looking at you IE). So the performance is not very good. Oh and this site has also some parallax scrolled elements (with stellar.js) with smooth scroll (used: nicescroll.js for this). Ofcourse I made the images as small as possible and try not to use background-size: cover (performance again). Oh and I use the window.requestAnimationFrame() in my core.js file (performance again).

Is there a way to make this 2 hero sections images work like background-image: fixed ?

index.html